/* Anti Radio Stories v1.9.0 — grid cards + fullscreen viewer */

.arstories {
    --arstories-pink: #ff2e88;
    --arstories-cols: 8;
    --arstories-gap: 10px;
    font-family: 'Courier New', Courier, monospace;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Header */
.arstories-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.arstories-head-title {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .6;
}
.arstories-head-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--arstories-pink);
    border: 1px solid var(--arstories-pink);
    padding: 3px 8px;
}

/* Country filter (right side of header) */
.arstories-head { gap: 12px; }
.arstories-head-title { flex: 1 1 auto; min-width: 0; }
.arstories-filter {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    flex: 0 0 auto;
    white-space: nowrap;
}
.arstories-filter-label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--arstories-pink);
    font-weight: 700;
}
.arstories-filter .arstories-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 190px;
    max-width: 260px;
    height: 34px !important;
    padding: 0 34px 0 12px !important;
    margin: 0 !important;
    border: 2px solid var(--arstories-pink) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23ff2e88' stroke-width='2'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    color: var(--arstories-pink) !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 30px !important;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
    vertical-align: middle;
}
.arstories-filter .arstories-select:hover { background-color: rgba(255,46,136,.08) !important; }
.arstories-filter .arstories-select:focus { box-shadow: 0 0 0 3px rgba(255,46,136,.3) !important; }
.arstories-filter .arstories-select option,
.arstories-filter .arstories-select optgroup {
    background: #fff;
    color: #111;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 13px;
    padding: 6px 10px;
}
.arstories-filter .arstories-select optgroup { color: var(--arstories-pink); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; }
.arstories-filter .arstories-select option:checked { background: var(--arstories-pink); color: #000; }
body.site-dark .arstories-filter .arstories-select option,
body.site-dark .arstories-filter .arstories-select optgroup { background: #111; color: #eee; }
@media (max-width: 520px) {
    .arstories-head { flex-wrap: wrap; }
    .arstories-filter-label { display: none; }
    .arstories-filter .arstories-select { min-width: 150px; }
}
.arstories-body { position: relative; min-height: 120px; }
.arstories-body.loading { opacity: .4; pointer-events: none; }
.arstories-empty {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    letter-spacing: .08em;
    opacity: .6;
    padding: 24px 0;
}

/* Grid */
.arstories-grid {
    display: grid;
    grid-template-columns: repeat(var(--arstories-cols), minmax(0, 1fr));
    gap: var(--arstories-gap);
}
@media (max-width: 1024px) { .arstories-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 768px)  { .arstories-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 520px)  { .arstories-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; } }

/* Card — sizing forced against theme overrides */
.arstories-grid .arstories-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 0 160% 0 !important;   /* 10:16 story ratio */
    margin: 0 !important;
    border: 2px solid var(--arstories-pink) !important;
    border-radius: 0 !important;
    background: #111 !important;
    box-shadow: none;
    overflow: hidden !important;
    cursor: pointer;
    color: #fff !important;
    font-family: inherit !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.arstories-grid .arstories-card:hover,
.arstories-grid .arstories-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(255,46,136,.35);
    outline: none;
}
.arstories-card-art {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    display: block;
    background-color: #222;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform .3s ease;
}
.arstories-grid .arstories-card:hover .arstories-card-art { transform: scale(1.06); }
.arstories-card.no-art .arstories-card-art {
    background-image: linear-gradient(160deg, #2a1020, #0d0d0d);
}
.arstories-grid .arstories-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,0) 70%);
    pointer-events: none;
}
.arstories-card-rank {
    position: absolute !important;
    top: 0; left: 0;
    z-index: 2;
    display: block;
    background: var(--arstories-pink);
    color: #000 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 5px 7px !important;
    margin: 0 !important;
}
.arstories-card-text {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 8px !important;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
.arstories-card-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #fff !important;
    margin: 0 !important;
}
.arstories-card-artist {
    display: block !important;
    font-size: 9px !important;
    color: rgba(255,255,255,.65) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
}

