/* ============================================================================
   Playbook - bright and rounded. Chunky type, soft corners, a clear blue and
   plenty of lift. Suits gaming, family and entertainment channels.

   Light-first, so :root is the light palette and dark is the override.
   ========================================================================== */

:root {
    --wx-color-scheme: light;

    --wx-ground: #F4F7FB;
    --wx-ground-deep: #E7EDF6;
    --wx-surface: #FFFFFF;
    --wx-surface-2: #EFF4FA;
    --wx-line: #D8E1EC;
    --wx-line-soft: #E8EEF6;

    --wx-ink: #101828;
    --wx-muted: #4A5567;
    --wx-muted-dim: #7C8798;

    --wx-signal: #0BA5EC;
    --wx-signal-ink: #FFFFFF;
    --wx-signal-soft: rgba(11, 165, 236, 0.13);

    --wx-coin: #F79009;
    --wx-coin-ink: #101010;
    --wx-coin-soft: rgba(247, 144, 9, 0.14);
    --wx-good: #12B76A;
    --wx-warn: #F79009;
    --wx-bad: #F04438;

    --wx-radius: 16px;
    --wx-pad: 22px;
    --wx-shell: 1200px;

    --wx-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 8px 20px rgba(16, 24, 40, 0.06);
    /* Depth: a bar above the page, and a sheet or toast floating over it. */
    --wx-elev-1: 0 1px 2px rgba(0, 0, 0, 0.12);
    --wx-elev-2: 0 12px 32px rgba(0, 0, 0, 0.28);

    /* Chips and thumbnails; buttons and steppers; the fully rounded chip. */
    --wx-radius-sm: 10px;
    --wx-radius-control: 999px;
    --wx-radius-pill: 999px;

    /* Text over a picture, the wash that keeps it readable, and the Patron tier. */
    --wx-on-image: #ffffff;
    --wx-scrim: rgba(0, 0, 0, 0.55);
    --wx-patron: #8b5cf6;
    --wx-patron-soft: rgba(139, 92, 246, 0.16);

    --wx-font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
    --wx-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wx-font-data: "Space Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --wx-color-scheme: dark;

        --wx-ground: #0B1220;
        --wx-ground-deep: #060B15;
        --wx-surface: #141C2C;
        --wx-surface-2: #1C2638;
        --wx-line: #2B364A;
        --wx-line-soft: #222C3D;

        --wx-ink: #EEF3FA;
        --wx-muted: #9AA6B8;
        --wx-muted-dim: #6C7889;

        --wx-signal: #38BDF8;
        --wx-signal-ink: #04121C;
        --wx-signal-soft: rgba(56, 189, 248, 0.15);

        --wx-coin: #FDB022;
        --wx-coin-ink: #101010;
        --wx-good: #32D583;
        --wx-bad: #F97066;

        --wx-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
    }
}

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

    --wx-ground: #0B1220;
    --wx-ground-deep: #060B15;
    --wx-surface: #141C2C;
    --wx-surface-2: #1C2638;
    --wx-line: #2B364A;
    --wx-line-soft: #222C3D;

    --wx-ink: #EEF3FA;
    --wx-muted: #9AA6B8;
    --wx-muted-dim: #6C7889;

    --wx-signal: #38BDF8;
    --wx-signal-ink: #04121C;
    --wx-signal-soft: rgba(56, 189, 248, 0.15);

    --wx-coin: #FDB022;
    --wx-coin-ink: #101010;
    --wx-good: #32D583;
    --wx-bad: #F97066;

    --wx-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---- personality ------------------------------------------------------- */

h1, h2, h3,
.product-details-section .product-name,
.product-grid .name {
    font-weight: 700;
    letter-spacing: 0;
}

header nav ul li a {
    border-radius: 999px;
    padding: 6px 14px;
}

/* Pills, not rectangles - for the website's own buttons. The shared buttons read
   --wx-radius-control, which this theme sets to a pill. */
.btn,
.payment-btn {
    border-radius: 999px;
    padding: 11px 22px;
    font-weight: 700;
}

