/* ============================================================
   RESPAWN - dark, blue-hued gaming blog
   Fonts: Inter (body) · JetBrains Mono (sub/meta) · display (logo)
   ============================================================ */

/* NOTE: cross-document View Transition opt-in + slide animations live in an
   inline <style> in the <head> (see templates/base.html) so the opt-in is
   parsed before the render-blocking font stylesheet - required for the
   INCOMING page to reliably join the transition. */

:root {
    /* blue-hued dark palette */
    --bg:          #070b14;
    --bg-2:        #0a1020;
    --surface:     #0e1626;
    --surface-2:   #131e33;
    --line:        rgba(120, 160, 220, 0.10);
    --line-strong: rgba(120, 160, 220, 0.22);

    --text:        #e8eef9;
    --text-dim:    #9aa9c4;
    --text-faint:  #5e6f8f;

    --blue:        #4d9fff;
    --blue-bright: #6db3ff;
    --cyan:        #38bdf8;
    --glow:        rgba(77, 159, 255, 0.35);

    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-display: 'Unbounded', sans-serif; /* logo wordmark */

    --r: 14px;
    --maxw: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ambient blue glow behind everything */
.ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 500px at 75% -5%, rgba(77,159,255,0.16), transparent 60%),
        radial-gradient(700px 600px at 10% 10%, rgba(56,189,248,0.08), transparent 55%),
        linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

a { color: inherit; text-decoration: none; }

/* every heading uses the display font (same as the logo wordmark) */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

/* ---------- Top nav ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px);
    background: rgba(7, 11, 20, 0.72);
    border-bottom: 1px solid var(--line);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}
.logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
    color: var(--text);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.logo .dot { color: var(--blue); }
.nav-links {
    display: flex;
    gap: 30px;
    font-family: var(--font-mono);
    font-size: 0.92rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: var(--blue-bright); }
.nav-cta {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 9px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--text);
    transition: all 0.2s;
}
.nav-cta:hover { border-color: var(--blue); background: rgba(77,159,255,0.08); }

/* subscribe buttons - brand-colored (Twitch purple / YouTube red) */
.nav-subs { display: flex; gap: 9px; }
.nav-sub {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    border-radius: 8px;
    color: #ffffff;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nav-sub svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.nav-sub.tw { background: #9146ff; box-shadow: 0 0 18px -6px rgba(145, 70, 255, 0.8); }
.nav-sub.yt { background: #ff0000; box-shadow: 0 0 18px -6px rgba(255, 0, 0, 0.7); }
.nav-sub:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ---------- Hero carousel ---------- */
.hero { padding: 40px 0 8px; }
.carousel {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 30px 80px -40px rgba(0,0,0,0.9);
}
.track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.65,0,0.35,1);
}
.slide {
    position: relative;
    min-width: 100%;
    height: 420px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
}
/* gradient art backgrounds per slide (fallback when no inline image is set).
   Use background-image (not the shorthand) so the base `cover` sizing survives
   for slides that DO get an inline photo. */
