/* Shared rewards and currency presentation. */
.badge svg, .hud-chip svg, .top-actions svg, .crowns svg, .crown-row svg {
  vertical-align: middle;
}
.currency-chip {
  color: #34e1ff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.loot-reveal {
  position: relative;
  overflow: hidden;
  margin: 12px auto 0;
  max-width: 420px;
  padding: 12px 12px 16px;
  border-radius: 14px;
  background: #171c2e;
  color: #ffd166;
}
.loot-chest {
  height: 104px;
  animation: loot-drop 450ms ease-out both, loot-shake 260ms 480ms ease-in-out;
}
.loot-bronze .loot-chest { color: #efad72; }
.loot-silver .loot-chest { color: #d3e2f4; }
.loot-gold .loot-chest { color: #ffd166; }
.loot-vault .loot-chest { color: #34e1ff; }
.loot-vault .loot-chest svg { stroke-width: 2.5; }
.loot-open .loot-chest { animation: loot-burst 350ms ease-out; }
.loot-totals { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; font-weight: 800; }
.loot-totals span { display: inline-flex; align-items: center; gap: 5px; }
.loot-diamonds { color: #34e1ff; }
.loot-crowns { display: flex; justify-content: center; gap: 7px; min-height: 36px; margin-top: 10px; }
.loot-crowns span { opacity: 0; }
.loot-show-crowns .loot-crowns span { animation: loot-stamp 260ms ease-out both; }
.loot-show-crowns .loot-crowns span:nth-child(2) { animation-delay: 160ms; }
.loot-show-crowns .loot-crowns span:nth-child(3) { animation-delay: 320ms; }
.loot-gems { position: absolute; top: 50px; left: 50%; opacity: 0; color: #34e1ff; pointer-events: none; }
.loot-show-gems .loot-gems { animation: loot-gems 450ms ease-out both; }
.loot-kept { color: #f4f5fa; margin: 4px 0 12px; }
.loot-busted .loot-crowns, .loot-busted .loot-gems { display: none; }
.loot-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.loot-final .loot-crowns span { opacity: 1; animation: none; }
.loot-final .loot-gems { opacity: 0; animation: none; }
.loot-final .loot-chest { animation: none; }
#result-xp-list { font-size: 14px; }
@keyframes loot-drop { from { opacity: 0; transform: translateY(-36px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loot-shake { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes loot-burst { 50% { transform: scale(1.15); } }
@keyframes loot-stamp { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
@keyframes loot-gems { from { opacity: 1; transform: translate(-50%, 0) scale(.7); } to { opacity: 0; transform: translate(30px, 65px) scale(.4); } }
@media (prefers-reduced-motion: reduce) {
  .loot-reveal *, .loot-show-crowns .loot-crowns span { animation: none !important; transition: none !important; }
  .loot-crowns span { opacity: 1; }
}

/* Keep the reward and its next action together on compact screens. */
#result-panel { padding: 16px 20px; }
#result-sub { margin: 4px auto; }
#result-character { height: 130px; }
#result-character svg { width: 130px; height: 130px; }
#result-crowns:empty { display: none; }
#result-loot .loot-reveal { margin-top: 4px; padding: 4px 10px 8px; }
#result-loot .loot-chest { height: 100px; }
#result-loot .loot-art { width: 150px; height: 100px; overflow: visible; }
#result-xp-list { margin: 4px auto 6px !important; text-align: center !important; }
#loot-breakdown { text-align: left; }
.loot-breakdown-toggle {
  background: transparent;
  border: 0;
  color: #b9eefa;
  cursor: pointer;
  font: inherit;
  padding: 6px 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.loot-breakdown-toggle:focus-visible { outline: 2px solid #34e1ff; outline-offset: 2px; }
#result-rank-line { margin-bottom: 10px !important; }
#result-panel .stack { gap: 6px; }
.loot-bronze { --chest-body: #a65a36; --chest-light: #d48750; --chest-metal: #f5bd78; --chest-shadow: #582c28; }
.loot-silver { --chest-body: #677b96; --chest-light: #b3c5d9; --chest-metal: #e5f0f8; --chest-shadow: #314157; }
.loot-gold { --chest-body: #bc7925; --chest-light: #f4c85a; --chest-metal: #ffec9d; --chest-shadow: #71421d; }
.loot-vault { --chest-body: #277d91; --chest-light: #70d8e6; --chest-metal: #d6fcff; --chest-shadow: #174452; }
.loot-rays { color: var(--chest-metal); opacity: .5; }
.loot-lid { transform-box: fill-box; transform-origin: 12% 100%; transition: transform 350ms ease-out; }
.loot-open .loot-lid, .loot-final .loot-lid { transform: rotate(-28deg) translateY(-5px); }
.loot-art-gems { opacity: 0; transform-origin: center; }
.loot-open .loot-art-gems { animation: chest-gems 500ms ease-out both; }
.loot-final .loot-art-gems { opacity: 1; animation: none; }
.loot-diamonds { visibility: hidden; }
.loot-show-gems .loot-diamonds, .loot-final .loot-diamonds { visibility: visible; }
.loot-crowns .off { color: #b0b6c9; opacity: 0; }
.loot-show-crowns .loot-crowns .off { animation: loot-off-stamp 260ms ease-out both; }
.loot-final .loot-crowns .off { opacity: .65; }
@keyframes loot-off-stamp { from { opacity: 0; transform: scale(1.5); } to { opacity: .65; transform: scale(1); } }
@keyframes chest-gems { from { opacity: 0; transform: translateY(18px) scale(.6); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .loot-lid { transition: none; }
  .loot-crowns .off { opacity: .65; }
  .loot-final .loot-art-gems { opacity: 1; }
}
#result-character .hr-char { width: 130px !important; height: 130px !important; }