/* classic.css: Classic interface (body.interface-classic, .classic-*). */
/* ============================================================
   Classic interface (body.interface-classic)
   A classic pet-site shell: a framed fixed-width page on a tiled backdrop, a
   scenic banner carrying the brand, the header's bell and account menu floating
   on the banner, the primary nav as a sticky dropdown menubar, and a "Captain's
   desk" column down the left (templates/partials/_classic_panel.html).

   Colour is never Classic's own: every value below is a Legacy palette token,
   so all ten palettes (light, high-contrast and colorblind-safe included) come
   along unchanged. The only literals are the banner's photo scrim and the white
   type sitting on it, which answer to the artwork, not the palette.

   Structure is desktop-only (1024px+). Below that line Classic keeps the house
   responsive contract untouched: the bottom tab bar, the drawer, the sticky
   header with its wallet button. It only adds a short banner above the header.
   One contiguous block, appended last, same convention as .ib2-* / .sq2-*.
   ============================================================ */
.classic-backdrop { display: none; }
body.interface-classic .classic-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--bg-body);
    /* Two offset dot lattices read as a quiet starfield wallpaper in every palette.
       A drop-in tile (img/classic/page-tile.webp) goes on top of them when present. */
    background-image:
        var(--classic-tile, none),
        radial-gradient(color-mix(in srgb, var(--color-primary) 22%, transparent) 1px, transparent 1.7px),
        radial-gradient(color-mix(in srgb, var(--color-violet) 26%, transparent) 1.3px, transparent 2px),
        var(--vignette);
    background-size: auto, 26px 26px, 52px 52px, auto;
    background-position: 0 0, 0 0, 13px 13px, 0 0;
}
body.interface-classic.theme-high-contrast .classic-backdrop { background-image: var(--classic-tile, none); }

body.interface-classic .classic-frame {
    position: relative;
    isolation: isolate;
    max-width: 1320px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-body);
}
body.interface-classic .classic-frame > .site-body { flex: 1 0 auto; }