.display-header {
    border-radius: 999px;
    padding: 8px 18px;
    background-color: var(--wx-signal);
    color: var(--wx-signal-ink);
    border-color: transparent;
    font-weight: 700;
}

.product-grid {
    gap: 14px;
    padding: 4px;
}

.product-grid .product-card {
    box-shadow: var(--wx-shadow);
    overflow: hidden;
}

.product-grid .product-card:hover {
    border-color: var(--wx-signal);
}

.cart-item-image img,
.product-image-gallery .carousel-item img {
    border-radius: 12px;
}

.wx-optionpick label {
    border-radius: 999px;
}

/* ---- home bands -------------------------------------------------------- */

.wx-band-head {
    border-radius: 999px;
    padding: 8px 18px;
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
    border-color: transparent;
}

.wx-band-head h2 { font-weight: 700; }

.wx-band-more,
.wx-band-aside { opacity: 0.92; }

.wx-hero { border-radius: 22px; }

.wx-gcard,
.wx-tile,
.wx-post,
.wx-winner {
    box-shadow: var(--wx-shadow);
}

/* ============================================================================
   The arcade (2026-10-07). Playbook as a game night: the header a rounded bar floating
   over the page, the cover a big block of the brand color with the picture stuck on
   it like a sticker, section titles as tilted pill badges, every other row on a tinted
   block, and cards with a chunky outline that hop when the pointer lands.

   Shared with every theme in base.css ("The home page on the page"): the open page,
   natural heights, the tagline as the cover's headline, products sharing the width,
   the hover. Phones keep the app's look; the cover's arrangement starts at 900px.
   ========================================================================== */

/* ---- the floating bar ------------------------------------------------------------ */

@media (min-width: 900px) {
    header.site-header {
        background: transparent;
        border-bottom: none;
        padding: 14px 20px 0;
    }

    header.site-header .container {
        background: var(--wx-surface);
        border: 2px solid var(--wx-ink);
        border-radius: 999px;
        box-shadow: 0 5px 0 var(--wx-ink);
        padding: 6px 10px 6px 22px;
    }
}

/* ---- the cover: a block of color with a sticker on it ------------------------------ */

