/* Giveaways, on every host that shows them.

   Phone-first like the rest, with one breakpoint near the bottom that lets the cards
   spread on a desktop. That is the whole difference between the website's giveaways and
   the app's - which is why one component serves both.

   Every colour is a partner theme token. The fallbacks are what this looks like before
   a theme loads, not a second design. */

.gw {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--wx-ground, #111);
    color: var(--wx-ink, #fff);
    font-family: var(--wx-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}

.gw-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 12px 14px 28px;
}

/* ---------- what you have to spend ---------- */

/* Sits under the rail. Which giveaways somebody is looking at is the first decision, and
   what they have to spend reads as an answer to it rather than a heading over it. */
.gw-balance {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.gw-balance-count {
    font-size: 1.6rem;
    line-height: 1;
}

.gw-balance-label {
    font-size: 0.9rem;
    color: var(--wx-muted, #9a9a9a);
}

.gw-section {
    margin: 18px 0 10px;
}

.gw-section:first-child { margin-top: 0; }

/* ---------- the cards ---------- */

.gw-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.gw-card {
    display: grid;
    /* Image beside the words on a phone: a giveaway card is mostly text, and stacking
       it would put the closing date below the fold. */
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto auto auto;
    align-items: start;
    gap: 2px 12px;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gw-card.is-closed { opacity: 0.72; }

/* Quiet under the pointer, the same as a game card. The partner site's own stylesheet
   fills every button with the accent on hover, which lit the whole card up. */
.gw-card:hover,
.gw-card:active,
.gw-card:focus {
    background: var(--wx-surface, #1b1b1b);
    color: inherit;
}

/* The rules link at the foot of a card - small, underlined, the card's own colour. */
.gw-card-rules {
    padding-bottom: 10px;
    font-size: 0.78rem;
    color: var(--wx-muted, #9a9a9a);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.gw-card-media {
    position: relative;
    grid-row: 1 / -1;
    align-self: stretch;
    /* A fixed box so a list of cards does not reflow as images arrive. */
    min-height: 96px;
    background: var(--wx-ground, #111);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gw-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gw-card-noimage {
    font-size: 1.5rem;
    color: var(--wx-muted-dim, #4a4a4a);
}

.gw-badge {
    position: absolute;
    top: 6px;
    left: 6px;
}

.gw-card-name {
    padding-top: 10px;
    padding-right: 10px;
    font-weight: 700;
    line-height: 1.25;
}

.gw-card-prize,
.gw-card-mine {
    padding-right: 10px;
    font-size: 0.85rem;
    color: var(--wx-muted, #cfcfcf);
}

.gw-card-mine {
    padding-bottom: 10px;
    color: var(--wx-signal, #d4af37);
    font-weight: 600;
}

/* ---------- the closing date, everywhere it appears ---------- */

.gw-timing {
    padding-right: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wx-muted, #9a9a9a);
}

.gw-timing.is-open { color: var(--wx-good, #4caf50); }

/* ---------- one giveaway ---------- */

.gw-detail {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gw-detail-media {
    aspect-ratio: 16 / 10;
    background: var(--wx-ground, #111);
}

.gw-detail-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gw-detail-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px 28px;
}

/* The three parts of the body - see GiveawayDetailView. Nothing on a phone; the
   website's page turns them into columns. */
.gw-detail-main, .gw-detail-side, .gw-detail-wide { display: contents; }

.gw-rules-link { margin: 0; font-size: 0.9rem; }

.gw-detail-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gw-detail-name {
    margin: 0;
    font-family: var(--wx-font-display, inherit);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

.gw-prize {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.gw-prize-value {
    margin-left: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--wx-muted, #9a9a9a);
}

.gw-winners-count,
.gw-note,
.gw-mine {
    margin: 0;
    font-size: 0.9rem;
    color: var(--wx-muted, #cfcfcf);
}

.gw-mine {
    color: var(--wx-signal, #d4af37);
    font-weight: 600;
}

.gw-text {
    margin: 0;
    color: var(--wx-muted, #cfcfcf);
    line-height: 1.5;
}

.gw-multipliers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- entering ---------- */

.gw-enter {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.gw-enter.is-closed { background: none; }

.gw-enter-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.gw-enter-have {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.gw-enter-row { display: flex; justify-content: center; }

.gw-slider {
    width: 100%;
    accent-color: var(--wx-signal, #d4af37);
}

.gw-enter-actions {
    display: flex;
    gap: 10px;
}

.gw-all { white-space: nowrap; }

/* The shared button (ui.css), taking the rest of its row beside "Use all". */
.gw-enter-btn { flex: 1 1 auto; }

/* ---------- where more entries come from ---------- */

.gw-sources {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--wx-line, #2c2c2c);
}

/* "No purchase necessary" - on the screen, beside the ways to buy, because the free
   route being visible is what keeps the paid ones a sweepstakes. */
.gw-npn {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--wx-muted, #9a9a9a);
}

.gw-npn strong { color: var(--wx-ink, #fff); }

.gw-sources h3 {
    margin: 10px 0 0;
    font-family: var(--wx-font-display, inherit);
    font-size: 1rem;
}





.gw-rules summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wx-muted, #9a9a9a);
}

.gw-rules .gw-text {
    padding-top: 8px;
    font-size: 0.85rem;
    white-space: pre-line;
}

/* ---------- room to spread ---------- */

/* The only thing that differs between the website and the app. Above a phone the cards
   go two and three across and the detail stops running the full width of a monitor. */
@media (min-width: 700px) {
    .gw-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

    .gw-detail-body,
    .gw-detail-media {
        max-width: 760px;
        margin-inline: auto;
    }

    .gw-detail-media { border-radius: var(--wx-radius, 12px); }
}

/* ---------- recent winners ---------- */

/* The way into the winners list, above the giveaways rather than below them: the
   question "does anybody actually win" is one people ask before they scroll, not
   after. */


.gw-winners-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gw-winners {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gw-winner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
}

.gw-winner-shot {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--wx-ground, #121212);
}

.gw-winner-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gw-winner-in {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gw-winner-who {
    font-weight: 700;
}

.gw-winner-what {
    font-size: 0.9rem;
}

.gw-winner-when {
    font-size: 0.78rem;
    color: var(--wx-muted, #9a9a9a);
}

/* The same pill as a button, for a host with no address to link to. A button brings its
   own font, background and alignment, and none of them are the ones next to it. */


/* The line under the enter button, and the rules it opens.

   Deliberately quiet: it has to be legible and it has to be there, but it is not
   what somebody came to the screen to read. The link inside it is a button, so it
   is styled back into a sentence rather than looking like a control on its own. */
.gw-agree {
    margin: 10px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--wx-muted, #9a9a9a);
}

.gw-rules {
    margin-top: 18px;
    padding: 14px 16px;
}

.gw-rules-head {
    margin: 0 0 10px;
    font-family: var(--wx-font-display, inherit);
    font-size: 1rem;
    color: var(--wx-ink, #fff);
}

/* Partner-authored HTML: it decides its own headings, lists and emphasis, so this
   sets legibility and leaves the rest alone. Long words and pasted URLs wrap rather
   than pushing the panel wider than the phone. */
.gw-rules-body {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--wx-muted, #cfcfcf);
    overflow-wrap: anywhere;
}

.gw-rules-body :is(h1, h2, h3, h4) {
    color: var(--wx-ink, #fff);
    font-size: 0.95rem;
    margin: 14px 0 6px;
}

.gw-rules-body :first-child { margin-top: 0; }

.gw-rules-body :is(ol, ul) { padding-left: 20px; }

.gw-rules-body table {
    width: 100%;
    border-collapse: collapse;
}

/* Where the Official Rules link takes you: clear of a header fixed along the top. */
.gw-rules-anchor { scroll-margin-top: 72px; }

/* The rules on their own page, rather than inside the giveaway screen. */
.wx-rules-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px;
}

.wx-rules-title {
    margin: 0 0 12px;
    font-family: var(--wx-font-display, inherit);
    font-size: 1.25rem;
    color: var(--wx-ink, #fff);
}

/* The three ways to get more chances, in the order somebody does them. Numbered because
   they are a sequence and not a menu - buying earns the tokens that the games spend, and
   the games earn the points that come back as entries. */
.gw-steps {
    margin: 10px 0 14px;
    padding-left: 22px;
    display: grid;
    gap: 6px;

    color: var(--wx-muted, #9a9a9a);
    font-size: 0.86rem;
    line-height: 1.35;
}

.gw-steps li::marker {
    color: var(--wx-signal, #d4af37);
    font-weight: 700;
}

/* The three steps as three things to do, always on one row - they are the three halves of
   one idea and reading them as a row is the point. Equal columns, so no button is bigger
   than another just because its label is longer.

   They stay in the row on a phone too; the button shrinks to fit rather than the row
   breaking. See the narrow rules below. */
.gw-steps-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 12px;
}

/* Three to a row: the label wraps inside the button rather than pushing the row apart.
   "Redeem Credits" on a 360px screen is two lines in a button, not a fourth column. */
.wx-btn.gw-step-btn {
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.15;
    min-width: 0;
}

/* Narrow: the buttons give up padding and a little type size before the row gives up. */
@media (max-width: 430px) {
    .gw-steps-actions { gap: 6px; }

    .wx-btn.gw-step-btn { padding: 8px 6px; font-size: var(--wx-fs-caption); }
}

@media (hover: hover) {
    .gw-step-btn:hover {
        border-color: var(--wx-signal, #d4af37);
        color: var(--wx-signal, #d4af37);
        text-decoration: none;
    }
}

/* The editor's phone: the row is shown so a partner can see their layout, but nothing in
   the preview navigates. Dimmed rather than hidden - an empty space where three buttons
   will be is not a preview of anything. */
.gw-step-btn.is-inert {
    opacity: 0.55;
    cursor: default;
}

/* ── The rail ───────────────────────────────────────────────────────────────────

   The same control the store, games and feed carry across the top. It replaced three
   stacked sections and a separate winners link, which meant scrolling past everything live
   to see what was coming, and past both to see what had finished. */

.gw-rail {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 0 10px;
}

.gw-rail::-webkit-scrollbar { display: none; }

/* While a mouse drags it sideways - see rails.js. */
.gw-rail.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* ==========================================================================
   The confirmation, after entries go in.

   Deliberately louder than anything else in this stylesheet. Everywhere else the
   job is to let somebody read a list; here it is to mark the one moment they spent
   something on a prize. The order is fixed by what they want to know, in order:
   how many they now hold, what they hold it against, and how to get more.
   ========================================================================== */

.gw-done {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Sides match .gw-scroll: this view stands in for the scroller, not inside it. */
    padding: 12px 14px 24px;
    overflow-y: auto;
    min-height: 0;
}

/* ---------- the banner ---------- */

.gw-done-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 26px 18px 22px;
    border: 1px solid var(--wx-signal, #d4af37);
    border-radius: var(--wx-radius, 12px);
    /* The signal colour at low strength rather than at full: a solid gold panel makes
       the number on it harder to read, which is the opposite of the point. */
    background:
        radial-gradient(120% 140% at 50% 0%,
            var(--wx-signal-soft, rgba(212, 175, 55, 0.22)) 0%,
            var(--wx-surface, #1b1b1b) 70%);
    text-align: center;
    animation: gw-done-rise 420ms ease-out both;
}

@keyframes gw-done-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gw-done-eyebrow {
    margin: 0;
    font-family: var(--wx-font-display, inherit);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wx-signal, #d4af37);
}

.gw-done-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0 0;
}

.gw-done-count {
    font-family: var(--wx-font-data, ui-monospace, Consolas, monospace);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--wx-ink, #fff);
    /* Tabular figures, or the number jitters sideways as it counts up. */
    font-variant-numeric: tabular-nums;
}

.gw-done-unit {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wx-ink, #fff);
}

.gw-done-sub {
    margin: 0;
    font-size: 0.9rem;
    color: var(--wx-muted, #9a9a9a);
}

.gw-done-added {
    margin: 10px 0 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--wx-signal, #d4af37);
    color: var(--wx-signal-ink, #111);
    font-size: 0.8rem;
    font-weight: 700;
    animation: gw-done-pop 320ms 260ms ease-out both;
}

@keyframes gw-done-pop {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---------- the spray ----------
   Fourteen flecks falling behind the number. Every position and delay is written out
   rather than worked out: calc() has no modulo, and trying to fake one with % is how
   an earlier animation here silently stopped running. */

.gw-done-spray {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gw-done-fleck {
    position: absolute;
    top: -12px;
    width: 6px;
    height: 10px;
    border-radius: 1px;
    background: var(--wx-signal, #d4af37);
    opacity: 0;
    animation: gw-done-fall 1400ms ease-in forwards;
}

.gw-done-fleck:nth-child(2n) { background: var(--wx-ink, #fff); }
.gw-done-fleck:nth-child(3n) { background: var(--wx-good, #4caf50); width: 5px; height: 5px; border-radius: 50%; }

.gw-done-fleck:nth-child(1)  { left: 6%;  animation-delay: 40ms; }
.gw-done-fleck:nth-child(2)  { left: 14%; animation-delay: 220ms; }
.gw-done-fleck:nth-child(3)  { left: 22%; animation-delay: 0ms; }
.gw-done-fleck:nth-child(4)  { left: 30%; animation-delay: 320ms; }
.gw-done-fleck:nth-child(5)  { left: 38%; animation-delay: 120ms; }
.gw-done-fleck:nth-child(6)  { left: 46%; animation-delay: 400ms; }
.gw-done-fleck:nth-child(7)  { left: 54%; animation-delay: 80ms; }
.gw-done-fleck:nth-child(8)  { left: 62%; animation-delay: 300ms; }
.gw-done-fleck:nth-child(9)  { left: 70%; animation-delay: 180ms; }
.gw-done-fleck:nth-child(10) { left: 78%; animation-delay: 440ms; }
.gw-done-fleck:nth-child(11) { left: 86%; animation-delay: 60ms; }
.gw-done-fleck:nth-child(12) { left: 92%; animation-delay: 260ms; }
.gw-done-fleck:nth-child(13) { left: 10%; animation-delay: 500ms; }
.gw-done-fleck:nth-child(14) { left: 66%; animation-delay: 560ms; }

/* Animating top rather than translateY: a percentage translate is a percentage of the
   fleck's own 10px, so it would travel ten pixels and stop. A percentage top is measured
   against the spray, which is the banner - so this fills whatever height the banner ends
   up being, rather than a fixed drop that would stop short once the box grew to match
   the hero beside it. */
@keyframes gw-done-fall {
    0%   { top: -12px; opacity: 0; transform: rotate(0deg); }
    12%  { opacity: 1; }
    100% { top: 100%; opacity: 0; transform: rotate(220deg); }
}

/* ---------- the prize ---------- */

.gw-done-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: var(--wx-radius, 12px);
    background: var(--wx-surface, #1b1b1b);
}

.gw-done-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.gw-done-hero-text {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 26px 16px 14px;
    /* Dark under the words only. A veil over the whole picture dims the prize, which is
       the one thing on this screen worth looking at. */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0) 100%);
}

.gw-done-hero.is-textonly {
    padding: 16px;
}

.gw-done-hero.is-textonly .gw-done-hero-text {
    position: static;
    padding: 0;
    background: none;
}

.gw-done-name {
    margin: 0;
    font-family: var(--wx-font-display, inherit);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.gw-done-hero.is-textonly .gw-done-name {
    color: var(--wx-ink, #fff);
}

.gw-done-prize {
    margin: 2px 0 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.86);
}

.gw-done-hero.is-textonly .gw-done-prize {
    color: var(--wx-muted, #9a9a9a);
}

.gw-done-luck {
    margin: 0;
    padding: 0 2px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--wx-muted, #9a9a9a);
}

.gw-done-luck strong {
    color: var(--wx-ink, #fff);
}

/* The panel underneath is the shared one, and it arrives with its own top margin for
   the detail screen. Here it follows a sentence rather than a form, so it needs less. */
.gw-done .gw-sources {
    margin-top: 4px;
}

/* Desktop web fills the space: the banner and the prize sit side by side rather than
   stacking into a very tall column, and the panel runs full width beneath them. */
@media (min-width: 760px) {
    .gw-done {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 18px;
        align-items: start;
    }

    .gw-done > .wx-nav,
    .gw-done > .gw-done-luck,
    .gw-done > .gw-sources {
        grid-column: 1 / -1;
    }

    /* As tall as the picture beside it, with the number in the middle of that height
       rather than at the top of a short box next to a tall one. align-self rather than
       align-items on the grid, so the back button and the panel below keep sizing to
       their own content. */
    .gw-done-banner,
    .gw-done-hero {
        align-self: stretch;
    }

    .gw-done-banner {
        justify-content: center;
        padding: 34px 18px;
    }

    .gw-done-count {
        font-size: 3.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gw-done-banner,
    .gw-done-added {
        animation: none;
    }

    .gw-done-spray {
        display: none;
    }
}


/* The entry box asking for what entering needs - a phone or email, then age and state -
   in place, before the entries are picked. See GiveawayDetailView. */
.gw-ask { display: flex; flex-direction: column; gap: 8px; }
.gw-ask-title { margin: 0; font-size: 1rem; }
.gw-enter .acct-elig { margin: 0; }

/* ---------- wide: a browser window, from 900px ----------

   GiveawaysScreen Wide, set only by the website. The page scrolls as a whole; the
   cards go two across (three from 1200px) and stack art over words, like a game or a
   post; one giveaway puts the picture, the words, "want more entries" and the rules on
   the left and the entry card beside them, sticky. */
@media (min-width: 900px) {
    /* The page's own frame is the one frame: no second, darker panel inside it. */
    .gw.is-wide { background: none; }

    .gw.is-wide,
    .gw.is-wide .gw-scroll,
    .gw.is-wide .gw-detail { overflow: visible; flex: none; min-height: 0; height: auto; }

    /* On the cards themselves, so the section headings under "All" still span the width
       and keep their groups apart. */
    .gw.is-wide .gw-cards,
    .gw.is-wide .gw-winners {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 18px;
        align-content: start;
    }

    .gw.is-wide .gw-card { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; }
    .gw.is-wide .gw-card-media { grid-row: auto; aspect-ratio: 16 / 9; min-height: 0; width: 100%; }
    .gw.is-wide .gw-card > :not(.gw-card-media) { padding-left: 12px; padding-right: 12px; }
    .gw.is-wide .gw-card > :last-child { padding-bottom: 12px; }

    /* Each part of one giveaway has its own row, so nothing can land on top of anything
       else. The body's three parts become the grid's own children. */
    .gw.is-wide .gw-detail {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
        grid-template-rows: auto auto auto auto;
        gap: 0 28px;
        align-content: start;
        padding: 0 12px;
    }

    .gw.is-wide .gw-detail > .wx-nav { grid-column: 1 / -1; grid-row: 1; }
    /* The full column: auto margins would shrink it to the picture's own width. */
    .gw.is-wide .gw-detail-media { grid-column: 1; grid-row: 2; width: 100%; max-width: none; margin: 12px 0 0; border-radius: var(--wx-radius, 12px); overflow: hidden; }
    .gw.is-wide .gw-detail-body { display: contents; }

    .gw.is-wide .gw-detail-main,
    .gw.is-wide .gw-detail-side,
    .gw.is-wide .gw-detail-wide { display: flex; flex-direction: column; gap: 14px; }

    .gw.is-wide .gw-detail-main { grid-column: 1; grid-row: 3; padding: 16px 0 8px; }
    .gw.is-wide .gw-detail-side { grid-column: 2; grid-row: 2 / span 3; align-self: start; position: sticky; top: 12px; padding-top: 12px; }
    /* The left column only: the entry card is sticky, and across both columns the rules
       ran underneath it. Beside them it stays in reach while they are read. */
    .gw.is-wide .gw-detail-wide { grid-column: 1; grid-row: 4; padding: 8px 0 28px; }
}

@media (min-width: 1200px) {
    .gw.is-wide .gw-cards,
    .gw.is-wide .gw-winners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}