/* ---- Banner ---- */
body.interface-classic .classic-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 92px;
    padding: 14px 16px;
    /* Left-heavy scrim: the brand sits on the dark side, so white type clears
       4.5:1 over any artwork, light palette or not. The fade to --bg-body at the
       foot lets the banner sink into the page instead of ending on a hard edge. */
    background-image:
        linear-gradient(90deg, rgb(8 4 16 / 78%) 0%, rgb(8 4 16 / 46%) 42%, rgb(8 4 16 / 8%) 78%),
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg-body) 70%, transparent) 100%),
        var(--classic-banner-art, none);
    background-color: var(--bg-cool);
    background-size: cover;
    background-position: center var(--classic-banner-y, 62%);
}
body.interface-classic .classic-banner__brand {
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.45rem, 1.1rem + 1.8vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 0 rgb(0 0 0 / 45%), 0 0 18px rgb(0 0 0 / 55%);
}
body.interface-classic .classic-banner__brand span { color: color-mix(in srgb, var(--color-primary) 45%, #fff); }
body.interface-classic .classic-banner__brand:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: var(--radius-sm); }
body.interface-classic .classic-banner__brand--logo img { display: block; width: auto; height: clamp(48px, 7vw, 100px); }
body.interface-classic .classic-banner__motto {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #f1ecfa;
    text-shadow: 0 1px 2px rgb(0 0 0 / 70%);
}
@media (hover: hover) {
    body.interface-classic .classic-banner__brand:hover { text-decoration: none; filter: brightness(1.08); }
}

/* Each Legacy palette gets its own banner scene, picked for mood and colour and from
   the 1000px+ backdrops where one fits, so the banner stays sharp at 1180px wide.
   Set in CSS rather than the template so switching palette on the Settings page (which
   swaps the body class live) swaps the banner too. A Captain's own profile Vista is
   written as an inline --classic-banner-art on the element and beats all of these.
   High Contrast deliberately gets no art: a flat banner is the most legible one. */
body.interface-classic .classic-banner { --classic-banner-art: url("../vistas/magical_archive.ffbb665e9d39.webp"); }
body.interface-classic.theme-daylight .classic-banner { --classic-banner-art: url("../vistas/magical_archive_rose.41c69cd48b3d.webp"); }
body.interface-classic.theme-aurora .classic-banner { --classic-banner-art: url("../apparel/background/mountain_lake.19ec7a2c33ff.webp"); --classic-banner-y: 45%; }
body.interface-classic.theme-comet .classic-banner { --classic-banner-art: url("../apparel/background/autumn_path.074b458ebb9f.webp"); }
body.interface-classic.theme-mosslight .classic-banner { --classic-banner-art: url("../apparel/background/sky_path.b510a2d655e7.webp"); }
body.interface-classic.theme-emberwake .classic-banner { --classic-banner-art: url("../apparel/background/great_maple_tree.6ae523af509f.webp"); --classic-banner-y: 55%; }
body.interface-classic.theme-surveyor .classic-banner { --classic-banner-art: url("../vistas/magical_archive_faded.9ef4cb7dcdf0.webp"); }
body.interface-classic.theme-star-touched .classic-banner { --classic-banner-art: url("../vistas/cotton-candy-field.e35736acf1a6.webp"); --classic-banner-y: 50%; }
body.interface-classic.theme-rose-nebula .classic-banner { --classic-banner-art: url("../apparel/background/rose_garden_spooky.6acb84f707a1.webp"); --classic-banner-y: 12%; }
body.interface-classic.theme-hearth-dusk .classic-banner { --classic-banner-art: url("../apparel/background/pumpkin_patch_path.f807f5ac1295.webp"); --classic-banner-y: 30%; }
body.interface-classic.theme-tidelight .classic-banner { --classic-banner-art: url("../vistas/comet_hills.3b097f9ac813.png"); --classic-banner-y: 35%; }
body.interface-classic.theme-orchard .classic-banner { --classic-banner-art: url("../vistas/grassy-field.ebf2f0a7da17.webp"); --classic-banner-y: 40%; }
body.interface-classic.theme-firefly-creek .classic-banner { --classic-banner-art: url("../apparel/background/blue_river_night.5b19c13b3d6e.webp"); --classic-banner-y: 20%; }
body.interface-classic.theme-slate-hollow .classic-banner { --classic-banner-art: url("../apparel/background/pine_mountain.456aeb144b99.webp"); --classic-banner-y: 35%; }
body.interface-classic.theme-colorblind-safe .classic-banner { --classic-banner-art: url("../apparel/background/dreamy_coast.9a459b09f18a.png"); --classic-banner-y: 50%; }
body.interface-classic.theme-high-contrast .classic-banner { --classic-banner-art: none; }

/* The banner is the brand link in this shell, at every width. */
body.interface-classic .site-brand { display: none; }
body.interface-classic .site-header { justify-content: flex-end; }

/* The Captain's desk only exists as a column on desktop. */
.classic-panel { display: none; }

@media (min-width: 1024px) {
    body.interface-classic {
        /* The menubar is what stays pinned here, so anything a page sticks "under the
           header" (scroll-margins, in-page rails) sits under the menubar instead. */
        --header-height: 48px;
    }
    body.interface-classic .classic-frame {
        margin-block: 18px;
        min-height: calc(100vh - 36px);
        min-height: calc(100dvh - 36px);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-surface) 70%, transparent), var(--shadow-lg);
    }
    body.interface-classic .classic-banner {
        min-height: 200px;
        padding: 26px 34px 30px;
        gap: 8px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    /* ---- Header: a slim status pill floating on the banner's top-right ----
       Not sticky here: the menubar below is the persistent bar. The currency chips,
       clock and flux all live in the Captain's desk, so the pill carries only the
       bell and the account menu. The chips stay in the DOM (display:none), since
       htmx-init.js resolves #nav-<currency> on every spend. */
    body.interface-classic .site-header {
        position: absolute;
        top: 14px;
        right: 16px;
        z-index: 100;
        height: 50px;
        gap: 10px;
        padding: 0 6px 0 10px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-pill);
        background: var(--bg-surface);
        box-shadow: var(--shadow-md);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body.interface-classic .site-header .weather-chip,
    body.interface-classic .site-header .site-clock--header,
    body.interface-classic .site-header .currency-cluster,
    body.interface-classic .site-header .nav-currency-more { display: none; }

    /* ---- Page grid: menubar across, desk + page below ---- */
    body.interface-classic .site-body {
        display: grid;
        grid-template-columns: 236px minmax(0, 1fr);
        grid-template-areas:
            "menu menu"
            "desk main";
        align-items: start;
    }

    /* ---- Menubar: the same .sidebar-nav markup, laid out horizontally ---- */
    body.interface-classic .site-sidebar {
        grid-area: menu;
        width: auto;
        height: auto;
        position: sticky;
        top: 0;
        z-index: 90;
        padding: 0 10px;
        overflow: visible;
        border-right: none;
        border-block: 1px solid var(--border-color);
        background: linear-gradient(180deg, var(--bg-hover), var(--bg-elevated));
        box-shadow: var(--shadow-sm);
    }
    /* flex-wrap, not overflow-x: see the Star-Touched block for why a scrolling bar
       would clip the dropdown panels. */
    body.interface-classic .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 0;
    }
    body.interface-classic .sidebar-nav > .pet-title-nav { display: none; }
    body.interface-classic .sidebar-nav > a,
    body.interface-classic .sidebar-nav-group > summary {
        min-height: 46px;
        height: 46px;
        padding: 0 11px;
        gap: 7px;
        border-radius: 0;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text-secondary);
    }
    /* The group holding the current page is marked too, not only the link inside its
       closed dropdown: otherwise the bar says nothing about where you are. */
    body.interface-classic .sidebar-nav > a.is-active,
    body.interface-classic .sidebar-nav-group:has(a[aria-current="page"]) > summary {
        background: var(--bg-surface);
        color: var(--text-primary);
        border-bottom-color: var(--color-primary);
    }
    body.interface-classic .sidebar-nav a.is-active::before { content: none; }
    body.interface-classic .sidebar-nav-group[open] > summary {
        background: var(--bg-surface);
        color: var(--text-primary);
        border-bottom-color: var(--color-violet);
    }
    body.interface-classic .sidebar-nav-group { position: relative; margin-top: 0; }
    body.interface-classic .sidebar-nav-group__label { flex-direction: row; align-items: center; gap: 6px; }
    body.interface-classic .sidebar-nav-group__hint { display: none; }
    /* The ⌄ glyph sits on the text baseline; lift it to the label's middle. `translate`,
       not `transform`, so the open state's rotate(180deg) still applies on top. */
    body.interface-classic .sidebar-nav-group__chevron { font-size: 0.85rem; margin-left: 0; translate: 0 -3px; }
    body.interface-classic .sidebar-nav-group[open] .sidebar-nav-group__chevron { translate: 0 3px; }
    /* Top-level menubar entries are text only; the dropdown items keep their icons. */
    body.interface-classic .sidebar-nav > a .nav-ico,
    body.interface-classic .sidebar-nav-group > summary .nav-ico { display: none; }

    /* .sidebar-nav-group (the <details>) is the containing block, set above. See
       game/test_css_positioning.py. */
    body.interface-classic .sidebar-nav-group__items {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 95;
        min-width: 240px;
        padding: 6px;
        gap: 1px;
        background: var(--bg-elevated);
        border: 1px solid var(--border-color);
        border-top: 3px solid var(--color-violet);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        box-shadow: var(--shadow-lg);
    }
    /* The last dropdowns open leftward so they never run off the frame's right edge. */
    body.interface-classic .sidebar-nav-group:nth-last-of-type(-n+2) .sidebar-nav-group__items { left: auto; right: 0; }
    body.interface-classic .sidebar-nav-group__items a {
        padding: 9px 12px;
        border-radius: var(--radius-sm);
        font-weight: 500;
    }
    body.interface-classic .sidebar-nav-group__items a.is-active {
        background: var(--bg-hover);
        color: var(--text-primary);
        box-shadow: inset 3px 0 0 var(--color-primary);
    }

    /* ---- The page itself ---- */
    body.interface-classic .site-body > .page-container {
        grid-area: main;
        max-width: none;
        margin: 0;
        padding: 22px 26px 44px 22px;
    }

    /* ---- Captain's desk ---- */
    body.interface-classic .classic-panel {
        grid-area: desk;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 22px 0 32px 18px;
        min-width: 0;
    }

    /* ---- Footer: a closing bar inside the frame ---- */
    body.interface-classic .site-footer {
        margin-top: 0;
        background: linear-gradient(180deg, var(--bg-elevated), var(--bg-hover));
        border-top: 1px solid var(--border-color);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
}

