/* Limited gift (docs/superpowers/specs/2026-10-20-monetization-v2-design.md section B): the modal,
   the countdown chip in the meters and the shop block. */
.gift-modal { display:grid; gap:10px; justify-items:center; text-align:center; }
.gift-modal h2 { margin:0; }
.gift-timer { display:inline-flex; gap:6px; align-items:center; margin:0; font-size:20px; font-weight:800; }
.gift-timer.is-hot { color:#ff7b7b; animation:gift-hot 1.2s ease-in-out infinite; }
@keyframes gift-hot { 50% { opacity:.6; } }
.gift-tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; max-width:420px; }
.gift-tier { display:grid; gap:4px; justify-items:center; padding:8px 4px; border:0; border-radius:14px; background:#ffffff14;
  color:inherit; font:inherit; cursor:pointer; }
.gift-tier img { width:76px; height:76px; object-fit:contain; }
.gift-tier b { font-size:14px; }
.gift-tier.is-on { background:#ffc53d33; box-shadow:inset 0 0 0 2px #ffc53d; }
.gift-modal .gift-x { position:static; }
.gift-modal .store-chips { justify-content:center; }
.gift-modal .store-chip__ico { width:22px; height:22px; }
.gift-buy { max-width:420px; }

.meter-gift { position:relative; width:42px; height:42px; flex:none; display:grid; place-items:center; padding:0; border:0;
  background:none; cursor:pointer; animation:gift-bob 2.4s ease-in-out infinite; }
.meter-gift img { width:40px; height:40px; object-fit:contain; }
.meter-gift small { position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); padding:1px 4px; border-radius:6px;
  background:#e5484d; color:#fff; font-size:9px; font-weight:800; white-space:nowrap; }
@keyframes gift-bob { 50% { transform:translateY(-2px); } }
#meters.has-gift, body.game-mode #meters.has-gift { grid-template-columns:auto auto minmax(0,1fr); }
#meters.has-medal.has-gift, body.game-mode #meters.has-medal.has-gift { grid-template-columns:auto auto auto minmax(0,1fr); }
/* With the chip the resource bar is too narrow for captions: values only, the energy timer stays. */
#meters.has-gift .meter-bar .resource-tile small { display:none; }
#meters.has-gift .meter-bar .resource-energy small:has([data-countdown]) { display:block; }

.store-gift__open { width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:10px 12px;
  border:0; border-radius:16px; background:linear-gradient(120deg,#e5484d3d,#ffc53d38); box-shadow:inset 0 0 0 2px #ffc53d66;
  color:inherit; font:inherit; text-align:left; cursor:pointer; }
.store-gift__open img { width:58px; height:58px; object-fit:contain; }
.store-gift__open b { display:block; font-size:16px; }
.store-gift__go { transform:rotate(-90deg); }
@media (max-width:380px) { .meter-gift { width:36px; } .meter-gift img { width:34px; height:34px; } .gift-tier img { width:62px; height:62px; } }
@media (prefers-reduced-motion:reduce) { .gift-timer.is-hot, .meter-gift { animation:none; } }