.slide-bg.g1 { background-image: radial-gradient(120% 120% at 80% 20%, #1e3a8a 0%, #0b1530 45%, #05080f 100%); }
.slide-bg.g2 { background-image: radial-gradient(120% 120% at 20% 30%, #0e7490 0%, #0a2540 45%, #05080f 100%); }
.slide-bg.g3 { background-image: radial-gradient(130% 120% at 60% 80%, #3730a3 0%, #122046 50%, #05080f 100%); }
.slide-bg.g4 { background-image: radial-gradient(120% 130% at 90% 60%, #155e75 0%, #0c2036 45%, #05080f 100%); }
.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(5,8,15,0.5) 60%, rgba(5,8,15,0.95) 100%);
}
.slide-content {
    position: relative;
    z-index: 2;
    padding: 40px;
    max-width: 800px;
}
.slide-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 5px;
    margin-bottom: 16px;
    /* background + color come from the .cat-* category classes */
}

/* ---------- Category colour-coding (applied to all badge types) ---------- */
.cat-news    { background: #ffffff; color: #0a0e1a; }
.cat-review  { background: #1fb872; color: #ffffff; }
.cat-feature { background: #f08a2c; color: #ffffff; }
.slide-content h2 {
    font-size: clamp(1.25rem, 2.6vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 12px;
    text-wrap: balance;
}
.slide-content p {
    color: var(--text-dim);
    font-size: 1.02rem;
    max-width: 540px;
}
.slide-meta {
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}

/* Full-height carousel controls. Each side reveals independently on hover. */
.car-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: clamp(64px, 12%, 120px);
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 2.4rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.car-btn:hover,
.car-btn:focus-visible {
    opacity: 1;
    outline: none;
    text-shadow:
        0 0 8px rgba(77,159,255,0.95),
        0 0 20px rgba(77,159,255,0.8),
        0 0 38px rgba(77,159,255,0.65);
}
.car-btn.prev {
    left: 0;
    background: linear-gradient(90deg, rgba(5,8,15,0.72), rgba(5,8,15,0));
}
.car-btn.next {
    right: 0;
    background: linear-gradient(270deg, rgba(5,8,15,0.72), rgba(5,8,15,0));
}
.car-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }

.dots {
    position: absolute;
    bottom: 22px;
    right: 40px;
    z-index: 5;
    display: flex;
    gap: 9px;
}
.dot-btn {
    width: 9px; height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.25);
    cursor: pointer;
    transition: all 0.25s;
}
.dot-btn.active { background: var(--blue); width: 26px; border-radius: 5px; box-shadow: 0 0 12px var(--glow); }

/* ---------- About page ---------- */
.about-hero { padding: 60px 0 6px; }
.about-hero .kicker {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue-bright);
}
.about-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -1px;
    margin: 14px 0 0;
}
.about-intro {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
    padding: 34px 0 46px;
    border-bottom: 1px solid var(--line);
}
.about-avatar {
    width: 240px;
    height: 240px;
    border-radius: 6px;
    border: 1px solid var(--line-strong);
    background:
        radial-gradient(120% 120% at 30% 20%, #1e3a8a, #0b1530 60%),
        var(--surface);
    box-shadow: 0 24px 60px -30px rgba(0,0,0,0.9);
}
.about-intro img.about-avatar { object-fit: cover; }
.about-bio p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #c9d4e6;
    margin-bottom: 16px;
}
.about-bio p.lead { font-size: 1.25rem; color: var(--text); }

.about-block { padding-top: 8px; }
.about-h {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue-bright);
    margin: 48px 0 18px;
}

/* socials - icon tiles, 3 + 2 across two rows */
.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 26px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    color: var(--text);
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.social-link svg {
    width: 34px;
    height: 34px;
    fill: var(--brand, var(--blue));
    filter: drop-shadow(0 0 8px var(--brand, var(--blue)));
}
@media (max-width: 760px) {
    .social-grid { grid-template-columns: repeat(2, 1fr); }
}
.social-link:hover { border-color: var(--brand, var(--blue)); background: rgba(255,255,255,0.04); transform: translateY(-2px); }
.social-link.tw { --brand: #a970ff; }
.social-link.yt { --brand: #ff4d4d; }
.social-link.x  { --brand: #e8eef9; }
.social-link.dc { --brand: #5865f2; }
.social-link.em { --brand: #4d9fff; }

/* video embeds */
.embed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-bottom: 90px;
}
.embed-card { margin: 0; }
.embed-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 760px) {
    .about-intro { grid-template-columns: 1fr; gap: 24px; }
    .about-avatar { width: 140px; height: 140px; }
    .embed-grid { grid-template-columns: 1fr; }
}

/* ---------- Category index pages ---------- */
.cat-header {
    padding: 60px 0 10px;
    margin-bottom: 6px;
}
.cat-header .slide-tag { margin-bottom: 0; }
.cat-header h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -1px;
    margin: 16px 0 6px;
}
.cat-header p {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}
/* empty-category state */
.cat-empty {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--text-dim);
    text-align: center;
    padding: 70px 20px 90px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    margin-top: 20px;
}

/* ---------- Article list ---------- */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 56px 0 8px;
}
.section-head h3 {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue-bright);
}
.section-head .all {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.section-head .all:hover { color: var(--blue); }
.sort-select {
    appearance: none;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 7px 26px 7px 12px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><path d='M0 0l4 5 4-5z' fill='%239aa9c4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s, color 0.2s;
}
.sort-select:hover { border-color: var(--blue); color: var(--text); }

.list { padding-bottom: 80px; }
.article {
    display: grid;
    grid-template-columns: 145px 1fr auto;
    gap: 26px;
    align-items: center;
    padding: 22px 16px;
    border-bottom: 1px solid var(--line);
    border-radius: 10px;
    transition: background 0.2s;
}
.article:hover { background: var(--surface); }
.art-thumb {
    position: relative;
    width: 145px;
    height: 92px;
    border-radius: 9px;
    border: 1px solid var(--line);
}
.art-thumb.t1 { background: radial-gradient(110% 120% at 75% 20%, #1e3a8a, #0b1530); }  /* Deep Blue */
.art-thumb.t2 { background: radial-gradient(110% 120% at 20% 30%, #7c3aed, #1a0b34); }  /* Purple */
.art-thumb.t3 { background: radial-gradient(110% 120% at 60% 80%, #be123c, #2a0a16); }  /* Crimson */
.art-thumb.t4 { background: radial-gradient(110% 120% at 90% 50%, #ea580c, #2a1206); }  /* Orange */
.art-thumb.t5 { background: radial-gradient(110% 120% at 30% 70%, #92400e, #20100a); }  /* Brown */
.art-thumb.t6 { background: radial-gradient(110% 120% at 80% 40%, #15803d, #08210f); }  /* Green */
.art-body .art-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.art-body h4 {
    font-size: 1.22rem;
    font-weight: 500;
    letter-spacing: -0.2px;
    margin-bottom: 5px;
    transition: color 0.2s;
}
.article:hover .art-body h4 { color: var(--blue-bright); }
.art-body p {
    color: var(--text-dim);
    font-size: 0.92rem;
    max-width: 560px;
}
.art-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-faint);
    text-align: right;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.art-meta .read { display: block; margin-top: 4px; color: var(--text-faint); }

/* Score badge inside a listing thumbnail - same tier colours as the review
   page (data-score is coloured by script.js). Shown on category pages. */
.thumb-score {
    display: none;
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--sc, var(--blue-bright));
    background: rgba(7, 11, 20, 0.8);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 4px 9px;
    backdrop-filter: blur(4px);
    text-shadow: 0 0 10px var(--sc-glow, transparent);
}

/* a perfect 10: black text on white, with a rotating rainbow outer glow.
   The badge itself is transparent; the white is a separate layer (::after)
   that sits ABOVE the rainbow glow (::before) so the glow only shows around
   the edges, never over the white. */
.thumb-score.is-perfect {
    color: #000000;
    background: transparent;
    border: none;
    text-shadow: none;
    backdrop-filter: none;
    isolation: isolate;
}
.thumb-score.is-perfect::before {  /* rainbow glow - furthest back */
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -2;
    border-radius: 10px;
    background: conic-gradient(from 0deg,
        #ff5a5f, #ffb03c, #f4d11a, #34d399, #38bdf8, #4d9fff, #a855f7, #ff5a5f);
    filter: blur(5px);
}
.thumb-score.is-perfect::after {  /* solid white pill - above the glow, below the number */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 8px;
    background: #ffffff;
}
@media (prefers-reduced-motion: no-preference) {
    .thumb-score.is-perfect::before { animation: thumbScoreSpin 4s linear infinite; }
}
@keyframes thumbScoreSpin { to { transform: rotate(360deg); } }

/* category index pages: bigger thumbnails + visible score badge */
.catpage .article { grid-template-columns: 180px 1fr auto; }
.catpage .art-thumb { width: 180px; height: 114px; }
.catpage .thumb-score { display: inline-block; font-size: 1.15rem; }

/* ---------- Footer ---------- */
.footer {
    border-top: 1px solid var(--line);
    padding: 36px 0;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.4px;
}

/* ============================================================
   PAGE-TRANSITION TOGGLE (bottom-right, slide on/off)
   ============================================================ */
.vt-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    color: var(--text-dim);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
}
.vt-toggle:hover { opacity: 1; color: var(--text); border-color: var(--blue); }
.vt-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; opacity: 1; }
.vt-toggle-ico { width: 15px; height: 15px; flex: none; color: var(--blue); }
/* dim the icon when the slide is switched off */
.vt-toggle[aria-pressed="true"] .vt-toggle-ico { color: var(--text-faint); }

@media (max-width: 760px) {
    .vt-toggle { right: 12px; bottom: 12px; padding: 7px 10px; font-size: 0.68rem; }
}

/* ============================================================
   ARTICLE PAGE - immersive Review template
   ============================================================ */

/* reading-progress bar (top edge, over nav) */
.progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: rgb(19, 52, 110); /* dark at the top; JS lightens it on scroll */
    box-shadow: 0 0 12px var(--glow);
    z-index: 60;
}

/* immersive hero */
.art-hero {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-top: -68px;        /* slide up under the transparent nav */
    padding-top: 68px;
}
.art-hero-bg {
    position: absolute;
    inset: 0;
    /* default gradient (used by News + as fallback); image articles set
       background-image inline on this layer and it covers the gradient */
    background-color: #0b1530;
    background-image: radial-gradient(120% 120% at 78% 18%, #1e3a8a 0%, #0b1530 45%, #05080f 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.04);
}
.art-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,8,15,0.35) 0%, transparent 30%, rgba(5,8,15,0.6) 65%, var(--bg) 100%);
}
.art-hero-inner {
    position: relative;
    z-index: 2;
    padding-bottom: 46px;
    padding-top: 80px;
}
/* category badge doubles as the link back to its category page */
.art-hero a.slide-tag { transition: filter 0.2s; }
.art-hero a.slide-tag:hover { filter: brightness(1.1); }
.art-hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -1px;
    max-width: 880px;
    margin: 14px 0 14px;
}
.art-deck {
    font-size: 1.12rem;
    color: var(--text-dim);
    max-width: 660px;
    line-height: 1.55;
}
.art-byline {
    margin-top: 24px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-faint);
    letter-spacing: 0.4px;
}
.art-byline .by { color: var(--blue-bright); }
.art-byline .upd { color: var(--cyan); }

/* share button - accented blue→cyan pill under the byline */
.art-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    border: none;
    border-radius: 9px;
    padding: 9px 17px;
    cursor: pointer;
    box-shadow: 0 0 26px -6px var(--glow);
    transition: transform 0.15s, box-shadow 0.2s, filter 0.2s, background 0.2s;
}
.art-share svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.art-share:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 34px -4px var(--glow); }
.art-share:active { transform: translateY(0); }
.art-share.copied { background: linear-gradient(135deg, #34d399, #38bdf8); box-shadow: 0 0 30px -4px rgba(52,211,153,0.5); }

/* two-column layout: body + sticky rail */
.art-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    padding: 50px 28px 90px;
    align-items: start;
}
.art-main { max-width: 720px; }

/* body typography */
.art-main p {
    font-size: 1.07rem;
    line-height: 1.75;
    color: #c9d4e6;
    margin-bottom: 22px;
}
.art-main h1 {
    font-size: 2.15rem;
    font-weight: 600;
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin: 48px 0 16px;
}
.art-main h2 {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.4px;
    margin: 44px 0 16px;
}
.art-main a.inline { color: var(--blue-bright); border-bottom: 1px solid rgba(109,179,255,0.35); }
.art-main strong { color: var(--text); font-weight: 600; }
.kbd {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    padding: 1px 7px;
    color: var(--blue-bright);
}

/* body lists: bullets indented inside the text column (the global reset
   removes the browser's default padding, so without this they hang outside) */
.art-main ul, .art-main ol {
    margin: 0 0 22px;
    padding-left: 30px;
}
.art-main li {
    font-size: 1.07rem;
    line-height: 1.75;
    color: #c9d4e6;
    margin-bottom: 6px;
    padding-left: 4px;
}
.art-main li::marker { color: var(--blue); }

.art-quote {
    margin: 36px 0;
    padding: 6px 0 6px 26px;
    border-left: 3px solid var(--blue);
    font-size: 1.42rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: var(--text);
}
/* rich quotes (paragraphs/bullets inside): citation style, not pull-quote */
.art-quote.is-rich {
    font-size: 1.08rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.7;
    color: #c9d4e6;
}
.art-quote p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0 0 12px;
}
.art-quote ul, .art-quote ol {
    margin: 0 0 12px;
    padding-left: 24px;
}
.art-quote li {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin-bottom: 5px;
}
.art-quote > :last-child { margin-bottom: 0; }

/* responsive 16:9 video embed (YouTube etc.) */
.art-main .yt-embed {
    position: relative;
    margin: 36px 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #000;
}
.art-main .yt-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- block alignment ----------
   The built site wraps an aligned block in <div class="art-align"
   data-align="…">; the editor puts data-align straight on the element.
   Both live inside .art-main, so these rules cover both. */
.art-main [data-align="center"] { text-align: center; }
.art-main [data-align="right"]  { text-align: right; }
/* media (image / video embed) shrinks and pins to a side when aligned */
.art-main .art-figure[data-align], .art-main .ed-raw[data-align],
.art-main [data-align] > .art-figure, .art-main [data-align] > .yt-embed { max-width: 72%; }
.art-main .art-figure[data-align="center"], .art-main .ed-raw[data-align="center"],
.art-main [data-align="center"] > .art-figure, .art-main [data-align="center"] > .yt-embed {
    margin-left: auto; margin-right: auto;
}
.art-main .art-figure[data-align="right"], .art-main .ed-raw[data-align="right"],
.art-main [data-align="right"] > .art-figure, .art-main [data-align="right"] > .yt-embed {
    margin-left: auto; margin-right: 0;
}

.art-figure { margin: 36px 0; }
.art-figure .frame {
    /* sized by the image itself - no fixed height, no crop */
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--bg-2);
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color 0.2s, transform 0.2s;
}
.art-figure .frame img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 72vh;        /* keep very tall shots from taking the page over */
    object-fit: contain;
}
.art-figure .frame:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.art-figure .frame:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Lightbox (full-size image viewer) ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
    background: rgba(4, 7, 14, 0.88);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    cursor: zoom-out;
}
.lightbox.open { opacity: 1; pointer-events: auto; }

/* framed image + caption, styled like the site's surfaces */
.lightbox-figure {
    display: inline-flex;
    flex-direction: column;
    margin: 0;
    max-width: 92vw;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9);
    transform: scale(0.96);
    transition: transform 0.25s ease;
    cursor: default;
}
.lightbox.open .lightbox-figure { transform: scale(1); }
.lightbox-figure img {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;
}
.lightbox-cap {
    padding: 14px 24px 16px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.3px;
    line-height: 1.5;
    color: var(--text-dim);
    text-align: center;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
}
.lightbox-cap[hidden] { display: none; }
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(7, 11, 20, 0.6);
    backdrop-filter: blur(8px);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s;
}
.lightbox-close:hover { background: rgba(77, 159, 255, 0.18); border-color: var(--blue); }
@media (prefers-reduced-motion: reduce) {
    .lightbox, .lightbox-figure { transition: none; }
}
.art-figure figcaption {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-faint);
    margin-top: 10px;
    letter-spacing: 0.3px;
}