/* Narrow desktops: a slimmer desk leaves the page more room. */
@media (min-width: 1024px) and (width < 1280px) {
    body.interface-classic .site-body { grid-template-columns: 216px minmax(0, 1fr); }
}

/* ---- Desk boxes: the classic titled box ---- */
.classic-box {
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.classic-box__title {
    position: relative;
    margin: 0;
    padding: 9px 12px 7px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: linear-gradient(180deg, var(--bg-hover), var(--bg-elevated));
    border-bottom: 1px solid var(--border-color);
    border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}
.classic-box__title::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    border-radius: inherit;
    background: var(--gradient-primary);
}
.classic-box__text {
    margin: 0;
    padding: 10px 12px 0;
    font-size: 0.86rem;
    color: var(--text-secondary);
}
.classic-box--handbook { border-color: color-mix(in srgb, var(--color-reward) 45%, var(--border-color)); }
.classic-box__more {
    display: block;
    padding: 8px 12px 10px;
    font-family: var(--font-heading);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: right;
}

.classic-captain {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--text-primary);
}
.classic-captain__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    background: var(--gradient-primary);
    color: var(--text-inverse);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}
.classic-captain__avatar img { width: 100%; height: 100%; object-fit: cover; }
.classic-captain__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.classic-captain__name {
    font-family: var(--font-heading);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.classic-captain__level { font-size: 0.82rem; color: var(--text-secondary); }
.classic-captain__cta { font-size: 0.8rem; color: var(--color-primary); font-weight: 600; }
.classic-captain:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; border-radius: var(--radius-md); }
@media (hover: hover) {
    .classic-captain:hover { text-decoration: none; background: var(--bg-hover); }
    .classic-captain:hover .classic-captain__cta { text-decoration: underline; }
}

