/* ==========================================================================
   PremiBox — dark game skin cloned from the PremiBox Android app.
   Identity: near-black violet page (#07080B) with faint red blooms, neon-red
   #FF2E3C signal accent (text ink is coral #FF7A6B, filled buttons sit on the
   dimmed #C4101F — the app never paints raw #FF2E3C as a large surface),
   CUT (beveled) corners instead of rounded ones, 1px warm borders that run
   hot at the top edge, red glow instead of drop shadows, and condensed
   uppercase micro-labels. Source of truth: PremiBox/app/src/main/res/values/
   colors.xml + themes.xml and the HudDrawable panel spec.

   Load order: linked right after the base site/core.css, so equal-specificity
   shell rules win by document order (no !important). Token overrides use
   :root[data-theme="dark"] so they also beat the base prefers-color-scheme
   fallback block (:root:not([data-theme="light"])). The layout stamps
   data-theme="dark" unconditionally for this dark_only theme.

   Cut corners are clip-path polygons. A clipped box loses its 1px border on
   the diagonal AND clips its own box-shadow, so glow on clipped elements is
   filter: drop-shadow() (applied after clipping) and cuts stay small enough
   (5–15px) that the open diagonal reads as a bevel, exactly like the app.

   Contrast (WCAG, all computed on the darkest ground they appear on):
   - --text       #f5f4fa on --bg ............ 18.1:1  (AAA)
   - --text-muted #9e9bb0 on --bg 7.4:1, on --surface 6.9:1
   - --accent     #ff7a6b on --bg 7.8:1, on --accent-soft 6.9:1
   - btn ink      #ffffff on #c4101f ......... 6.1:1
   - green ink    #06180f on #33d68b ......... 9.9:1
   - --amber      #fbbf24 on --amber-soft 9.7:1 · --danger #fb6b6b on --bg 6.2:1
   - every tone fg >= 7:1 on its tone-bg
   ========================================================================== */

