/* Money: what only the vault has. The rest comes from /rooms/room.css. */

/* the score, the rank and level, and the safe's bags */
.mn-score { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: grid; justify-items: center; text-shadow: 0 0 18px rgba(255, 200, 90, .45); }
.mn-score:empty { display: none; }
.mn-score strong { font: 300 42px/1 "Segoe UI", Arial, sans-serif; color: #fff4dc; font-variant-numeric: tabular-nums; }
.mn-score small { font-size: 12px; color: #d8c08a; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
.mn-safe { display: flex; gap: 5px; margin-top: 6px; }
.mn-safe i { width: 14px; height: 16px; border-radius: 45% 45% 40% 40% / 35% 35% 60% 60%; background: rgba(255,255,255,.12); border: 1px solid rgba(217,178,107,.45); }
.mn-safe i.in { background: radial-gradient(circle at 40% 35%, #f4e2a8, #b8893a 70%); border-color: #f1d59a; box-shadow: 0 0 8px rgba(255, 200, 90, .6); }
@media (max-width: 760px) {
  .mn-score { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .mn-score strong { font-size: 34px; }
}

/* points floating up from a group cashed in */
.mn-pop { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -50%); font: 800 18px/1 var(--font); color: #fff;
  text-shadow: 0 0 10px rgba(255, 210, 120, .9), 0 2px 4px #000; animation: mnpop 1.2s ease-out forwards; white-space: nowrap; }
.mn-pop.big { font-size: 26px; color: #ffe9a8; }
@keyframes mnpop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -200%) scale(1); } }


/* the shop */
.swatch-coins { display: flex; gap: 6px; align-items: center; justify-content: center; min-height: 90px; height: 100%; background: radial-gradient(circle at 50% 40%, #2a2418, #0a0806); }
.swatch-coins i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--gu-serif); font-style: normal; color: #0007;
  background: radial-gradient(circle at 35% 30%, #fff9 0, var(--c) 40%, #0005 100%); box-shadow: inset 0 0 0 2px #fff3, 0 2px 4px #000a; }
.swatch-coins.glow i { box-shadow: 0 0 12px var(--c), inset 0 0 0 2px #fff6; }
.swatch-vault { min-height: 90px; height: 100%; display: grid; place-items: center; background: #080808; }
.swatch-vault b { width: 64px; height: 76px; border: 4px solid var(--frame); background: var(--back); box-shadow: inset 0 -16px 0 #0004; }
.swatch-hall { min-height: 90px; height: 100%; background: radial-gradient(ellipse at 50% 20%, var(--light), transparent 55%), var(--wall); }