.wx-hero {
    background:
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--wx-coin) 55%, transparent) 0 90px, transparent 91px),
        radial-gradient(circle at 8% 92%, color-mix(in srgb, #ffffff 22%, transparent) 0 120px, transparent 121px),
        var(--wx-signal);
    border: 3px solid var(--wx-ink);
    border-radius: 32px;
    box-shadow: 0 8px 0 var(--wx-ink);
    place-items: center start;
    text-align: left;
    padding: 44px;
}

.wx-hero .wx-hero-in,
.wx-hero.has-image .wx-hero-in {
    background: none;
    padding: 0;
    justify-items: start;
}

.wx-hero-tag,
.wx-hero.has-image .wx-hero-tag {
    color: var(--wx-signal-ink);
    font-weight: 800;
    font-size: clamp(2.6rem, 6vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.01em;
    max-width: 13ch;
}

@media (min-width: 900px) {
    :where(.wx-home.is-wide) .wx-hero.has-image {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        gap: 40px;
        align-items: center;
    }

    :where(.wx-home.is-wide) .wx-hero.has-image .wx-hero-img {
        position: relative;
        grid-column: 2;
        grid-row: 1;
        height: auto;
        aspect-ratio: 1 / 1;
        border: 10px solid #ffffff;
        border-radius: 26px;
        box-shadow: 0 8px 0 var(--wx-ink);
        transform: rotate(3deg);
    }

    :where(.wx-home.is-wide) .wx-hero.has-image .wx-hero-in { grid-column: 1; grid-row: 1; }
}

@media (max-width: 899px) {
    .wx-hero { padding: 28px 22px; border-radius: 26px; }
    .wx-hero.has-image { display: grid; gap: 22px; }
    .wx-hero.has-image .wx-hero-img { position: relative; height: auto; aspect-ratio: 4 / 3; border: 6px solid #ffffff; border-radius: 20px; transform: rotate(-1.5deg); }
    .wx-hero.has-image .wx-hero-in { grid-row: 2; }
}

/* ---- tinted blocks ---------------------------------------------------------------- */

@media (min-width: 900px) {
    .wx-home:where(.is-wide) > .wx-layout-row:nth-child(even) {
        background: var(--wx-signal-soft);
        border-radius: 32px;
        padding: 36px;
    }
}

/* ---- section titles: badges -------------------------------------------------------- */

.wx-band-head {
    background: none;
    border: none;
    border-radius: 0;
    /* Room for the tilted badge: its corners rise past its own box, and the title clips
       whatever leaves it. */
    padding: 8px 6px 4px;
    color: var(--wx-ink);
    align-items: center;
}

.wx-band-head h2 {
    background: var(--wx-coin);
    color: var(--wx-coin-ink);
    border: 3px solid var(--wx-ink);
    border-radius: 999px;
    box-shadow: 0 4px 0 var(--wx-ink);
    padding: 4px 20px;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    font-weight: 800;
    transform: rotate(-1.5deg);
    white-space: normal;
    overflow: visible;
}

.wx-band-more,
.wx-band-aside {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--wx-ink);
    opacity: 1;
    border: 2px solid var(--wx-ink);
    border-radius: 999px;
    padding: 5px 14px;
    background: var(--wx-surface);
}

.wx-band-more:hover { background: var(--wx-ink); color: var(--wx-surface); text-decoration: none; }

/* ---- cards that hop ---------------------------------------------------------------- */

.wx-band .product-grid .product-card,
.wx-post,
.wx-tile,
.wx-gcard,
.wx-pin {
    background: var(--wx-surface);
    border: 3px solid var(--wx-ink);
    border-radius: 22px;
    box-shadow: 0 6px 0 var(--wx-ink);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* Under the pointer the outline and its shadow take the brand color - no lift (Frank,
   2026-10-07: the hop was too jarring). */
:is(.wx-band .product-grid .product-card, .wx-post, .wx-tile, .wx-gcard, a.wx-gfeature):hover {
    border-color: var(--wx-signal);
    box-shadow: 0 6px 0 var(--wx-signal);
}

.wx-band .product-grid .product-image img { border-radius: 0; margin: 0; }
.wx-band .product-grid .product-info { padding: 12px 16px 6px; }
.wx-band .product-grid .product-purchase,
.wx-band .product-grid .product-rewards { padding: 0 16px; }
.wx-band .product-grid .product-card { padding-bottom: 14px; }

.wx-post-in h3,
.wx-tile-in h3,
.wx-band .product-grid .name { font-weight: 800; font-size: 1.05rem; }

.wx-pin-in h2 { font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.4rem); }

.wx-posts, .wx-tiles, .wx-cards { gap: 22px; }

/* ---- the other pages, and the app ----------------------------------------------
   The store, giveaways, streams and games pages, and the same screens in the app and
   the admin's phone preview - which draw the shared components below and load this
   file too - in the arcade's colors. */

/* Filters as chunky tokens. */
.wx-chip {
    border: 2px solid var(--wx-ink);
    background: var(--wx-surface);
    color: var(--wx-ink);
    box-shadow: 0 3px 0 var(--wx-ink);
    font-weight: 700;
}

.wx-chip.is-selected {
    background: var(--wx-coin);
    border-color: var(--wx-ink);
    color: var(--wx-coin-ink);
}

.product-grid .product-card,
.wx-card.gw-card,
.games-card {
    background: var(--wx-surface);
    border: 3px solid var(--wx-ink);
    border-radius: 22px;
    box-shadow: 0 6px 0 var(--wx-ink);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    /* In the app's scrolling list a card that clips (overflow: hidden) may otherwise
       shrink below its picture and cut it off - see ui.css's .wx-card. */
    flex-shrink: 0;
}

:is(.product-grid .product-card, .wx-card.gw-card, .games-card):hover {
    border-color: var(--wx-signal);
    box-shadow: 0 6px 0 var(--wx-signal);
}

.product-grid .product-image img { border-radius: 0; margin: 0; }

:is(.product-grid .name, .gw-card-name, .games-card-title, .feed-post-title) { font-weight: 800; }

/* Section captions as tilted badges. */
.wx-caption.gw-section,
.home-heading {
    justify-self: start;
    display: inline-block;
    background: var(--wx-coin);
    color: var(--wx-coin-ink);
    border: 3px solid var(--wx-ink);
    border-radius: 999px;
    box-shadow: 0 4px 0 var(--wx-ink);
    padding: 3px 18px;
    margin: 6px 4px 4px;
    font-family: var(--wx-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    transform: rotate(-1.5deg);
}

.feed-post {
    background: var(--wx-surface);
    border: 3px solid var(--wx-ink);
    border-radius: 22px;
    box-shadow: 0 6px 0 var(--wx-ink);
    margin-bottom: 18px;
}

.chrome-top { border-bottom: 3px solid var(--wx-ink); }
.chrome-partner { font-family: var(--wx-font-display); font-weight: 800; }

/* ---- one product, one giveaway --------------------------------------------------
   The item page and a single giveaway's page (shared sizes in base.css). The giveaway
   page is the same component in the app and the preview, which load this file too. */

/* The picture stuck on like a sticker. */
:is(.product-image-gallery .carousel, .gw-detail-media) {
    border: 8px solid #ffffff;
    border-radius: 24px;
    box-shadow: 0 0 0 3px var(--wx-ink), 0 9px 0 3px var(--wx-ink);
    transform: rotate(-1.5deg);
}

:is(.product-details-section .product-name, .product-details-section .product-name h3, .gw-detail-name) { font-weight: 800; }

/* Timing and entries as badges. html first: giveaways.css loads after this file and
   colors "4 days left" green, which on the badge was green on teal. */
html .gw-detail-head .gw-timing,
.product-details-section .product-rewards {
    align-self: flex-start;
    background: var(--wx-coin);
    color: var(--wx-coin-ink);
    border: 2px solid var(--wx-ink);
    border-radius: 999px;
    padding: 3px 14px;
    font-weight: 800;
    transform: rotate(-1.5deg);
}

.product-details-section .product-rewards :is(span, i) { color: inherit; }

.gw-enter {
    background: var(--wx-surface);
    border: 3px solid var(--wx-ink);
    border-radius: 22px;
    box-shadow: 0 6px 0 var(--wx-ink);
}

/* The rails of stream and game icons sit on the page itself, not on a panel of their own
   (Frank, 2026-10-07: the panel showed as a rectangle around the icons). */
/* html first: the screens' own stylesheets load after this one and paint the panel. */
html :is(.feed-rail, .games-rail, .store-rail, .gw-rail) {
    background: transparent;
    border-bottom: none;
}

/* A tilted badge needs room under it too, or it sits on the cards below. html first, as
   above: giveaways.css sets the caption's own margins. */
html .wx-caption.gw-section { margin: 24px 4px 18px; }
html .wx-caption.gw-section:first-child { margin-top: 6px; }
html .home-band-head { margin-bottom: 8px; }

/* Room between the store's row of categories and the first heading or card under it -
   the chunky chips and the filled heading pill otherwise sit on each other. */
html .store-rail { margin-bottom: 18px; }

/* The giveaways page: the entries balance sits clear of the chips above it and close to
   the first section under it (Frank, 2026-10-07). */
html .gw-balance { margin: 14px 0 0; }
html .gw-balance + .wx-caption.gw-section { margin-top: 14px; }

/* A giveaway's page: the tilted picture needs room before the title under it. */
@media (min-width: 900px) {
    html .gw.is-wide .gw-detail-main { padding-top: 30px; }
}

/* The app and the admin's phone preview - a phone inside a wide window - take the
   phone's home rules above by the screen's own flag, not the window's width. */
.wx-home.is-app .wx-hero { padding: 28px 22px; border-radius: 26px; }
.wx-home.is-app .wx-hero.has-image { display: grid; gap: 22px; }
.wx-home.is-app .wx-hero.has-image .wx-hero-img { position: relative; height: auto; aspect-ratio: 4 / 3; border: 6px solid #ffffff; border-radius: 20px; transform: rotate(-1.5deg); }
.wx-home.is-app .wx-hero.has-image .wx-hero-in { grid-row: 2; }