:root {
    /* New tokens (safe on plain :root — nothing in base defines them). */
    --cond: "Roboto Condensed", "Arial Narrow", "Segoe UI", Roboto, sans-serif;
    /* Cut-corner masks: the app's PB.Shape.Cut scale (XS 5 / S 8 / M 11 / L 15)
       plus the asymmetric hero cut (shallow 5 / deep 14, TL-BR vs TR-BL). */
    --cut-xs: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
    --cut-s: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    --cut-m: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
    --cut-l: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
    --cut-hero: polygon(5px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 14px 100%, 0 calc(100% - 14px), 0 5px);
    /* App icon mask: 18% bevel (PB.IconShape). */
    --cut-icon: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Near-black with a violet cast; surfaces are the app's card/plate inks. */
    --bg: #07080b;
    --surface: #131320;
    --surface-2: #15141f;
    /* Warm borders — pb_edge resting, pb_edge_hot on hover/focus. */
    --border: #3b2430;
    --border-strong: #7a1f2e;
    --text: #f5f4fa;
    --text-muted: #9e9bb0;

    /* Coral ink (pb_accent_2): the color the app USES for accent text — raw
       #FF2E3C 4.5:1 is reserved for hairlines, glow and tiny signals. */
    --accent: #ff7a6b;
    --accent-hover: #ff958a;
    --accent-soft: #2a0d12;
    --accent-soft-border: #51131a;

    /* Success / download green (pb_green), warning amber, error red. */
    --green: #33d68b;
    --green-hover: #57e0a1;
    --green-soft: #0e291f;
    --amber: #fbbf24;
    --amber-soft: #2e250f;
    --danger: #fb6b6b;
    --danger-soft: #2e1813;

    /* Corners are CUT, not rounded — radii collapse to near-sharp and the
       bevels come from the clip-path masks above. */
    --radius-lg: 4px;
    --radius: 3px;
    --radius-sm: 2px;

    /* The app has zero elevation: separation is border + red glow. */
    --shadow-card: 0 0 0 1px rgba(255, 46, 60, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-raised: 0 0 16px rgba(255, 46, 60, 0.12), 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 0 26px rgba(255, 46, 60, 0.14), 0 16px 48px rgba(0, 0, 0, 0.7);
}

/* Category tones — hue map preserved (colors stay recognizable site-wide),
   pushed onto the violet-black ground. Every fg >= 7:1 on its bg. */
:root[data-theme="dark"] .tone-1 { --tone-bg: #0e2920; --tone-fg: #4fe098; }
:root[data-theme="dark"] .tone-2 { --tone-bg: #2e1f0d; --tone-fg: #f0a35f; }
:root[data-theme="dark"] .tone-3 { --tone-bg: #0d1e33; --tone-fg: #6cb8f5; }
:root[data-theme="dark"] .tone-4 { --tone-bg: #0a2a28; --tone-fg: #3ad6c0; }
:root[data-theme="dark"] .tone-5 { --tone-bg: #201839; --tone-fg: #b1a4f7; }
:root[data-theme="dark"] .tone-6 { --tone-bg: #2e0d1c; --tone-fg: #f288b0; }
:root[data-theme="dark"] .tone-7 { --tone-bg: #1b1926; --tone-fg: #a9a5bb; }
:root[data-theme="dark"] .tone-8 { --tone-bg: #2a220b; --tone-fg: #d9b95e; }

/* Base ---------------------------------------------------------------------
   The app's bg_page: vertical #07080B -> #0C0A10 wash plus two faint red
   blooms — one bleeding from the top center, one from the bottom left. */

body {
    background-color: var(--bg);
    background-image:
        radial-gradient(460px 240px at 50% -40px, rgba(255, 46, 60, 0.08), transparent 70%),
        radial-gradient(560px 300px at 12% 100%, rgba(255, 46, 60, 0.07), transparent 70%),
        linear-gradient(180deg, #07080b, #0c0a10);
    background-attachment: fixed;
}

::selection {
    background: rgba(255, 46, 60, 0.45);
    color: #ffffff;
}

/* Visible keyboard focus in coral (the readable red). */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

h1, h2, h3 {
    letter-spacing: -0.015em;
}

/* Header -------------------------------------------------------------------
   The floating card becomes the app's header PLATE: cut 13px, plate gradient
   ink, a 2px hot accent line along the top edge and faint diagonal scan
   stripes (bg_header_gradient). Glow via drop-shadow — box-shadow would be
   clipped away with the corners. */

.header-inner {
    background-color: #0a0910;
    background-image:
        linear-gradient(180deg, rgba(255, 46, 60, 0.9), rgba(255, 46, 60, 0.9)),
        repeating-linear-gradient(300deg, rgba(255, 255, 255, 0.015) 0 1.5px, transparent 1.5px 13px),
        linear-gradient(180deg, #191723, #0a0910);
    background-size: 100% 2px, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: top, top, top;
    border-color: var(--border-strong);
    clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
    box-shadow: none;
    filter: drop-shadow(0 0 5px rgba(255, 46, 60, 0.18));
}

.brand {
    font-family: var(--cond);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.nav-link {
    font-family: var(--cond);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12.5px;
    letter-spacing: 0.06em;
}

.search-input {
    background: #15141f;
    border-color: var(--border);
    caret-color: #ff2e3c;
}

.search-input:focus {
    outline: 2px solid rgba(255, 46, 60, 0.35);
    border-color: #ff2e3c;
    background: #15141f;
}

.search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Buttons ------------------------------------------------------------------
   PB.Button: filled actions sit on the DIMMED red #C4101F under a metal gloss
   overlay (fg_button_gloss), cut corners, condensed uppercase labels. The
   primary CTA gets the asymmetric hero cut (shallow/deep alternating). */

/* Ink on the filled fills. The :root prefix matches the specificity of the
   base media-query fallback so it wins by document order for OS-dark visitors
   too, not only cookie-set ones. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .page-link[aria-current="page"] {
    color: #ffffff;
}

:root[data-theme="dark"] .btn-green {
    color: #06180f;
}

:root[data-theme="dark"] .chip.is-active {
    color: #ff7a6b;
}

.btn-primary,
.btn-green,
.btn-outline {
    font-family: var(--cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.btn-primary {
    background-color: #c4101f;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.25));
    border: 1px solid rgba(255, 100, 112, 0.45);
    clip-path: var(--cut-hero);
}

.btn-primary:hover {
    background-color: #d91527;
    box-shadow: none;
    filter: drop-shadow(0 0 10px rgba(255, 46, 60, 0.4));
}

.btn-green {
    background-color: #17b06f;
    background-image: linear-gradient(180deg, #33d68b, #17b06f);
    border: 1px solid rgba(51, 214, 139, 0.5);
    clip-path: var(--cut-m);
}

.btn-green:hover {
    background-image: linear-gradient(180deg, #45e099, #1cbd79);
    box-shadow: none;
    filter: drop-shadow(0 0 10px rgba(51, 214, 139, 0.35));
}

.btn-outline {
    background: transparent;
    clip-path: var(--cut-m);
}

.btn-outline:hover {
    border-color: var(--border-strong);
    color: var(--accent);
}

/* Section heads: the app's PB.SectionHeader — condensed uppercase micro-label
   with an angled red blade. The blade is pure CSS decoration — real UI
   strings still go through __() in the views. */

.section-head h2 {
    font-family: var(--cond);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    gap: 9px;
}

.section-head h2::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 15px;
    flex: none;
    background: linear-gradient(180deg, #ff6470, #c4101f);
    transform: skewX(-18deg);
}

.section-head .section-icon {
    display: none;
}

.app-section > h2,
.card > h2,
.listing-head h1,
.page-narrow > h1 {
    font-family: var(--cond);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.app-section > h2::before,
.card > h2::before,
.listing-head h1::before,
.page-narrow > h1::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 0.8em;
    margin-right: 0.5em;
    background: linear-gradient(180deg, #ff6470, #c4101f);
    transform: skewX(-18deg);
}

.section-link {
    font-family: var(--cond);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.07em;
}

/* Chips & micro-labels: the app's store filter chips — cut 8px plates, plate
   gradient at rest; the active chip fills with red wash, coral ink and a 1px
   hot line along its top edge (bg_store_chip). ----------------------------- */

.cat-chip {
    font-family: var(--cond);
    letter-spacing: 0.09em;
    border-radius: 0;
    clip-path: var(--cut-xs);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-fg, var(--text-muted)) 30%, transparent);
}

.cat-label {
    font-family: var(--cond);
    letter-spacing: 0.09em;
}

.chip {
    font-family: var(--cond);
    font-weight: 700;
    font-size: 12.5px;
    background-image: linear-gradient(180deg, #15141f, #0e0d15);
    border-color: var(--border);
    clip-path: var(--cut-s);
}

.chip.is-active {
    background-color: #2a0d12;
    background-image:
        linear-gradient(180deg, rgba(255, 46, 60, 0.9), rgba(255, 46, 60, 0.9)),
        linear-gradient(180deg, rgba(255, 46, 60, 0.2), rgba(255, 46, 60, 0.06));
    background-size: 100% 1px, 100% 100%;
    background-repeat: no-repeat;
    background-position: top, top;
    border-color: rgba(255, 46, 60, 0.45);
    box-shadow: none;
    filter: drop-shadow(0 0 8px rgba(255, 46, 60, 0.25));
}

/* Metadata on the shared module pages (app detail, listings, blog):
   condensed HUD data — those base module files load after this one, so their
   size/layout stays intact. */
.fact-list dt,
.listing-count,
.sort-label,
.sort-link,
.chip-count,
.breadcrumb {
    font-family: var(--cond);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.breadcrumb {
    font-size: 11.5px;
}

/* Cards: HUD plates — cut 15px, warm 1px edge that runs HOT + a red halo on
   hover (the app separates layers with border + glow, never elevation).
   Icons wear the app's 18% bevel mask (PB.IconShape). --------------------- */

.app-card,
.featured-card {
    clip-path: var(--cut-l);
    box-shadow: none;
}

.app-card:hover,
.featured-card:hover {
    border-color: var(--border-strong);
    box-shadow: none;
    filter: drop-shadow(0 0 9px rgba(255, 46, 60, 0.22));
}

.app-card-icon,
.featured-cover-icon {
    border: 1px solid var(--border);
    border-radius: 0;
    clip-path: var(--cut-icon);
    background: linear-gradient(180deg, #1b1926, #0e0d15);
}

.screenshot-thumb:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card), 0 0 14px rgba(255, 46, 60, 0.14);
}

/* Forms: PB.TextField — surface-2 ink, cool outline warming to signal red on
   focus. No clip on inputs: the focus outline would be cut away with it. */

.input {
    background: #15141f;
    border-color: #2a2634;
}

.input:focus {
    outline: 2px solid rgba(255, 46, 60, 0.35);
    border-color: #ff2e3c;
    background: #15141f;
}

/* Flash banners: signal lines — green = OK, red = alert, with a solid signal
   edge on the left like the app's status pills. */

.flash {
    border-left-width: 3px;
    font-weight: 600;
}

.flash-success {
    box-shadow: inset 3px 0 0 var(--green), var(--shadow-card);
}

.flash-error {
    box-shadow: inset 3px 0 0 var(--danger), var(--shadow-card);
}

/* Empty state --------------------------------------------------------------- */

.empty-state {
    background: transparent;
    border-color: var(--border);
}

/* Pagination ---------------------------------------------------------------- */

.page-link {
    font-family: var(--cond);
    font-weight: 700;
}

:root[data-theme="dark"] .page-link[aria-current="page"] {
    background: #c4101f;
    border-color: rgba(255, 100, 112, 0.45);
}

a.page-link:hover {
    border-color: var(--border-strong);
    color: var(--accent);
}

/* Footer --------------------------------------------------------------------
   Deep plate slab with a hot seam glowing along the top edge — the same
   hot-top border language as every panel in the app. */

.site-footer {
    position: relative;
    background: linear-gradient(180deg, #0e0d15, #0a0910);
    border-top-color: var(--border-strong);
}

.site-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 46, 60, 0.55), transparent);
}

.footer-links a,
.footer-tagline {
    font-family: var(--cond);
    font-size: 12.5px;
}

.footer-bottom {
    font-family: var(--cond);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Modal / overlay: the app's dialog — cut 16px HUD plate, hot top accent
   line, red halo. The overlay is the app's pb_scrim (#07080B at 75%). */

.modal-overlay {
    background: rgba(7, 8, 11, 0.78);
}

.modal-panel {
    background-color: #0a0910;
    background-image:
        linear-gradient(180deg, rgba(255, 46, 60, 0.9), rgba(255, 46, 60, 0.9)),
        linear-gradient(180deg, #191723, #0a0910);
    background-size: 100% 2px, 100% 100%;
    background-repeat: no-repeat;
    background-position: top, top;
    border: 1px solid var(--border-strong);
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
    box-shadow: none;
    filter: drop-shadow(0 0 14px rgba(255, 46, 60, 0.2));
}