/* Unified premium archives for app/game/blog content */
.premium-archive {
    --arc-primary: #6d5dfc;
    --arc-primary-dark: #5546e8;
    --arc-accent: #20c997;
    --arc-ink: #15182a;
    --arc-muted: #667085;
    --arc-line: #e7eaf1;
    --arc-bg: #f5f7fb;
    --arc-surface: #fff;
    --arc-shadow: 0 18px 50px rgba(22, 28, 45, .08);
    min-height: 72vh;
    background: var(--arc-bg);
    color: var(--arc-ink);
    padding-bottom: 72px;
}
.premium-archive *, .premium-archive *::before, .premium-archive *::after { box-sizing: border-box; }
.archive-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.archive-hero {
    position: relative;
    overflow: hidden;
    padding: 32px 0 30px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 10%, rgba(109,93,252,.46), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(32,201,151,.18), transparent 30%),
        linear-gradient(135deg,#15172b,#28204d);
}
.archive-hero::after { content:""; position:absolute; inset:auto -10% -180px; height:280px; border-radius:50% 50% 0 0/20% 20% 0 0; background:rgba(255,255,255,.035); pointer-events:none; }
.archive-breadcrumbs { position:relative; z-index:1; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:22px; color:rgba(255,255,255,.6); font-size:12px; }
.archive-breadcrumbs a { color:rgba(255,255,255,.82); text-decoration:none; }
.archive-breadcrumbs a:hover { color:#fff; }
.archive-breadcrumbs span[aria-hidden] { opacity:.35; }
.archive-hero__content { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:28px; align-items:center; }
.archive-kicker { display:block; margin-bottom:7px; color:#9f95ff; font-size:12px; font-weight:900; }
.archive-hero h1 { margin:0 0 10px; color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.35; }
.archive-hero__content p { max-width:760px; margin:0; color:rgba(255,255,255,.7); font-size:14px; line-height:2; }
.archive-hero__stat { width:130px; height:110px; display:grid; place-content:center; text-align:center; border-radius:22px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px); }
.archive-hero__stat strong { display:block; color:#fff; font-size:30px; line-height:1; }
.archive-hero__stat span { display:block; margin-top:7px; color:rgba(255,255,255,.58); font-size:11px; }
.archive-filters { position:relative; z-index:1; display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.archive-filters a { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 11px; border-radius:999px; color:rgba(255,255,255,.76); background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); text-decoration:none; font-size:11px; font-weight:800; }
.archive-filters a:hover, .archive-filters a.is-active { color:#071d16; background:var(--arc-accent); border-color:var(--arc-accent); }
.archive-filters small { min-width:20px; height:20px; display:grid; place-items:center; padding:0 5px; border-radius:999px; background:rgba(0,0,0,.12); font-size:9px; }
.archive-body { padding-top:34px; }
.archive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.archive-card { min-width:0; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--arc-line); border-radius:22px; background:#fff; box-shadow:0 7px 26px rgba(19,25,45,.045); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.archive-card:hover { transform:translateY(-4px); box-shadow:var(--arc-shadow); border-color:#d9d5ff; }
.archive-card__media { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#ecebfd,#e8f7f1); text-decoration:none; }
.archive-card--app .archive-card__media { aspect-ratio: 1.45/1; }
.archive-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.archive-card:hover .archive-card__media img { transform:scale(1.025); }
.archive-card__placeholder { width:100%; height:100%; display:grid; place-items:center; color:#6d5dfc; font-size:52px; background:linear-gradient(135deg,#eeedff,#e9faf4); }
.archive-card__badge { position:absolute; right:12px; bottom:12px; max-width:calc(100% - 24px); padding:6px 10px; border-radius:999px; color:#fff; background:rgba(20,22,40,.82); backdrop-filter:blur(8px); font-size:10px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.archive-card__body { flex:1; display:flex; flex-direction:column; padding:18px; }
.archive-card__meta { min-height:24px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:7px; color:var(--arc-muted); font-size:10px; }
.archive-card__rating { display:inline-flex; align-items:center; gap:4px; color:#5f4f00; padding:4px 7px; border-radius:999px; background:#fff7d7; font-weight:800; }
.archive-card__rating b { color:#e8b100; }
.archive-card h2 { margin:0 0 10px; color:var(--arc-ink); font-size:18px; line-height:1.75; }
.archive-card h2 a { color:inherit; text-decoration:none; }
.archive-card h2 a:hover { color:var(--arc-primary-dark); }
.archive-card p { margin:0 0 15px; color:#5f6679; font-size:12px; line-height:1.95; }
.archive-card__stats { display:flex; gap:8px; flex-wrap:wrap; margin:auto 0 14px; }
.archive-card__stats > div { flex:1 1 90px; min-width:0; padding:9px 10px; border-radius:11px; background:#f8f9fc; border:1px solid #eef0f5; }
.archive-card__stats dt { color:var(--arc-muted); font-size:9px; }
.archive-card__stats dd { margin:2px 0 0; color:var(--arc-ink); font-size:11px; font-weight:900; overflow-wrap:anywhere; }
.archive-card__cta { margin-top:auto; min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; color:var(--arc-primary-dark); background:#f5f4ff; border:1px solid #e7e4ff; text-decoration:none; font-size:12px; font-weight:900; }
.archive-card__cta:hover { color:#fff; background:var(--arc-primary); border-color:var(--arc-primary); }
.archive-card--app .archive-card__cta { color:#087255; background:#edfaf5; border-color:#d9f2e8; }
.archive-card--app .archive-card__cta:hover { color:#071d16; background:var(--arc-accent); border-color:var(--arc-accent); }
.archive-pagination { margin-top:34px; }
.archive-pagination .nav-links { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; }
.archive-pagination .page-numbers { min-width:40px; min-height:40px; display:grid; place-items:center; padding:7px 12px; border-radius:11px; color:#4d5366; background:#fff; border:1px solid var(--arc-line); text-decoration:none; font-size:12px; font-weight:800; }
.archive-pagination .page-numbers.current, .archive-pagination a.page-numbers:hover { color:#fff; background:var(--arc-primary); border-color:var(--arc-primary); }
.archive-empty { max-width:680px; margin:0 auto; padding:54px 30px; text-align:center; border-radius:22px; background:#fff; border:1px solid var(--arc-line); box-shadow:0 8px 28px rgba(19,25,45,.05); }
.archive-empty > span { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 15px; border-radius:50%; color:var(--arc-primary); background:#f3f2ff; font-size:28px; }
.archive-empty h2 { margin:0 0 8px; color:var(--arc-ink); font-size:23px; }
.archive-empty p { margin:0 0 20px; color:var(--arc-muted); font-size:13px; line-height:1.9; }
.archive-empty a { display:inline-flex; min-height:42px; align-items:center; justify-content:center; padding:9px 16px; border-radius:11px; color:#fff; background:var(--arc-primary); text-decoration:none; font-size:12px; font-weight:900; }

@media (max-width: 960px) {
    .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
    .archive-shell { width:calc(100% - 24px); }
    .archive-hero { padding-top:20px; }
    .archive-hero__content { grid-template-columns:1fr; gap:18px; }
    .archive-hero__stat { width:100%; height:auto; display:flex; align-items:baseline; justify-content:flex-start; gap:8px; padding:13px 15px; border-radius:15px; }
    .archive-hero__stat strong { font-size:22px; }
    .archive-hero__stat span { margin:0; }
    .archive-hero h1 { font-size:29px; }
    .archive-hero__content p { font-size:13px; line-height:1.9; }
    .archive-filters { overflow-x:auto; flex-wrap:nowrap; margin-left:-12px; margin-right:-12px; padding:0 12px 4px; scrollbar-width:none; }
    .archive-filters::-webkit-scrollbar { display:none; }
    .archive-filters a { flex:0 0 auto; }
    .archive-body { padding-top:22px; }
    .archive-grid { grid-template-columns:1fr; gap:14px; }
    .archive-card { display:grid; grid-template-columns:110px minmax(0,1fr); border-radius:17px; }
    .archive-card__media, .archive-card--app .archive-card__media { height:100%; min-height:160px; aspect-ratio:auto; }
    .archive-card__badge { right:7px; bottom:7px; padding:4px 7px; font-size:9px; }
    .archive-card__body { padding:14px; }
    .archive-card h2 { font-size:15px; line-height:1.7; margin-bottom:7px; }
    .archive-card p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:10px; font-size:11px; line-height:1.85; }
    .archive-card__stats { display:none; }
    .archive-card__cta { min-height:36px; padding:7px 10px; font-size:10px; }
}
@media (max-width: 430px) {
    .archive-card { grid-template-columns:92px minmax(0,1fr); }
    .archive-card__media, .archive-card--app .archive-card__media { min-height:150px; }
    .archive-card__meta { gap:6px; margin-bottom:5px; }
    .archive-card__meta > span:not(.archive-card__rating) { display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .premium-archive * { transition:none !important; }
}