.classic-facts,
.classic-ledger { margin: 0; padding: 0 12px 10px; }
.classic-facts { border-top: 1px dashed var(--border-subtle); padding-top: 8px; }
.classic-facts__row,
.classic-ledger__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.86rem;
}
.classic-ledger { padding-top: 6px; }
.classic-ledger__row + .classic-ledger__row { border-top: 1px dotted var(--border-subtle); }
.classic-facts dt,
.classic-ledger dt { color: var(--text-secondary); white-space: nowrap; }
.classic-facts dd,
.classic-ledger dd { margin: 0; color: var(--text-primary); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.classic-ledger dd { font-weight: 700; }

.classic-box .pet-title-nav--classic { margin: 0; padding: 10px 12px 12px; }

.classic-quicklinks ul { list-style: none; margin: 0; padding: 6px; }
.classic-quicklinks a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 500;
}
.classic-quicklinks a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.classic-quicklinks .nav-ico { width: 20px; text-align: center; flex-shrink: 0; }
/* A word, not a dot: the state is said, colour only frames it. */
.classic-quicklinks__note {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--color-reward) 55%, var(--border-color));
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
@media (hover: hover) {
    .classic-quicklinks a:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
}

/* ---- Page furniture inside the Classic shell ----
   A light touch on shared components, never a restructure: the page header becomes
   a titled plaque and panels pick up the boxed look's top rule. No negative margins
   or re-padding, since .panel carries dozens of page-specific paddings. */
