/* ---------- Home — phone layout: Live Market Pulse (design "Market Pulse Mobile") ----------
 * Markup: components/home/mobile/pulse-m.php · Script: home-mobile-pulse-bars.js. Shared .hm primitives live in
 * home-mobile.css; white mode in home-mobile-light.css. (The .mp--dashboard sheet styles the desktop section only.)
 */
@media (max-width: 767px) {
    .hmp { display: flex; flex-direction: column; padding: 20px 20px 24px; }
    .hmp .hm__glow { top: -220px; }
    .hmp__coin {
        position: absolute; top: 22px; inset-inline-end: -34px; width: 132px; height: auto; opacity: .9;
        pointer-events: none; user-select: none; rotate: -8deg; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.75));
        animation: hmFloatA 6s ease-in-out infinite;
    }
    html[dir="rtl"] .hmp__coin { rotate: 8deg; }
    .hmp__head { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
    .hmp__live {
        display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(10, 10, 12, 0.7);
        font-family: var(--hm-display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
    }
    .hmp__dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
    .hmp__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; animation: hmPulse 1.8s ease-out infinite; }
    .hmp__title { margin: 18px 0 0; padding-inline-end: 90px; font-family: var(--hm-display); font-size: 34px; line-height: 1.05; letter-spacing: -0.05em; font-weight: 700; color: #fff; }
    .hmp__title span { font-weight: 500; color: rgba(255, 255, 255, 0.5); }
    html[dir="rtl"] .hmp__title { letter-spacing: 0; line-height: 1.25; }
    .hmp__intro { margin: 16px 0 0; padding-inline-end: 84px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.58); text-wrap: pretty; }

    /* Volume card */
    .hmp__card { position: relative; margin-top: 14px; }
    .hmp__panel { padding: 20px 18px 16px; }
    .hmp__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .hmp__label { font-family: var(--hm-display); font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
    .hmp__chg {
        display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
        background: linear-gradient(180deg, #ffffff 0%, #d6d6dc 100%); color: #0a0a0a; font-family: var(--hm-display); font-size: 11.5px; font-weight: 600;
    }
    .hmp__chg i { font-size: 10px; }
    .hmp__vol {
        display: block; margin-top: 10px; font-family: var(--hm-display); font-size: 46px; font-weight: 300;
        line-height: 1; letter-spacing: -0.05em; color: #fff; font-variant-numeric: tabular-nums; text-align: start;
    }

    .hmp__chart { position: relative; height: 100px; margin-top: 26px; }
    .hmp__grid { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255, 255, 255, 0.07); }
    .hmp__grid--1 { top: 20%; }
    .hmp__grid--2 { top: 55%; }
    .hmp__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 5px; touch-action: pan-y; }
    /* Full-height tap column per bar, so short bars stay easy to hit. */
    .hmp__col {
        position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end;
        margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
        -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
    }
    .hmp__col:focus { outline: none; }
    .hmp__col:focus-visible .hmp__bar { outline: 2px solid currentColor; outline-offset: 2px; }
    .hmp__bar {
        position: relative; flex: 1; height: var(--h); min-width: 0; border-radius: 999px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 100%);
        transform-origin: bottom; transform: scaleY(0.02);
        transition: transform .9s var(--hm-ease) calc(var(--i) * 45ms), background .3s ease, box-shadow .3s ease;
    }
    .hmp__bar.is-now {
        background: linear-gradient(180deg, #fff 0%, #d4d4d8 100%);
        box-shadow: 0 0 22px rgba(255, 255, 255, 0.45), 0 0 4px rgba(255, 255, 255, 0.8);
    }
    .hmp.is-in .hmp__bar { transform: none; }
    /* Tip above the picked bar: the amount, then the slice range or "latest", muted. */
    .hmp__tip {
        position: absolute; bottom: calc(var(--h) + 10px); z-index: 1; display: inline-flex; align-items: baseline; gap: 6px;
        padding: 6px 10px; border-radius: 999px; white-space: nowrap; background: #fff; color: #0a0a0a;
        font-family: var(--hm-display); font-size: 11.5px; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
        pointer-events: none; opacity: 0; transform: translateY(4px);
        transition: opacity .4s ease, transform .4s var(--hm-ease); transition-delay: 1s;
    }
    .hmp__tip b { font-weight: 600; }
    .hmp__tip span { font-weight: 500; color: rgba(10, 10, 10, 0.5); }
    .hmp__tip--s { left: -2px; }
    .hmp__tip--c { left: 50%; translate: -50% 0; }
    .hmp__tip--e { right: -2px; }
    .hmp.is-in .hmp__bar.is-now + .hmp__tip { opacity: 1; transform: none; }
    .hmp.is-picked .hmp__tip { transition-delay: 0s; transition-duration: .18s; }
    /* Same left-to-right order as the bars above it (the chart is dir="ltr" in every language). */
    .hmp__axis { direction: ltr; display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--hm-display); font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.38); }

    /* Handles sold — links to the reviews */
    .hmp__sold {
        position: relative; margin-top: 8px; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, #121214 0%, #0b0b0d 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .hmp__sold:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .hmp__sold-top { display: flex; align-items: center; gap: 16px; padding: 14px 16px 12px; padding-inline-start: 18px; }
    .hmp__sold-n {
        /* proportional figures: DM Sans' tabular "1" has a foot */
        flex-shrink: 0; font-family: 'DM Sans', var(--hm-display); font-size: 54px; font-weight: 300; line-height: .9; letter-spacing: -0.06em;
        font-variant-numeric: proportional-nums; background: linear-gradient(180deg, #fff 0%, #d9d9de 45%, #6e6e75 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hmp__sold-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    .hmp__sold-t { font-family: var(--hm-display); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
    html[dir="rtl"] .hmp__sold-t { letter-spacing: 0; }
    .hmp__sold-pl { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .hmp__pls { display: flex; flex-shrink: 0; direction: ltr; }
    .hmp__pl {
        width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: linear-gradient(180deg, #26262a 0%, #121214 100%); box-shadow: 0 0 0 2px #101012; color: rgba(255, 255, 255, 0.85); font-size: 10px;
    }
    .hmp__pl + .hmp__pl { margin-left: -6px; }
    .hmp__sold-all { font-family: var(--hm-display); font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hmp__sold-cta { display: flex; align-items: center; gap: 10px; padding: 11px 16px 12px; padding-inline-start: 18px; border-top: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); transition: background .2s ease; }
    .hmp__stars { display: flex; gap: 2px; font-size: 9px; color: #fff; }
    .hmp__sold-go { flex: 1; font-family: var(--hm-display); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
    .hmp__chev { font-size: 10px; color: rgba(255, 255, 255, 0.45); transition: translate .2s ease; }
    html[dir="rtl"] .hmp__chev { transform: scaleX(-1); }
    .hmp__sold:active .hmp__sold-cta { background: rgba(255, 255, 255, 0.05); }
    .hmp__sold:active .hmp__chev { translate: 2px 0; }
    html[dir="rtl"] .hmp__sold:active .hmp__chev { translate: -2px 0; }
}
@media (max-width: 380px) {
    .hmp__title { font-size: 30px; }
    .hmp__coin { width: 112px; inset-inline-end: -30px; }
    .hmp__bars { gap: 4px; }
    .hmp__sold-n { font-size: 46px; }
}
@media (max-width: 340px) {
    .hmp__pl:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hmp__coin, .hmp__dot::after { animation: none !important; }
    .hmp__bar, .hmp__tip, .hmp__chev, .hmp__sold-cta { transition: none !important; }
    .hmp__bar { transform: none; }
    .hmp__bar.is-now + .hmp__tip { opacity: 1; transform: none; }
}