/* 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 color 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;
    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; }

/* Filtered - Live, Coming Soon, Finished - there is no "Live now" heading between the
   balance and the list, so the cards followed the balance's own 12px and sat tighter
   than they do under All, where the heading's 18px wins the collapse between them.
   Given the same 18px, every filter starts at the same place. */
.gw-balance + .gw-cards,
.gw-balance + .wx-empty { margin-top: 18px; }

/* ---------- 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;
    /* Six rows: the label, name, prize, timing, your entries and the rules link. Too
       few, and a card showing "N entries in" pushed the rules link into the picture's
       column, under it. */
    grid-template-rows: repeat(6, 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 color. */
.gw-card-rules {
    padding-bottom: 10px;
    font-size: 0.78rem;
    color: var(--wx-muted, #9a9a9a);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Everything but the picture stays in the words' column, however many lines there are. */
.gw-card > :not(.gw-card-media) { grid-column: 2; }

.gw-card-media {
    position: relative;
    grid-column: 1;
    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;
}

/* The label beside a narrow picture: its own line above the name, not over the picture,
   where it hid the prize art's own heading. The wide cards (the website above 900px, below)
   put it back on the picture. */
.gw-card-media .gw-badge { display: none; }
.gw-badge-line { justify-self: start; margin-top: 10px; }
.gw-badge-line + .gw-card-name { padding-top: 4px; }
.gw-age { justify-self: start; margin-top: 10px; }
.gw-age + .gw-card-name { padding-top: 4px; }

.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 {
    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;
}

/* 16:9, the shape prize art is made at: a 16:10 box letterboxed it, and the picture
   sat a strip below the entry card beside it (Frank, 2026-11-10). */
.gw-detail-media {
    aspect-ratio: 16 / 9;
    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; }

/* The Enter button under the amount, the width of the card. */
.gw-enter-btn { width: 100%; }


/* ---------- 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); }

/* The steps and their buttons. One under the other, as they always were - except beside
   the entry card, where the list is on the left and the buttons stack on the right. */
.gw-ways { display: contents; }

.gw-sources.is-beside { border-top: none; padding-top: 0; }

.gw-sources.is-beside .gw-ways {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

@media (max-width: 520px) {
    .gw-sources.is-beside .gw-ways { grid-template-columns: minmax(0, 1fr); }
}

.gw-sources.is-beside .gw-steps { margin: 0; }

.gw-sources.is-beside .gw-steps-actions {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}

/* "Official Rules" in the line, a link that reads as part of the sentence. */
.gw-npn-rules {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.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 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Winners has no balance card between the rail and the list - and no heading - so the
   cards sat on the rail's own 10px and all but touched it. The same 18px the filtered
   lists get below the balance, so every view under the rail starts in one place. */
.gw-rail + .gw-winners,
.gw-rail + .wx-empty,
.gw-rail + .wx-loading { margin-top: 18px; }

.gw-winner {
    display: flex;

    /* Said out loud, because .wx-card sets column and this is a row. Without it the
       align-items below centred the face, the prize and the words down the middle of
       the card - which is how this has looked since it was written. */
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px;
}

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

/* Contained, not covering. A prize photo is a product shot with the thing's name set
   into it, and filling a box with it cuts the name off - the same call the store post
   card makes about an item. */
.gw-winner-shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.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;
}

/* Each piece keeps its own height and the view scrolls. Left to shrink, a phone too short
   for all of it squeezed the banner's number and the prize picture down to slivers. */
.gw-done > * { flex-shrink: 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 color 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;
    }

    /* A winner, given a page's width: the prize on top at a size worth looking at, the
       face and the words beneath it. The same shape as a giveaway card above - media,
       then body - rather than a phone's row stretched to twice its length, which left
       a 56px thumbnail adrift in an empty card.

       Areas rather than order, because the prize image is optional: with no shot the
       first row simply has nothing in it and collapses. */
    .gw.is-wide .gw-winner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "shot shot"
            "face who";
        align-items: center;
        gap: 0;
        padding: 0;
    }

    .gw.is-wide .gw-winner-shot {
        grid-area: shot;
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 0;
        margin-bottom: 12px;
    }

    .gw.is-wide .gw-winner > .wx-badge-wrap { grid-area: face; margin: 0 12px 12px; }

    .gw.is-wide .gw-winner-in { grid-area: who; margin: 0 12px 12px 0; }

    .gw.is-wide .gw-card { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; }
    .gw.is-wide .gw-card-media .gw-badge { display: inline-flex; }
    .gw.is-wide .gw-badge-line { display: none; }
    .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) { grid-column: 1; 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)); }
}

/* ---------- entry packs beside the Enter box ---------- */

.gw-packs { display: grid; gap: 10px; margin-top: 16px; }

.gw-packs-h {
    margin: 0;
    font-family: var(--wx-font-display, inherit);
    font-size: 1rem;
    font-weight: 700;
    color: var(--wx-ink, #fff);
}

.gw-packs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.gw-pack {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: var(--wx-radius, 12px);
    background: var(--wx-surface, #1b1b1b);
    color: var(--wx-ink, #fff);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 120ms ease;
}

.gw-pack:hover { border-color: var(--wx-signal, #d4af37); text-decoration: none; color: var(--wx-ink, #fff); }
.gw-pack.is-inert { cursor: default; }

.gw-pack-n { font-weight: 700; font-size: 0.95rem; }
.gw-pack-price {
    font-family: var(--wx-font-data, ui-monospace, Consolas, monospace);
    font-size: 0.85rem;
    color: var(--wx-coin, #d4af37);
}