body.interface-classic .page-header {
    padding: 14px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
body.interface-classic .page-container .panel {
    border-radius: var(--radius-md);
    border-top: 3px solid color-mix(in srgb, var(--color-violet) 70%, var(--border-color));
}

/* ---- Command Post inside the frame ----
   The Legacy "Living Orbit" turns on at a 1280px VIEWPORT, but here the content column
   is the frame minus the desk (~700-900px), far too narrow for three orbit columns: the
   glance column ran out past the frame's edge. Classic takes the Frontier arrangement
   instead, work beside a glance column, keyed to the same markup and reading order. */
@media (min-width: 1024px) {
    body.interface-classic .command-grid {
        grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr);
        grid-template-areas: "command glance";
        gap: 18px;
    }
    body.interface-classic .command-grid::before { display: none; }
    body.interface-classic .command-column {
        display: grid;
        grid-area: command;
        gap: 18px;
        align-content: start;
    }
    body.interface-classic .command-column > section,
    body.interface-classic .command-recently,
    body.interface-classic .command-glance {
        grid-area: auto;
        align-self: start;
    }
    body.interface-classic .command-glance { grid-area: glance; }
}

/* The rank-holder widget was drawn for a 216px rail with its quick-assign button
   beside it; in the desk box the link takes the remaining width instead of truncating. */
body.interface-classic .pet-title-nav--classic .pet-title-nav__row { display: flex; gap: 6px; }
body.interface-classic .pet-title-nav--classic .pet-title-nav__link { flex: 1 1 auto; min-width: 0; }
body.interface-classic .pet-title-nav--classic .pet-title-nav__name { white-space: normal; overflow-wrap: anywhere; }

/* ---- The public front page (templates/game/landing.html) ----
   Anonymous, so base.html draws only the frame and banner (classic_public): no menubar,
   no Captain's desk. The page lays out its own page + desk pair from the same boxes, the
   desk after the page in the DOM and drawn on the left at 1024px+, as in the shell. */
.classic-landing { display: flex; flex-direction: column; gap: 16px; }
.classic-landing__page,
.classic-landing__desk { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.classic-landing__welcome .classic-box__title { font-size: 0.9rem; }
.classic-landing__welcome-body { padding: 18px 18px 20px; text-align: center; }
.classic-landing__tagline {
    max-width: 52ch;
    margin: 0 auto 20px;
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
    color: var(--text-secondary);
}
.classic-landing__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.classic-landing__note { margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; }

.classic-landing__species {
    list-style: none;
    margin: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}
.classic-landing__species li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.classic-landing__species li > span { font-size: 1.15rem; line-height: 1; }

.classic-landing__features { padding: 4px 14px; }
.classic-landing__feature { display: flex; gap: 14px; padding: 12px 0; }
.classic-landing__feature + .classic-landing__feature { border-top: 1px dotted var(--border-subtle); }
.classic-landing__feature-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-hover);
    font-size: 1.4rem;
    line-height: 1;
}
.classic-landing__feature h3 { margin: 0 0 4px; font-family: var(--font-heading); font-size: 1rem; }
.classic-landing__feature p { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }

.classic-landing__spotlight { margin: 0; padding: 12px; text-align: center; }
.classic-landing__spotlight img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.classic-landing__spotlight figcaption { margin-top: 8px; font-size: 0.84rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.classic-landing .waitlist { margin-top: 0; max-width: none; }

@media (min-width: 1024px) {
    .classic-landing {
        display: grid;
        grid-template-columns: 236px minmax(0, 1fr);
        grid-template-areas: "desk page";
        align-items: start;
        gap: 22px;
    }
    .classic-landing__page { grid-area: page; }
    .classic-landing__desk { grid-area: desk; }
}

/* ---- Settings preview card ---- */
.theme-preview--classic {
    background-image:
        linear-gradient(90deg, rgb(8 4 16 / 72%), rgb(8 4 16 / 18%)),
        var(--classic-preview-art, linear-gradient(135deg, #20304a, #3f6b4a));
    background-size: cover;
    background-position: center 60%;
}
.theme-card--classic .theme-card__status { color: var(--color-primary); }

/* ---- Coarse pointer floor: last in the block for the usual cascade reason ---- */
@media (pointer: coarse) {
    .classic-quicklinks a,
    .classic-box__more { min-height: 44px; }
    .classic-landing__note a { display: inline-flex; align-items: center; min-height: 44px; }
    .classic-box__more { display: flex; align-items: center; justify-content: flex-end; }
}