/* pros / cons split */
.proscons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 36px 0;
}
.pc-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    padding: 22px;
}
.pc-card h4 {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
}
.pc-card.pros h4 { color: #34d399; }
.pc-card.cons h4 { color: #fb7185; }
.pc-card ul { list-style: none; }
.pc-card li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #c9d4e6;
    line-height: 1.45;
}
.pc-card li::before {
    position: absolute;
    left: 0; top: -1px;
    font-weight: 700;
}
.pc-card.pros li::before { content: "+"; color: #34d399; }
.pc-card.cons li::before { content: "–"; color: #fb7185; }

/* the verdict callout */
.verdict {
    margin: 46px 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: linear-gradient(110deg, var(--sc-soft, rgba(77,159,255,0.10)), var(--surface) 55%);
    padding: 26px 28px;
    display: flex;
    gap: 26px;
    align-items: center;
    /* outer glow tinted by the score tier */
    box-shadow: 0 0 42px -4px var(--sc-glow, var(--glow));
}
.verdict-body .lbl {
    font-family: var(--font-mono);
    font-size: 0.98rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--sc, var(--blue-bright));
}
.verdict-body p { font-size: 1.05rem; color: var(--text); margin: 8px 0 0; line-height: 1.5; }
.verdict-score {
    flex-shrink: 0;
    text-align: center;
    font-family: var(--font-display);
}
.verdict-score .n { font-size: 2.6rem; font-weight: 700; color: var(--sc, var(--blue-bright)); line-height: 1; text-shadow: 0 0 18px var(--sc-glow, transparent); }
.verdict-score .o { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); }

/* game-card rail: static, scrolls with the page (not sticky) */
.art-rail { position: static; }

/* reviews without a game card drop the rail column entirely */
.art-layout.no-rail { grid-template-columns: minmax(0, 1fr); }
.art-layout.no-rail .art-rail { display: none; }

/* combined score + verdict card at the end of a review - carries the
   scorecard's tier-coloured glow treatment ([data-score] via script.js) */
.verdict-card {
    margin: 46px 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    padding: 28px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 42px -4px var(--sc-glow, var(--glow));
}
.verdict-card::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 16% 30%, var(--sc-glow, rgba(77,159,255,0.45)) 0%, transparent 60%);
    filter: blur(38px);
    opacity: 0.6;
    pointer-events: none;
}
.verdict-card > * { position: relative; }
.vc-score {
    flex-shrink: 0;
    width: 160px;
    text-align: center;
}
.vc-score .big {
    font-family: var(--font-display);
    font-size: 3.8rem;
    font-weight: 700;
    color: var(--sc, var(--blue-bright));
    line-height: 1;
    text-shadow: 0 0 22px var(--sc-glow, var(--glow));
}
.vc-score .score-verdict { margin: 10px 0 16px; }
.vc-score .score-bars { margin-bottom: 0; }
.vc-body { flex: 1; min-width: 0; }
.vc-body .lbl {
    font-family: var(--font-mono);
    font-size: 0.98rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--sc, var(--blue-bright));
}
.vc-body p {
    font-size: 1.05rem;
    color: var(--text);
    margin: 8px 0 18px;
    line-height: 1.55;
}
.vc-body .score-meta { padding-top: 10px; }
.score-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    padding: 26px 24px;
    overflow: hidden;
    position: relative;
}
.score-card::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 36%, var(--sc-glow, rgba(77,159,255,0.45)) 0%, transparent 62%);
    filter: blur(38px);
    opacity: 0.7;
    pointer-events: none;
}
.score-top { display: flex; justify-content: center; align-items: baseline; gap: 8px; }
.score-top .big {
    font-family: var(--font-display);
    font-size: 4.6rem;
    font-weight: 700;
    color: var(--sc, var(--blue-bright));
    line-height: 1;
    text-shadow: 0 0 22px var(--sc-glow, var(--glow));
}
.score-top .out { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-faint); }
.score-verdict {
    font-family: var(--font-mono);
    font-size: 0.98rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--sc, #34d399);
    text-align: center;
    margin: 12px 0 18px;
}
.score-bars { display: flex; gap: 5px; margin-bottom: 22px; }
.score-bars span {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.10);
}
.score-bars span.on { background: var(--sc, var(--blue)); box-shadow: 0 0 8px var(--sc-glow, var(--glow)); }
.score-meta { border-top: 1px solid var(--line); padding-top: 16px; }
.score-meta .row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-family: var(--font-mono);
    font-size: 0.86rem;
}
.score-meta .row .k { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; }
.score-meta .row .v { color: var(--text); text-align: right; }