/* Trend badges */
.arstories-card-trend {
    position: absolute !important;
    top: 0; right: 0;
    z-index: 2;
    display: block;
    padding: 5px 6px !important;
    margin: 0 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .06em;
    background: rgba(0,0,0,.75);
    color: #fff !important;
}
.arstories-card-trend.is-up,   .arstories-slide-trend.is-up   { color: #37e08a !important; }
.arstories-card-trend.is-down, .arstories-slide-trend.is-down { color: #ff5c5c !important; }
.arstories-card-trend.is-new,  .arstories-slide-trend.is-new  { background: var(--arstories-pink); color: #000 !important; }
.arstories-card-trend.is-same, .arstories-slide-trend.is-same { color: rgba(255,255,255,.45) !important; }
.arstories-slide-trend {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 6px;
    font-size: 10px;
    letter-spacing: .06em;
    background: rgba(0,0,0,.5);
    vertical-align: middle;
}

/* ---------------------------------------------------- Fullscreen viewer */
.arstories-viewer[hidden] { display: none !important; }
.arstories-viewer {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
}
.arstories-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.92);
}
.arstories-viewer-box {
    position: relative;
    width: min(420px, 100vw);
    height: min(760px, 100vh);
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    box-sizing: border-box;
}
.arstories-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 30;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(0,0,0,.4);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.arstories-close:hover { border-color: var(--arstories-pink, #ff2e88); color: var(--arstories-pink, #ff2e88); }
.arstories-mute {
    position: absolute;
    top: 14px;
    right: 58px;
    z-index: 30;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(0,0,0,.4);
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.arstories-mute .ic-off { display: none; }
.arstories-mute[aria-pressed="true"] .ic-on  { display: none; }
.arstories-mute[aria-pressed="true"] .ic-off { display: block; }
.arstories-mute:hover { border-color: #ff2e88; color: #ff2e88; }
.arstories-progress { padding-right: 92px; }

.arstories-progress {
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
    padding-right: 48px;
}
.arstories-progress-bar {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,.2);
    overflow: hidden;
    display: block;
}
.arstories-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: #ff2e88;
}
.arstories-progress-bar.done .arstories-progress-fill { width: 100%; }
.arstories-progress-bar.active .arstories-progress-fill {
    animation: arstories-fill linear forwards;
}
@keyframes arstories-fill { from { width: 0% } to { width: 100% } }

.arstories-stage {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #000;
    border: 2px solid #ff2e88;
}
.arstories-tap {
    position: absolute; top: 0; height: 100%; width: 35%; z-index: 20; cursor: pointer;
}
.arstories-tap-prev { left: 0 }
.arstories-tap-next { right: 0 }

.arstories-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.arstories-slide.active { opacity: 1; pointer-events: auto; }

.arstories-slide-bg {
    position: absolute;
    inset: 0;
    background: #111 center / cover no-repeat;
    filter: blur(28px) brightness(.4) saturate(1.3);
    transform: scale(1.15);
}
.arstories-slide-art {
    position: absolute;
    top: 8%;
    left: 50%;
    width: 68%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: #222 center / cover no-repeat;
    border: 2px solid #ff2e88;
    box-shadow: 0 20px 50px rgba(0,0,0,.7);
}
.arstories-slide-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 24px 22px 26px;
    background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0));
    z-index: 10;
    color: #fff;
}
.arstories-slide-rank {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #ff2e88; margin-bottom: 8px;
}
.arstories-slide-rank > span { display: inline-flex; align-items: center; }
.arstories-slide-title {
    font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.arstories-slide-artist {
    font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 14px;
}
.arstories-slide-logo {
    display: block !important;
    height: 16px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: .7;
}
.arstories-slide-artist { margin-bottom: 18px; }

.arstories-slide-body { z-index: 30; pointer-events: none; }
.arstories-slide-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    pointer-events: auto;
}
.arstories-slide-actions .arstories-btn,
.arstories-slide-actions a.arstories-btn,
.arstories-slide-actions button.arstories-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 2px solid #ff2e88 !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,.55) !important;
    color: #fff !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.arstories-slide-actions .arstories-btn:hover { background: #ff2e88 !important; color: #000 !important; }
.arstories-btn svg { flex: 0 0 auto; width: 14px; height: 14px; }
.arstories-btn-share { cursor: pointer; }
.arstories-btn-dl[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* Share menu */
.arstories-share-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    pointer-events: auto;
}
.arstories-share-menu[hidden] { display: none !important; }
.arstories-share-item {
    display: inline-block !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,.6) !important;
    color: #fff !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1 !important;
    cursor: pointer;
}
.arstories-share-item:hover { border-color: #ff2e88 !important; color: #ff2e88 !important; }
.arstories-share-item.copied { border-color: #37e08a !important; color: #37e08a !important; }
body.arstories-lock { overflow: hidden; }