/* The shop page as the game draws it (aeloru_client's client.css mirrors these classes).
   Sizes are the game's CSS pixels at 1080p. */
.shop { --panel: #12162b; --card: #181d36; --card-hi: #1f2545; --line: rgba(255,255,255,.07);
  --text: #e9ecff; --muted: #8d95bd; --faint: #5d6488; --accent: #5ef2c6; --violet: #8b7bff; --gold: #ffd36e;
  display: flex; flex-direction: column; gap: 14px; color: var(--text); font: 600 13px/1.35 Manrope, sans-serif; }
.shop .sb-title { font: 700 22px/1.1 "Chakra Petch", sans-serif; letter-spacing: .2px; }
.shop .sb-text { color: rgba(233,236,255,.78); font-weight: 500; margin-top: 6px; max-width: 420px; }
.shop .sb-h { font: 700 15px/1 "Chakra Petch", sans-serif; margin: 2px 2px 10px; display: flex; align-items: baseline; gap: 8px; }
.shop .sb-h small { color: var(--faint); font: 600 11.5px Manrope, sans-serif; }

/* tones: banner / sale / featured backgrounds */
.tone-aurora   { background: linear-gradient(120deg, #123b3a, #241f5c 70%, #2c1d4f); }
.tone-midnight { background: linear-gradient(120deg, #0d1430, #1b2a63); }
.tone-sakura   { background: linear-gradient(120deg, #3a1630, #6a2950); }
.tone-ember    { background: linear-gradient(120deg, #3b130c, #7a2a12); }
.tone-mono     { background: linear-gradient(120deg, #171a24, #2a2e3d); }
.tone-ocean    { background: linear-gradient(120deg, #0b2a3a, #0f4d63); }

.sb-banner { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.sb-banner.size-s { min-height: 96px; } .sb-banner.size-m { min-height: 136px; } .sb-banner.size-l { min-height: 176px; }
.sb-banner .sb-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,22,.82), rgba(8,10,22,.15) 75%); }
.sb-banner .sb-copy { position: relative; padding: 20px 22px; }
.sb-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 14px; border-radius: 999px;
  background: var(--accent); color: #08111a; font-weight: 800; font-size: 12px; }

.sb-sale { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); }
.sb-sale .sb-pct { font: 700 30px/1 "Chakra Petch", sans-serif; color: var(--gold); min-width: 72px; }
.sb-sale .sb-title { font-size: 17px; }
.sb-sale .sb-text { margin-top: 3px; }
.sb-sale .sb-timer { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.28); color: var(--gold); font-size: 11.5px; white-space: nowrap; }

.sb-grid { display: grid; gap: 10px; }
.sb-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .sb-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sb-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .sb-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.sb-card { position: relative; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.sb-thumb { aspect-ratio: 1; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(94,242,198,.14), rgba(13,17,36,.9) 70%); }
.sb-thumb img { width: 82%; height: 82%; object-fit: contain; image-rendering: pixelated; }
.sb-name { margin-top: 8px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-kind { color: var(--faint); font-size: 11px; font-weight: 600; }
.sb-price { display: flex; align-items: center; gap: 5px; margin-top: 6px; font: 700 13px "Chakra Petch", sans-serif; }
.sb-price s { color: var(--faint); font-weight: 600; font-size: 11px; }
.sb-coin { width: 12px; height: 12px; border-radius: 6px; background: linear-gradient(135deg, #ffe08a, #e0a53a); box-shadow: inset 0 0 0 2px rgba(120,70,0,.35); flex: none; }
.sb-off { margin-left: auto; padding: 2px 6px; border-radius: 6px; background: rgba(255,211,110,.14); color: var(--gold); font-size: 10.5px; }
.sb-owned { color: var(--accent); font: 700 11.5px Manrope, sans-serif; }
.sb-free { color: var(--accent); }

.sb-feat { display: flex; gap: 20px; align-items: center; padding: 16px; border-radius: 14px; border: 1px solid var(--line);
  background-size: cover; background-position: center; }
.sb-feat .sb-thumb { width: 150px; flex: none; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.12), rgba(0,0,0,.25) 70%); }
.sb-feat .sb-price { font-size: 16px; margin-top: 10px; }

.sb-heading { padding: 6px 2px 0; }
.sb-heading .sb-title { font-size: 18px; }
.sb-spacer.size-s { height: 4px; } .sb-spacer.size-m { height: 14px; } .sb-spacer.size-l { height: 28px; }
.sb-empty { padding: 26px; border: 1px dashed rgba(255,255,255,.14); border-radius: 12px; color: var(--faint); text-align: center; font-weight: 600; }

/* tiers: the card takes the tier's colour (admin › Stufen) */
.sb-card.tiered { background: linear-gradient(165deg, color-mix(in srgb, var(--tier) 30%, #181d36), #181d36 72%);
  border-color: color-mix(in srgb, var(--tier) 50%, transparent); }
.sb-card.tiered .sb-thumb { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tier) 34%, transparent), rgba(13,17,36,.9) 72%); }
.sb-thumb { position: relative; }
.sb-tier { display: inline-block; padding: 2px 7px; border-radius: 999px; font: 800 9.5px/1.4 Manrope, sans-serif; letter-spacing: .6px;
  text-transform: uppercase; color: var(--tier); background: color-mix(in srgb, var(--tier) 18%, rgba(0,0,0,.35)); }
.sb-card .sb-tier { position: absolute; left: 6px; top: 6px; }