/* ---------- Game info card (IGDB) - lives in the right rail ---------- */
.game-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    padding: 22px;
}
.score-card + .game-card { margin-top: 18px; }
.gc-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue-bright);
}
.gc-igdb {
    font-size: 0.66rem;
    letter-spacing: 1px;
    color: var(--text-faint);
    transition: color 0.2s;
}
.gc-igdb:hover { color: var(--blue-bright); }
.gc-cover {
    aspect-ratio: 264 / 374;          /* IGDB box-art proportions */
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background-size: cover;
    background-position: center;
    margin: 16px 0;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}
.gc-cover.noart {
    background-image: radial-gradient(120% 120% at 70% 20%, #1e3a8a, #0b1530 55%, #05080f);
}
.gc-name {
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.25;
}
.gc-sub {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-faint);
    letter-spacing: 0.4px;
    margin-top: 6px;
}
/* Publisher / Developer / Release rows */
.gc-meta {
    margin-top: 12px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}
.gc-meta .row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-family: var(--font-mono);
    font-size: 0.74rem;
}
.gc-meta .row .k { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; }
.gc-meta .row .v { color: var(--text); text-align: right; }
.gc-desc {
    margin-top: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 6;            /* keep long IGDB summaries tidy */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gc-desc.open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
/* "Read more" toggle - injected by script.js only when the text is clamped */
.gc-more {
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--blue-bright);
    transition: color 0.2s;
}
.gc-more:hover { color: var(--cyan); }
.gc-scores {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.gc-score {
    flex: 1;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 8px 10px;
}
.gc-score .n {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.gc-score .k {
    display: block;
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-faint);
}
.gc-score.crit .n { color: var(--cyan); }
/* the Ultima chip: dark chip with a soft radial tier-coloured glow behind
   the number, like the review scorecard ([data-score] + script.js set --sc).
   A perfect 10 instead fills the chip with a muted rainbow. */
.gc-score.ultima {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.gc-score.ultima::before {     /* radial tier glow, same recipe as .score-card */
    content: "";
    position: absolute;
    inset: -25%;
    z-index: -1;
    background: radial-gradient(circle at 50% 40%, var(--sc-glow, var(--glow)) 0%, transparent 62%);
    filter: blur(16px);
    opacity: 0.75;
    pointer-events: none;
}
.gc-score.ultima .n {
    color: var(--sc, var(--blue-bright));
    text-shadow: 0 0 16px var(--sc-glow, transparent);
}
/* perfect 10: dark chip with a faint spinning rainbow wash - the same
   look (and opacity) as .score-card.is-perfect on review pages */
.gc-score.ultima.is-perfect::before {
    inset: -60%;            /* big enough that the spin never exposes corners */
    background: conic-gradient(from 0deg,
        #ff5a5f, #ffce4d, #34d399, #38bdf8, #4d9fff, #a855f7, #ff5a5f);
    filter: blur(24px);
    opacity: 0.28;
}
.gc-score.ultima.is-perfect .n {
    color: #ffffff;
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.7), 0 0 32px rgba(120, 180, 255, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
    .gc-score.ultima.is-perfect::before { animation: scoreSpin 9s linear infinite; }
}
.gc-review-link {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--blue-bright);
    transition: color 0.2s;
}
.gc-review-link:hover { color: var(--cyan); }

/* news/standard pages: a game card turns the single column into body + rail */
.news-layout.has-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
    max-width: var(--maxw);
}
.news-layout.has-rail .art-main { max-width: 720px; }

/* score tiers: 9 = golden pulse, 10 = white + rainbow glow */
.is-gold .big,
.is-gold .n { animation: goldPulse 2.8s ease-in-out infinite; }
@keyframes goldPulse {
    0%, 100% { text-shadow: 0 0 18px var(--sc-glow); }
    50%      { text-shadow: 0 0 34px var(--sc-glow), 0 0 8px var(--sc-glow); }
}

.is-perfect .big,
.is-perfect .n {
    color: #fff;
    text-shadow: 0 0 16px rgba(255,255,255,0.7), 0 0 32px rgba(120,180,255,0.5);
}
.is-perfect .score-verdict {
    background: linear-gradient(90deg, #ff5a5f, #ffce4d, #34d399, #4d9fff, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.score-card.is-perfect::before {
    inset: -25%;
    width: auto;
    height: auto;
    opacity: 0.28;
    filter: blur(46px);
    background: conic-gradient(from 0deg, #ff5a5f, #ffce4d, #34d399, #38bdf8, #4d9fff, #a855f7, #ff5a5f);
    animation: scoreSpin 9s linear infinite;
}
.verdict.is-perfect,
.verdict-card.is-perfect {
    border-color: rgba(255,255,255,0.25);
    background: linear-gradient(110deg, rgba(255,90,95,0.10), rgba(77,159,255,0.10) 45%, rgba(168,85,247,0.10) 80%, var(--surface));
    /* static layered rainbow glow - fallback for reduced-motion */
    box-shadow: 0 0 34px -8px rgba(255,90,95,0.45),
                0 0 44px -4px rgba(77,159,255,0.40),
                0 0 56px 0 rgba(168,85,247,0.32);
}
.verdict-card.is-perfect::before {
    background: conic-gradient(from 0deg, #ff5a5f, #ffce4d, #34d399, #38bdf8, #4d9fff, #a855f7, #ff5a5f);
    opacity: 0.22;
    filter: blur(46px);
}
@media (prefers-reduced-motion: no-preference) {
    .verdict.is-perfect,
    .verdict-card.is-perfect { animation: verdictRainbow 6s linear infinite; }
    .verdict-card.is-perfect::before { animation: scoreSpin 9s linear infinite; }
}
@keyframes verdictRainbow {
    0%   { box-shadow: 0 0 48px -2px rgba(255, 80, 90, 0.55); }
    14%  { box-shadow: 0 0 48px -2px rgba(255, 170, 60, 0.55); }
    28%  { box-shadow: 0 0 48px -2px rgba(244, 209, 26, 0.55); }
    42%  { box-shadow: 0 0 48px -2px rgba(52, 211, 153, 0.55); }
    57%  { box-shadow: 0 0 48px -2px rgba(56, 189, 248, 0.55); }
    71%  { box-shadow: 0 0 48px -2px rgba(77, 159, 255, 0.55); }
    85%  { box-shadow: 0 0 48px -2px rgba(168, 85, 247, 0.55); }
    100% { box-shadow: 0 0 48px -2px rgba(255, 80, 90, 0.55); }
}
@keyframes scoreSpin { to { transform: rotate(360deg); } }

/* up next / related */
.related-head {
    margin: 70px 0 4px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue-bright);
}
.related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding-bottom: 90px;
}
.rel-card {
    position: relative;
    height: 200px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surface);
    display: flex;
    align-items: flex-end;
    transition: border-color 0.2s, transform 0.2s;
}
.rel-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }

/* image (or gradient) fills the whole card as a dimmed background */
.rel-card .rel-thumb {
    position: absolute;
    inset: 0;
    width: auto;   /* override .art-thumb's fixed 132px so inset fills the card */
    height: auto;
    border: none;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}
.rel-card:hover .rel-thumb { transform: scale(1.05); }
.rel-card .rel-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 11, 20, 0.25) 0%, rgba(7, 11, 20, 0.55) 50%, rgba(7, 11, 20, 0.92) 100%);
}

/* text sits over the image, anchored to the bottom */
.rel-card .rel-body {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 16px 18px 18px;
}
.rel-card .rel-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.rel-card h4 {
    font-size: 1.05rem;
    font-weight: 500;
    margin-top: 8px;
    line-height: 1.3;
    transition: color 0.2s;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}
.rel-card:hover h4 { color: var(--blue-bright); }

/* ============================================================
   NEWS ARTICLE - no rail, gradient (not photo) hero, quick-hits
   ============================================================ */

/* immersive gradient hero (no inline image on .art-hero-bg) */
.art-hero-bg.news {
    background-image:
        radial-gradient(90% 80% at 80% 0%, rgba(56,189,248,0.18), transparent 60%),
        radial-gradient(120% 120% at 22% 28%, #0e7490 0%, #0a2540 45%, #05080f 100%);
}
.art-hero.is-news .art-hero-inner { padding-bottom: 88px; }

/* category + live "breaking" badges, sitting in a row above the headline */
.hero-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.hero-badges .slide-tag { margin-bottom: 0; }

.news-flag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    background: #e0383d;
    padding: 4px 10px;
    border-radius: 5px;
}
.news-flag .pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,0.9);
    animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* single centered column - no scorecard rail */
