/* VIP shop (diamonds) */
#panel-vip { max-width: 1100px; margin: 0 auto; }
.vip-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.vip-head h2 { font-family: var(--pixel); font-size: 1.6rem; }
.vip-status { color: var(--muted); font-size: 0.9rem; }
.vip-status.on { color: #7fd8ff; font-weight: 600; }
.vip-balance {
  display: flex; align-items: center; gap: 8px; font-family: var(--pixel); font-size: 1.4rem;
  background: #0b1424; border: 1px solid #2a6fa8; border-radius: 12px; padding: 6px 14px;
}
.diamond { image-rendering: pixelated; flex: none; }

.vip-section { margin-top: 18px; }
.vip-section h3 { font-family: var(--pixel); font-size: 1.15rem; margin-bottom: 10px; }
.vip-perks { list-style: none; display: grid; gap: 4px; margin-bottom: 12px; font-size: 0.9rem; color: var(--muted); }
.vip-perks li::before { content: '✦ '; color: #7fd8ff; }
.vip-perks b { color: var(--text); }

.vip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.vip-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: linear-gradient(180deg, #1c2f52, var(--card)); border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px;
}
.vip-vip .vip-card { border-color: #2a6fa8; background: linear-gradient(180deg, #17375e, var(--card)); }
.vip-card-art { width: 56px; height: 56px; object-fit: contain; }
.vip-card-art.pixel { image-rendering: pixelated; }
.vip-card-name { font-family: var(--pixel); font-size: 1.05rem; }
.vip-price { display: inline-flex; align-items: center; gap: 4px; font-family: var(--pixel); font-size: 1.15rem; color: #7fd8ff; }
.vip-buy { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.vip-off {
  position: absolute; top: 8px; right: 8px;
  background: var(--red); color: #fff; font-family: var(--pixel); font-size: 0.75rem; border-radius: 6px; padding: 1px 6px;
}


.vip-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 300;
  background: #17375e; border: 1px solid #7fd8ff; color: #fff; border-radius: 10px; padding: 10px 18px;
  font-family: var(--pixel); box-shadow: 0 10px 30px #000a;
}
.vip-toast.bad { background: #3a1c2a; border-color: var(--red); }

/* HUD diamonds */
.hud-diamonds { cursor: pointer; }
.hud-diamonds:hover { border-color: #7fd8ff; }

/* ---------------------------------------------------------------- the shop's new look (tabs, boosters) */
.vip-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 16px 18px; border-radius: 16px; border: 1px solid #2a6fa8;
  background: radial-gradient(ellipse at top left, #2a5a9a55, transparent 60%), linear-gradient(135deg, #17375e, #0b1424 70%);
}
.vip-hero-text { display: grid; gap: 6px; }
.vip-wallet { display: grid; gap: 8px; justify-items: end; }
.vip-get { border-color: #ff6b9d; color: #ffb3cb; }
.vip-running { display: flex; flex-wrap: wrap; gap: 6px; }
.vip-boost-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; background: #0b1424; border: 1px solid #3d5d9e; }
.vip-boost-chip b { font-family: var(--pixel); color: #ffd75e; }
.vip-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #070e1b; border: 1px solid #22355c; margin-bottom: 14px; flex-wrap: wrap; }
.vip-tabs button {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px;
  border: 0; border-radius: 9px; background: none; color: var(--muted); font-family: var(--pixel); font-size: 0.85rem; cursor: pointer;
}
.vip-tabs button.on { background: linear-gradient(180deg, #2a4170, #1b2c50); color: #ffd75e; box-shadow: inset 0 0 0 1px #3d5d9e; }

.boosts { display: grid; gap: 12px; }
.boost-row {
  --b: #4aa3ff;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--b) 45%, #22355c);
  background: radial-gradient(ellipse at left, color-mix(in srgb, var(--b) 18%, transparent), transparent 55%), linear-gradient(180deg, #13213d, #0b1424);
}
.boost-row.b-exp { --b: #ffd75e; }
.boost-row.b-drop { --b: #4ade80; }
.boost-row.b-shiny { --b: #ff6bb5; }
.boost-row.b-catch { --b: #ff9f43; }
.boost-row.running { box-shadow: 0 0 0 1px var(--b), 0 0 24px color-mix(in srgb, var(--b) 30%, transparent); }
.boost-icon { width: 64px; height: 64px; display: grid; place-items: center; font-size: 2rem; border-radius: 14px; background: color-mix(in srgb, var(--b) 18%, #070e1b); border: 1px solid color-mix(in srgb, var(--b) 50%, transparent); }
.boost-info { display: grid; gap: 4px; min-width: 0; }
.boost-info b { font-family: var(--pixel); font-size: 1.15rem; color: var(--b); }
.boost-left { font-size: 0.8rem; font-weight: 700; color: var(--b); }
.boost-opts { display: flex; gap: 8px; }
.boost-opt { position: relative; display: grid; justify-items: center; gap: 4px; width: 128px; padding: 10px 8px 8px; border-radius: 12px; background: #070e1b; border: 1px solid #22355c; }
.boost-opt.best { border-color: var(--b); }
.boost-best { position: absolute; top: -9px; padding: 0 8px; border-radius: 999px; font-size: 0.62rem; font-weight: 800; color: #0b1424; background: var(--b); white-space: nowrap; }
.boost-dur { font-family: var(--pixel); font-size: 0.95rem; }
.boost-opt .vip-buy { font-size: 0.8rem; padding: 5px 6px; }
.boost-bundles h3 { font-family: var(--pixel); font-size: 1.1rem; margin: 8px 0 10px; }
.boost-bundle { border-color: #c08bff; background: linear-gradient(180deg, #2b1a55, var(--card)); }
.boost-bundle-icons { display: flex; gap: 4px; font-size: 1.6rem; }
.strike { text-decoration: line-through; }


html.mobile .boost-row { grid-template-columns: 48px minmax(0, 1fr); }
html.mobile .boost-icon { width: 48px; height: 48px; font-size: 1.5rem; }
html.mobile .boost-opts { grid-column: 1 / -1; }
html.mobile .boost-opt { flex: 1 1 0; width: auto; }
html.mobile .vip-wallet { justify-items: start; }

/* the price in R$ under the diamonds */
.vip-price-box { display: grid; justify-items: center; gap: 1px; }
.vip-brl { font-size: 0.72rem; font-weight: 700; color: #4cc96a; }

/* the buffs in the top bar (systems/buffs.js): EXP, DROP and SHINY always shown; a click opens where
   each comes from */
.hud-boosts { gap: 6px; cursor: pointer; }
.hud-boost { font-family: var(--pixel); font-size: 0.72rem; padding: 1px 6px; border-radius: 6px; background: #0b1424; white-space: nowrap; }
.hud-boost.b-exp { color: #ffd75e; }
.hud-boost.b-drop { color: #4ade80; }
.hud-boost.b-shiny { color: #ff6bb5; }
.hud-boost.b-catch { color: #ff9f43; }
.hud-boost.off { color: var(--muted); opacity: 0.6; }
.hud-boosts.lit { box-shadow: 0 0 10px #ffd75e33; }
.buffs-pop {
  position: fixed; z-index: 60; width: 290px; display: grid; gap: 8px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: #0e1626; box-shadow: 0 12px 30px #000a;
}
.buffs-title { font-family: var(--pixel); color: var(--accent); }
.buffs-row { display: grid; gap: 3px; padding: 6px 8px; border-radius: 8px; background: #0b1424; }
.buffs-head { display: flex; justify-content: space-between; font-family: var(--pixel); font-size: 0.85rem; }
.buffs-cap { margin: 0; color: #ffb35e; }
.buffs-row.b-exp .buffs-head { color: #ffd75e; }
.buffs-row.b-drop .buffs-head { color: #4ade80; }
.buffs-row.b-shiny .buffs-head { color: #ff6bb5; }
.buffs-row.b-catch .buffs-head { color: #ff9f43; }
.buffs-row ul { list-style: none; display: grid; gap: 2px; font-size: 0.8rem; }
.buffs-row li { display: flex; justify-content: space-between; gap: 8px; }
/* the banner over the game screen while a buff runs (systems/buffs.js) */
.buffs-banner {
  /* a flex item of the stage's top row, between the place's name and the buttons: it shrinks and
     wraps into the free room, never over them */
  flex: 0 1 auto; min-width: 0; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 14px; border: 1px solid #ffd75e66; background: #0b1424dd; box-shadow: 0 4px 14px #0008;
  font-family: var(--pixel); font-size: 0.85rem; cursor: pointer;
}
.buffs-banner[hidden] { display: none; }
.buffs-banner.global { border-color: #ff7ad9; box-shadow: 0 0 16px #ff7ad966, 0 4px 14px #0008; }
.buffs-banner-global { color: #ff9be6; font-weight: 700; animation: buffs-glow 2.4s ease-in-out infinite; }
.buffs-banner-global i { color: var(--muted); font-style: normal; }
@keyframes buffs-glow { 50% { text-shadow: 0 0 8px #ff7ad9; } }
.buffs-chip { padding: 2px 9px; border-radius: 999px; background: #070e1b; white-space: nowrap; }
.buffs-chip.b-exp { color: #ffd75e; }
.buffs-chip.b-drop { color: #4ade80; }
.buffs-chip.b-shiny { color: #ff6bb5; }
.buffs-chip.b-catch { color: #ff9f43; }
html.mobile .buffs-banner { font-size: 0.62rem; padding: 3px 6px; gap: 3px; }

/* the boosters' pixel-art icons (buffs.js boostIcon) */
.boost-img { image-rendering: pixelated; vertical-align: -3px; flex: none; }
html.mobile .boost-icon .boost-img { width: 32px !important; height: 32px !important; }