/* =========================================================================
 * Player comms: display currency, deal feed, live counters, email switch.
 * Loaded by DisplayCurrency::assets() (the currency picker, deal feed and
 * live-stats partials), never by merchant or admin pages.
 *
 *   .cur-pick .cur-pick--hero .cur-pick__label .cur-pick__select   "Show prices in" (js/currency.js)
 *   .approx                                                          "≈ €12.30" next to a USD figure
 *   .deals .deals__list .deal .deal__art .deal__text .deal__name …   "Just sold / just bought"
 *   .lstats .lstats--hero .lstats--plain .lstats__list .lstats__item live counters
 *   .lstats-band                                                     /merchants band
 *   .wl-notify .wl-emails                                            wallet email switch, email settings page
 * ========================================================================= */

/* -- Display currency ------------------------------------------------------ */
.cur-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cur-pick[hidden] { display: none; }
.cur-pick__select {
    appearance: none; -webkit-appearance: none;
    font: inherit; font-weight: 600; color: var(--fg);
    background: color-mix(in srgb, var(--panel-2) 80%, transparent);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 6px 30px 6px 12px; min-height: 34px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
    cursor: pointer;
}
.cur-pick__select:hover { border-color: var(--line-2); }
.cur-pick__select:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.cur-pick--hero { margin-top: 4px; }
.mp-hero__player { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.wl-hero__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }

.approx { display: block; font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.approx[hidden] { display: none; }
.mk-card__price .approx, .mk-offer__price .approx { margin-top: 1px; }
.mk-card__price { display: flex; flex-direction: column; }
.mk-offer__price { display: flex; flex-direction: column; }
.tile__approx { padding: 0 12px 10px; margin-top: -4px; text-align: right; }
.wl-balance__approx { font-size: 15px; margin-top: 4px; }
.co-summary__approx { margin-top: 2px; }
.sell-facts__total .approx, .mp-panel__facts .approx, .mk-hero__price .approx, .mp-game__meta .approx { display: inline; margin-left: 4px; }
.mk-panel__pick .approx { display: block; }

/* -- Deal feed --------------------------------------------------------------- */
.deals .section-head .dot { display: inline-block; vertical-align: middle; margin-right: 2px; }
.deals[hidden] { display: none; }
.deals__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .deals__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .deals__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.deal {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center;
    padding: 10px 12px; border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--panel) 86%, transparent); border: 1px solid var(--line);
}
.deal__art { width: 72px; height: 54px; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--violet) 18%, transparent), transparent 70%); }
.deal__art img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.deal__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deal__name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; }
.deal__meta .approx { display: inline; }
.deal--sold .deal__kind { color: var(--mint); }
.deal--bought .deal__kind { color: var(--info); }
.deal__time { font-size: 12px; color: var(--faint); }

/* -- Live counters ------------------------------------------------------------ */
.lstats { display: flex; flex-direction: column; gap: 10px; }
.lstats__kicker { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lstats__list { margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .lstats__list { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.lstats__item { display: flex; flex-direction: column-reverse; gap: 2px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 80%, transparent); min-width: 0; }
.lstats__item dt { font-size: 13px; color: var(--muted); }
.lstats__item dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lstats--hero { margin-top: 22px; max-width: 640px; }
.lstats--hero .lstats__item { background: color-mix(in srgb, var(--panel) 55%, transparent); backdrop-filter: blur(6px); }
.lstats--plain .lstats__item { background: transparent; }
.lstats-band { padding-bottom: 0; }

/* -- Wallet email switch ----------------------------------------------------- */
.wl-notify { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wl-notify__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.wl-emails { max-width: 560px; margin: 48px auto; }
@media (min-width: 1081px) { .wl-emails { margin-top: 120px; } }