.news-layout {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 28px 90px;
}
.news-layout .art-main { max-width: 100%; }

/* quick-hits: the signature news module, overlapping the hero base */
.quick-hits {
    position: relative;
    z-index: 3;
    margin: -54px 0 46px;
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--blue);
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    padding: 24px 28px 26px;
    box-shadow: 0 30px 70px -42px rgba(0,0,0,0.95);
}
.quick-hits .qh-label {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue-bright);
}
.quick-hits ul {
    list-style: none;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 44px;
}
.quick-hits li { display: flex; gap: 14px; align-items: flex-start; }
.quick-hits .qh-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--blue);
    color: var(--bg);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.74rem;
    display: grid;
    place-items: center;
    margin-top: 2px;
}
.quick-hits .qh-text { color: var(--text); font-size: 1.02rem; line-height: 1.5; }
.quick-hits .qh-text strong { color: var(--blue-bright); font-weight: 600; }

/* source / updated line at the foot of the story */
.news-source {
    margin-top: 38px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-faint);
    letter-spacing: 0.3px;
}
.news-source a { color: var(--blue-bright); }

.article-tags {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.article-tags-label,
.tag-archive-label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.article-tags > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.article-tag {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(77, 159, 255, 0.35);
    border-radius: 999px;
    background: rgba(77, 159, 255, 0.09);
    color: var(--blue-bright);
    font-family: var(--font-mono);
    font-size: 0.73rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.article-tag:hover {
    border-color: var(--blue-bright);
    background: rgba(77, 159, 255, 0.16);
    transform: translateY(-1px);
}
.tagpage .tag-archive-label { margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .art-layout { grid-template-columns: 1fr; gap: 32px; }
    .art-rail { position: static; order: -1; }
    .news-layout.has-rail { grid-template-columns: 1fr; gap: 32px; max-width: 768px; }
    /* on small screens the game card follows the story instead of leading it */
    .news-layout.has-rail .art-rail { order: 1; }
    .gc-cover { max-width: 230px; }
    .related { grid-template-columns: 1fr; }
    .quick-hits { margin-top: -34px; }
    .quick-hits ul { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .nav-links { display: none; }
    .nav-sub span { display: none; }          /* icon-only subscribe buttons */
    .nav-sub { padding: 9px 11px; }
    .nav-sub svg { width: 17px; height: 17px; }
    .verdict-card { flex-direction: column; gap: 22px; }
    .vc-score { width: 100%; }
    .slide { height: 380px; }
    .slide-content { padding: 26px; }
    .article { grid-template-columns: 1fr; gap: 12px; }
    .art-thumb { width: 100%; height: 150px; }
    .art-meta { text-align: left; }
    .dots { right: 26px; }
    .proscons { grid-template-columns: 1fr; }
    .verdict { flex-direction: column; align-items: flex-start; gap: 16px; }
}
