.stage-loot { display:flex; align-items:center; gap:10px; width:100%; min-height:94px; padding:14px 12px; margin:0 0 14px; border:2px solid #c4af60; border-radius:14px; background:#fff9e2; text-align:left; color:#735222; touch-action:manipulation; }
.stage-loot:hover { background:#fff1bd; border-color:#b58a32; }
.loot-icon { position:relative; display:grid; place-items:center; flex:none; width:38px; height:44px; }
.loot-icon svg { width: 100%; height: 100%; fill: #fffbe5; stroke: #b47422; stroke-width: 2; }
.loot-icon svg path { fill: #edba43; stroke-width: 1; }
.stage-loot-copy { display:grid; gap:5px; min-width:0; flex:1; }
.stage-loot-copy>strong { display:block; font-size:20px; line-height:1.4; white-space:nowrap; }
.stage-loot-copy>strong b { font-size:27px; line-height:1; }
.loot-next-tier { font-size:13px; line-height:1.5; color:#6a715f; white-space:nowrap; }
.loot-next-tier b { color:#8b6320; font-size:15px; }
.loot-chevron { flex:none; font:500 29px/1 Arial,sans-serif; color:#698c80; }
.stage-loot.collected { background: #edf5e8; border-color: #a3b99e; }
.stage-loot.collected strong { color: #396950; }
.stage-loot.collected:hover { background:#e0f0d7; }
.loot-check { position:absolute; right:-3px; bottom:0; display:grid; place-items:center; width:23px; height:23px; border:2px solid #edf5e8; border-radius:50%; background:#36845c; color:white; font:900 15px/1 Arial,sans-serif; }
#stage-loot-dialog { width: min(1050px, calc(100% - 28px)); max-width: none; max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; padding: 22px; border: 3px solid #548c81; background: #fffeef; }
.loot-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; position: sticky; top: -22px; padding: 8px 0; background: #fffeef; z-index: 2; }
.loot-dialog-heading div > span { color: #55766c; font-size: 16px; font-weight: 800; }
#stage-loot-dialog h2 { margin: 4px 0 8px; color: #214e55; font-size: clamp(23px, 3vw, 32px); }
.loot-dialog-close { flex: none; width: 52px; height: 52px; border: 2px solid #6f9990; border-radius: 14px; background: #e1f3e8; color: #214e55; font-size: 35px; line-height: 1; }
.loot-dialog-state { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; font-size: 19px; }
.loot-dialog-state > strong { padding: 5px 14px; border-radius: 20px; background: #286768; color: #fffbd5; font-size: 17px; }
.loot-dialog-state b { font-size: 24px; color: #8d5e17; }
#stage-loot-dialog .loot-dialog-note { margin: 10px 0; font-size: 16px; line-height: 1.6; color: #4d6a62; }
#stage-loot-dialog h3 { display: flex; gap: 12px; align-items: center; margin: 18px 0 10px; font-size: 21px; }
#stage-loot-dialog h3 > span { font-size: 16px; color: #6c7c6e; }
#stage-loot-dialog .loot-first-note { font-size: 16px; line-height: 1.5; margin: 0 0 10px; }
.loot-card-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
#stage-loot-dialog .loot-card { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; padding: 9px 6px; border: 2px solid #d0c591; border-radius: 12px; background: #fff9db; text-align: center; line-height: 1.3; }
#stage-loot-dialog .loot-card.found { border-color: #acc8ac; background: #eaf5e8; }
#stage-loot-dialog .loot-card.hard-only:not(.found) { background: #f3eff8; border-color: #c0a7cc; }
.loot-card-art { display: grid; place-items: center; position: relative; width: 100%; height: 76px; margin-bottom: 7px; border-radius: 8px; background: color-mix(in srgb, var(--loot-accent) 18%, #fff); }
.loot-card-art > img { height: 76px; width: 76px; object-fit: contain; border-radius: 8px; }
.loot-card-art > .sprite { width: 76px; height: 76px; }
.loot-mystery { color: #758b82; font-size: 45px; font-weight: 900; line-height: 1; }
.loot-hand { position: absolute; left: 3px; bottom: 2px; }
.loot-hand .hand-icon { display: block; width: 30px; height: 30px; }
.loot-card > strong { display: block; width: 100%; font-size: 17px; min-height: 45px; overflow-wrap: anywhere; }
.loot-card-status { display: block; margin-top: auto; padding-top: 5px; font-size: 14px; font-weight: 900; color: #925511; }
.loot-card.found .loot-card-status { color: #357653; }
.loot-rare { display: block; margin-top: 5px; border-radius: 6px; background: #e8ddf2; color: #76418a; padding: 3px 6px; font-size: 12px; font-weight: 800; }
.loot-play { display: block; width: min(100%, 360px); margin: 18px auto 4px; min-height: 56px; font-size: 21px; }
/* Show the four destinations together so their remaining cards can be compared. */
@media (min-width: 1100px) {
  body[data-screen="learn"] .learn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  body[data-screen="learn"] .lesson-content { padding: 12px 10px; }
  body[data-screen="learn"] .world-thumbnail { aspect-ratio: auto; height: clamp(175px, 24dvh, 230px); }
  body[data-screen="learn"] .thumbnail-copy { left: 12px; right: 12px; bottom: 14px; }
  body[data-screen="learn"] .world-thumbnail h2 { font-size: 23px; line-height: 1.4; }
  body[data-screen="learn"] .thumbnail-play { display: none; }
  body[data-screen="learn"] .difficulty-picker { gap: 5px; }
  body[data-screen="learn"] .difficulty-picker button { font-size: 13px; padding: 10px 2px; }
  body[data-screen="learn"] .stage-loot { gap:8px; padding:12px 10px; }
  body[data-screen="learn"] .loot-icon { width:32px; height:38px; }
  body[data-screen="learn"] .stage-loot-copy>strong { font-size:18px; }
}
@media (max-width: 650px) {
  .loot-icon { width: 42px; height: 42px; }
  #stage-loot-dialog { padding: 14px; }
  .loot-dialog-heading { top: -14px; }
  .loot-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .loot-card > strong { font-size: 14px; }
  .loot-card-status { font-size: 13px; }
  .loot-rare { padding: 3px; font-size: 11px; }
}

.loot-rare.tier-2{background:#d9ecf8;color:#28668a}