/* Prize ladders (event-ladder.js): the Events tab's gold total, See all prizes, the prize art, the event's milestone
   bar in a gold-edged panel, and the Prizes view with its title. No color-mix or :has (Chromium 108). */

/* The Events tab reads EVENTS and then the region's prize total in gold, centred together in the tab's cell. The tab
   button is static, so its hit area (::before) and underline (::after) stretch over the whole cell; the total is only
   a display, so clicks pass through it to the tab. Every tab's cell is at least as wide as what it holds, so the total
   never runs past the Events cell: the tabs share the width evenly while it allows, and the others give way to it on
   phones. */
.noticeboard-header .noticeboard-tabs { grid-template-columns: repeat(4, minmax(max-content, 1fr)); }
.noticeboard-tabs .as-events-tab-group { position: relative; top: 2.3px; display: flex; align-items: center; justify-content: center; }
.noticeboard-tabs .as-events-tab-group > .tab-btn { position: static; flex: 0 0 auto; }
.noticeboard-tabs .as-events-tab-group > .tab-btn::before { content: ""; position: absolute; inset: 0; }
.noticeboard-tabs.streams-rotating > .as-events-tab-group { opacity: 0; pointer-events: none; }
.noticeboard--expanded .noticeboard-tabs.streams-rotating > .as-events-tab-group { opacity: 1; pointer-events: auto; }
/* No fill, no box: a heavy gold number with a small trophy, which shines while the tab is hovered. The number keeps a
   little room on its right for its slant, which the gold (clipped to the text's box) would otherwise cut off. */
/* The site's announcement bar: the amount in Win a share of $X in prizes, in the total's gold with its trophy. */
.season-announcement-prize { color: #d7a84e; white-space: nowrap; }
.season-announcement-prize > svg { width: 1em; height: 1em; margin-right: 3px; vertical-align: -.12em; }
.as-events-tab-total { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; margin: 0 0 0 1px; padding: 4px 2px; color: #d7a84e; pointer-events: none; }
.as-events-tab-total[hidden] { display: none; }
.as-events-tab-total > svg { flex: 0 0 auto; width: 12px; height: 12px; }
.as-events-tab-total > b { padding-right: .15em; font: italic 800 18px/1 PowerBarlow, sans-serif; letter-spacing: .3px; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(105deg, #e2b75c 0, #e2b75c 42%, #fff4d1 50%, #e2b75c 58%, #e2b75c 100%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: background-position .8s ease, filter .3s; }
.as-events-tab-group:hover .as-events-tab-total > b { background-position: 0 0; filter: drop-shadow(0 0 5px rgba(215, 168, 78, .55)); }
@media (prefers-reduced-motion: reduce) { .as-events-tab-total > b { transition: none; } }
@media (max-width: 500px) {
  .noticeboard-tabs .as-events-tab-group > .tab-btn { padding-right: 1px; }
  .as-events-tab-total { gap: 2px; margin: 0; padding: 3px 0; }
  .as-events-tab-total > svg { width: 10px; height: 10px; }
  .as-events-tab-total > b { font-size: 15px; letter-spacing: 0; }
}

/* See all prizes, beside See more under the events: the site's flat gold call to action with black text, 6px shorter
   than See more (events-browser.css) and centred on it (owner's decision 2026-10-22). No resting glow. */
.as-events-see-prizes { display: inline-flex; align-self: center; align-items: center; gap: 6px; box-sizing: border-box; height: 28px; padding: 2px 12px; border: 1px solid var(--primary-color); border-radius: 0; background: var(--primary-color);
  box-shadow: 0 2px 6px #0004; color: #000; font: 800 12px/18px "Montserrat", sans-serif; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; cursor: pointer; pointer-events: auto; transition: filter .15s, box-shadow .15s; }
.as-events-see-prizes[hidden] { display: none; }
.as-events-see-prizes > svg { flex: 0 0 auto; width: 13px; height: 13px; }
.as-events-see-prizes:hover { filter: brightness(1.12); box-shadow: 0 2px 6px #0004, 0 0 12px rgba(215, 168, 78, .6); }
.as-events-see-prizes:focus-visible { outline: 2px solid #f0e6d2; outline-offset: 2px; }
@media (max-width: 500px) { .as-events-see-prizes { padding-inline: 8px; font-size: 11px; letter-spacing: .3px; } }

/* A ladder event's tile tag: its biggest gift card, in gold. */
.as-events-tile-prize.is-ladder { background: var(--primary-color); color: #1e1e1e; box-shadow: 0 0 6px rgba(215, 168, 78, .45); }

/* Prize art, sized by --art-h. Packs scale their 246×350 stage by --pack-scale, which each size sets to --art-h / 350. */
.as-prize-art { position: relative; display: inline-flex; flex: 0 0 auto; max-width: 100%; }
/* Gift cards: the real card art (transparent outside its rounded corners), its value printed where and how the official
   card prints it (event-assets/prizes/README.md). The portrait Riot card stands --art-h tall, the landscape Amazon
   card a little shorter so both read about the same size. */
.as-giftcard { --card-h: var(--art-h); height: var(--card-h); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.as-giftcard[data-brand="riot"] { aspect-ratio: 422 / 605; }
.as-giftcard[data-brand="amazon"] { --card-h: calc(var(--art-h) * .72); aspect-ratio: 450 / 281; }
.as-giftcard > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.as-giftcard-value { position: absolute; display: flex; align-items: flex-start; color: #fff; font-weight: 800; font-family: "Montserrat", sans-serif; font-style: normal; line-height: .8; white-space: nowrap; transform: skewX(-10deg); }
/* Riot: right-aligned at 0.908 of the width, its top at 0.051 of the height; AUD small, tops lined up. */
.as-giftcard[data-brand="riot"] .as-giftcard-value { top: 5.1%; right: 9.2%; gap: calc(var(--card-h) * .004); font-size: max(10px, calc(var(--card-h) * .112)); letter-spacing: -.03em; transform-origin: top right; }
.as-giftcard[data-brand="riot"] .as-giftcard-value > span { font-size: max(6px, .32em); letter-spacing: 0; }
/* Amazon: bottom left, from 0.058 of the width, shadowed to stand off the bright fireworks behind it. */
.as-giftcard[data-brand="amazon"] .as-giftcard-value { left: 5.8%; top: 77%; font-size: max(10px, calc(var(--card-h) * .17)); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); transform-origin: bottom left; }
.as-prize-pack { width: calc(var(--art-h) * .703); height: var(--art-h); }
.as-prize-pack-stage { position: absolute; left: 0; top: 0; width: 246px; height: 350px; transform: scale(var(--pack-scale)); transform-origin: top left; text-align: left; pointer-events: none; }
.as-prize-pack-stage .bp-stage { width: 246px; height: 350px; overflow: visible; }
.as-prize-pack-stage .bp-pack { animation: none !important; }
.as-prize-pack > b { position: absolute; right: calc(var(--art-h) * -.2); bottom: 0; color: #fff; font: italic 800 calc(var(--art-h) * .32)/1 PowerBarlow, sans-serif; text-shadow: 0 1px 3px #000; }
.as-prize-max { flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--art-h); }
.as-prize-max > img { width: calc(var(--art-h) * .5); height: calc(var(--art-h) * .5); object-fit: contain; }
.as-prize-max > b { color: var(--primary-color); font: 400 calc(var(--art-h) * .22)/1 BeauMed, sans-serif; letter-spacing: 2px; text-shadow: 0 0 12px rgba(215, 168, 78, .4); }
.as-prize-max > span { color: #f0e6d2; font: 700 calc(var(--art-h) * .16)/1 "Montserrat", sans-serif; white-space: nowrap; }
/* ×3: one for each player on the winning team. */

/* The milestone bar: a panel in the site's frame language (the gold highlight edge, rounded corners and soft shadow
   of its dropdowns and tables) over a faint gold wash, so it stands out from the rest of the event. Under its heading,
   each rung's prize over a lit gold bar, glowing where it is filled, with a diamond at each rung; the next rung to
   unlock pulses. */
.as-ladder { --art-h: 72px; --pack-scale: .206; margin: 12px 0 14px; padding: 10px 12px 12px; border: 1px solid var(--highlight-color); border-radius: 6px;
  background: linear-gradient(180deg, rgba(215, 168, 78, .1), rgba(255, 255, 255, .02) 60%); box-shadow: 0 5px 15px var(--shadow-color); }
.as-events-panel .as-ladder-grand-who { display: block; margin: -6px auto 8px; padding: 0; border: 0; background: none; color: #c8aa6e; font: 600 12px/1.3 "Montserrat", sans-serif; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.as-events-panel .as-ladder-grand-who:hover { color: #f0e6d2; }
.as-events-panel .as-ladder-heading { margin: 0 0 10px; color: #c8aa6e; font: 700 12px/1.2 "Montserrat", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; }
/* Rungs share the width evenly; the rail runs from the first rung's centre to the last's, under the diamonds. The fill
   grows smoothly when a poll brings a bigger pool (event-ladder.js animateLadder). */
.as-ladder-track { position: relative; }
.as-ladder-rail { position: absolute; left: calc(50% / var(--rungs)); right: calc(50% / var(--rungs)); top: calc(var(--art-h) + 13px); height: 8px; border-radius: 4px; background: #1e2328; box-shadow: inset 0 0 0 1px #3c3a33, inset 0 2px 3px rgba(0, 0, 0, .6); }
.as-ladder-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #785a28, #c8aa6e 55%, #f0e6d2); box-shadow: 0 0 10px rgba(215, 168, 78, .55); transition: width .9s cubic-bezier(.25, .8, .25, 1); }
.as-ladder-rungs { position: relative; display: grid; grid-template-columns: repeat(var(--rungs), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.as-ladder-rung { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.as-ladder-art { display: flex; align-items: flex-end; justify-content: center; max-width: 100%; height: var(--art-h); margin-bottom: 8px; transition: filter .3s; }
.as-ladder-rung:not(.is-lit) .as-ladder-art { filter: grayscale(.85) brightness(.5); }
.as-ladder-rung.is-lit .as-giftcard { filter: drop-shadow(0 0 6px rgba(245, 229, 184, .7)); }
.as-ladder-node { position: relative; z-index: 1; width: 14px; height: 14px; margin: 2px 0; border: 2px solid #5b5a56; background: #1e2328; transform: rotate(45deg); }
.as-ladder-rung.is-lit .as-ladder-node { border-color: var(--primary-color); background: var(--primary-color); box-shadow: 0 0 10px rgba(245, 229, 184, .85); }
.as-ladder-rung.is-next .as-ladder-node { border-color: var(--primary-color); animation: as-ladder-next 1.1s ease-in-out infinite alternate; }
@keyframes as-ladder-next { from { box-shadow: 0 0 0 rgba(215, 168, 78, 0); } to { box-shadow: 0 0 12px rgba(215, 168, 78, .8); } }
/* A rung the pool reached while the event was open lights up once, as the growing fill arrives at it. */
.as-ladder-rung.is-reaching .as-ladder-art { animation: as-ladder-light 1s ease-out .6s backwards; }
.as-ladder-rung.is-reaching .as-ladder-node { animation: as-ladder-reach 1.2s ease-out .6s backwards; }
@keyframes as-ladder-light { from { filter: grayscale(.85) brightness(.5); } 45% { filter: grayscale(0) brightness(1.45); } }
@keyframes as-ladder-reach { from { box-shadow: 0 0 0 rgba(245, 229, 184, 0); } 40% { box-shadow: 0 0 22px 6px rgba(245, 229, 184, .9); } }
@media (prefers-reduced-motion: reduce) {
  .as-ladder-fill { transition: none; }
  .as-ladder-rung.is-next .as-ladder-node, .as-ladder-rung.is-reaching .as-ladder-art, .as-ladder-rung.is-reaching .as-ladder-node { animation: none; }
}
/* What the pool unlocks next (event-ladder.js nextPrize). */
.as-ladder-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin: 12px 0 0; color: #a09b8c; font: 13px/1.4 "Montserrat", sans-serif; text-align: center; }
.as-ladder-next b { color: #f0e6d2; font-weight: 700; }
.as-ladder-at { margin-top: 6px; color: #a09b8c; font: italic 800 17px/1 PowerBarlow, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-ladder-rung.is-lit .as-ladder-at { color: #f0e6d2; }
/* What each rung gives, under the pool it needs: "$30 Riot Points", "1 pack each", "1st place: 3 packs each". */
.as-ladder-who { max-width: 100%; margin-top: 5px; padding: 0 2px; color: #a09b8c; font: 600 11px/1.25 "Montserrat", sans-serif; text-align: center; overflow-wrap: anywhere; }
.as-ladder-who small { display: block; margin-bottom: 1px; color: #c8aa6e; font: 700 9px/1.3 "Montserrat", sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.as-ladder-rung.is-lit .as-ladder-who { color: #f0e6d2; }
/* A gift card rung reached and then outgrown: the grand prize moved up to the next. */
.as-ladder-rung.is-upgraded .as-ladder-art { filter: grayscale(.4) brightness(.7); }
.as-ladder-rung.is-upgraded .as-giftcard { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.as-ladder-rung.is-upgraded .as-ladder-who, .as-ladder-rung.is-upgraded .as-ladder-at { color: #a09b8c; text-decoration: line-through; text-decoration-color: rgba(160, 155, 140, .6); }
@container event-body (max-width: 520px) { .as-ladder { --art-h: 52px; --pack-scale: .149; padding-inline: 6px; } .as-ladder-at { font-size: 15px; } .as-ladder-who { font-size: 10px; } }
@container event-body (max-width: 380px) { .as-ladder { --art-h: 42px; --pack-scale: .12; } }

/* A hidden pool's note on the prize pool line. */
.as-events-panel .as-events-detail-pool > .as-ladder-secret { color: #c8aa6e; font: italic 600 13px/1.3 "Montserrat", sans-serif; letter-spacing: 0; text-transform: none; }

/* The Prizes view. A title leads it: the region's events as a small BeauMed kicker over the total to win,
   the amount in gold PowerBarlow and "to win" in BeauMed gold. Up next: the soonest event's grand prize, big. All
   prizes: every prize once in a grid that wraps, with thin dividers between tiles. Then the invitation to host, in a
   dark gold-bordered box, and Recently won. Each prize stands on a faint gold glow with a soft
   shadow under it. */
/* The panel's own title is for screen readers only: the view's title shows it. The title reaches up beside ×, letting
   clicks through to it. */
.as-events-panel[data-view="prizes"] .as-events-heading { margin: 0; padding: 0; border-bottom: 0; }
.as-events-panel[data-view="prizes"] #as-events-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.as-events-panel[data-view="prizes"] .as-events-close { position: relative; z-index: 1; }
/* The view scrolls, so its scrollbar would push everything off centre: an equal gutter on the left balances it. */
.as-events-panel[data-view="prizes"] { scrollbar-gutter: stable both-edges; }
.as-prizes { --art-h: 100px; --pack-scale: .286; }
.as-prizes-marquee { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: -22px 0 16px; padding: 4px 0 6px; text-align: center; pointer-events: none; }
/* A thin gold rule under $X TO WIN sets the title off from Up next. */
.as-prizes-marquee::after { content: ""; width: min(320px, 70%); height: 1px; margin-top: 8px; background: linear-gradient(90deg, rgba(120, 90, 40, 0), #c8aa6e, rgba(120, 90, 40, 0)); }
.as-prizes-marquee-kicker { color: #a09b8c; font: 400 15px/1 BeauMed, sans-serif; letter-spacing: 3px; margin-right: -3px; text-transform: uppercase; }
/* The gold amount with TO WIN smaller on its baseline. The gold is clipped to the amount's box, so the box reaches past
   the slanted digits on both sides, with margins taking that room back out of the layout. Letter spacing trails the
   last letter, so the kicker and TO WIN give it back to stay centred. */
.as-prizes-marquee-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 10px; max-width: 100%; text-transform: uppercase; }
.as-prizes-marquee-title > b { margin: 0 -.05em 0 -.2em; padding: 0 .2em; font: italic 800 40px/1 PowerBarlow, sans-serif; font-variant-numeric: lining-nums;
  background: linear-gradient(180deg, #f6dc96, #e2b75c 55%, #c8963f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .75)); }
.as-prizes-marquee-title > span { color: var(--primary-color); font: 400 22px/1 BeauMed, sans-serif; letter-spacing: 2px; margin-right: -2px; }
/* Top prizes: each event's grand prize at its top tier, big, side by side, under the gold promise. */
.as-prizes-top { display: flex; flex-direction: column; align-items: center; padding: 0 0 22px; }
.as-events-panel .as-prizes-top > .as-prizes-section-title { margin-bottom: 6px; }
.as-prizes-top-grid { --art-h: 150px; --pack-scale: .429; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 22px 16px; width: 100%; margin: 16px 0 0; padding: 0; list-style: none; }
.as-prizes-top-item, .as-prizes-item { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.as-prizes-top-item { gap: 8px; }
.as-prizes-event { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.as-prizes-event > b { color: #f0e6d2; font: 700 14px/1.2 "Montserrat", sans-serif; overflow-wrap: anywhere; }
.as-prizes-event > span { color: #a09b8c; font: 500 12px/1.3 "Montserrat", sans-serif; }
.as-prizes-top-item .as-prizes-event > b { font-size: 16px; letter-spacing: .3px; }
/* The countdown: a small gold-edged pill. */
.as-prizes-event [data-prize-starts], .as-prizes-when [data-prize-starts] { display: inline-block; padding: 2px 8px; border: 1px solid #785a28; border-radius: 10px; color: #f5e5b8; font: 700 12px/1.2 "Montserrat", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-events-panel .as-prizes-label { margin: 0; color: #f0e6d2; font: 700 14px/1.25 "Montserrat", sans-serif; overflow-wrap: anywhere; }
.as-events-panel .as-prizes-top-item .as-prizes-label { color: #f5e5b8; font: 800 19px/1.15 "Montserrat", sans-serif; }
/* Depth: a soft shadow under each prize, and a faint gold glow on the floor beneath it. */
.as-prizes-art { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; max-width: 100%; height: var(--art-h); margin-bottom: 6px; }
.as-prizes-art::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: calc(var(--art-h) * -.07); width: calc(var(--art-h) * 1.1); max-width: 100%; height: calc(var(--art-h) * .16); transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(215, 168, 78, .34), rgba(215, 168, 78, .1) 60%, rgba(215, 168, 78, 0)); pointer-events: none; }
.as-prizes .as-giftcard { filter: drop-shadow(0 calc(var(--art-h) * .05) calc(var(--art-h) * .06) rgba(0, 0, 0, .55)) drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
/* The grand prize grows with its event's pool: a short gold line under it. */
.as-prizes-tagline { color: #c8aa6e; font: 700 11px/1.2 "Montserrat", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
/* See event: the Arena lobby's hollow gold button. */
.as-prizes-see { margin-top: 2px; padding: 6px 14px; border: 1px solid #c8aa6e; border-radius: 0; background: transparent; color: #f0e6d2; font: 700 11px/1 "Montserrat", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s, box-shadow .15s; }
.as-prizes-see:hover, .as-prizes-see:focus-visible { border-color: #f0e6d2; color: #fff; box-shadow: 0 0 8px rgba(215, 168, 78, .45); }
.as-prizes-top-item .as-prizes-see { margin-top: 2px; padding: 8px 22px; font-size: 12px; }
/* All prizes: as many columns as fit, each tile divided from the one before it. Every tile draws its divider on its
   left, a pixel outside its column, and the grid clips the first column's, so a row never starts with one. */
.as-prizes-all { padding-top: 16px; border-top: 1px solid var(--border-color); }
/* Under each prize, the next event it can be won in: how soon, with See event under it. */
.as-prizes-when { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.as-events-panel .as-prizes-section-title { margin: 0 0 14px; color: var(--primary-color); font: 700 12px/1 "Montserrat", sans-serif; letter-spacing: 3px; text-transform: uppercase; text-align: center; }
.as-prizes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); row-gap: 20px; margin: 0; padding: 0 0 4px; overflow: hidden; list-style: none; }
.as-prizes-item { gap: 8px; margin-left: -1px; padding: 4px 10px 2px; border-left: 1px solid var(--border-color); }
/* Labels sit on the picture, so pictures in a row line up whether a label takes one line or two. */
.as-events-panel .as-prizes-item .as-prizes-label { display: flex; align-items: flex-end; justify-content: center; min-height: 2.5em; }
.as-prizes-empty { margin: 0 0 4px; color: #b5b5b5; text-align: center; }
.as-prizes-note { margin: 16px 0 0; color: #a09b8c; font: 500 12px/1.4 "Montserrat", sans-serif; text-align: center; }
/* Host an event: a pack, the pitch (what you get back first, in gold), and Create event in the site's gold, in a
   dark gold-bordered box. */
.as-prizes-host { --art-h: 64px; --pack-scale: .183; display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 16px 18px; border: 2px solid #785a28; background: #0a1219; }
.as-prizes-host-art { flex: 0 0 auto; display: flex; }
.as-prizes-host-copy { flex: 1 1 auto; min-width: 0; }
.as-events-panel .as-prizes-host-copy > h3 { margin: 0 0 5px; color: #f0e6d2; font: 700 15px/1.25 "Montserrat", sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.as-prizes-host-copy > p { margin: 0; color: #a09b8c; font: 500 12px/1.45 "Montserrat", sans-serif; }
.as-prizes-host-copy > p + p { margin-top: 3px; }
.as-prizes-host-back > b { color: #e2b75c; font-weight: 800; }
.as-prizes-host-create { flex: 0 0 auto; height: 34px; padding: 0 18px; border: 1px solid var(--primary-color); border-radius: 0; background: var(--primary-color); box-shadow: 0 2px 6px #0004, 0 0 8px rgba(215, 168, 78, .35);
  color: #000; font: 800 12px/1 "Montserrat", sans-serif; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: filter .15s, box-shadow .15s; }
.as-prizes-host-create:hover { filter: brightness(1.12); box-shadow: 0 2px 6px #0004, 0 0 12px rgba(215, 168, 78, .6); }
.as-prizes-host-create:focus-visible { outline: 2px solid #f0e6d2; outline-offset: 2px; }
/* Recently won: a gold-framed card per prize won, the gift card's art beside what it was, its event and the winners. */
.as-prizes-recent { margin-top: 18px; }
.as-prizes-wins { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.as-prizes-win { --art-h: 92px; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(215, 168, 78, .6);
  background: linear-gradient(135deg, rgba(215, 168, 78, .2), rgba(20, 20, 20, 0) 60%) #1e1e1e; box-shadow: 0 2px 8px #0006, 0 0 14px rgba(215, 168, 78, .12), inset 0 0 0 1px rgba(255, 230, 170, .05); }
.as-prizes-win-art { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 64px; color: #f0c86e; }
.as-prizes-win-art > svg { width: 48px; height: 48px; filter: drop-shadow(0 0 8px rgba(215, 168, 78, .45)); }
.as-prizes-win-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.as-events-panel .as-prizes-win-copy > h4 { margin: 0; color: #f0c86e; font: 800 18px/1.15 "Montserrat", sans-serif; letter-spacing: .5px; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
.as-events-panel .as-prizes-win-event { max-width: 100%; margin: 2px 0 8px; padding: 0; border: 0; background: none; overflow: hidden; color: #a09b8c; font: 600 11px/1.4 "Montserrat", sans-serif;
  text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.as-events-panel .as-prizes-win-event:hover, .as-events-panel .as-prizes-win-event:focus-visible { color: #f0e6d2; text-decoration: underline; text-underline-offset: 3px; }
.as-prizes-win-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; margin: 0; padding: 0; list-style: none; }
.as-prizes-winner { overflow: hidden; color: #f0e6d2; font: 700 14px/1.3 "Montserrat", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.as-prizes-winner > span { margin-left: 2px; color: #a09b8c; font-size: 12px; font-weight: 500; }
/* Under the pitch, Create event takes the frame's full width. */
@container event-body (max-width: 560px) {
  .as-prizes-host { flex-wrap: wrap; padding: 14px; }
  .as-prizes-host-copy { flex-basis: calc(100% - 80px); }
  .as-prizes-host-create { flex-basis: 100%; }
}
/* Two prizes to a row on a phone. */
@container event-body (max-width: 440px) {
  .as-prizes { --art-h: 84px; --pack-scale: .24; }
  .as-prizes-top-grid { --art-h: 120px; --pack-scale: .343; }
  .as-events-panel .as-prizes-top-item .as-prizes-label { font-size: 16px; }
  .as-prizes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .as-prizes-item { padding-inline: 6px; }
  .as-events-panel .as-prizes-label { font-size: 13px; }
  .as-prizes-marquee-title > b { font-size: 34px; }
  .as-prizes-marquee-kicker { font-size: 13px; }
}

/* A prize's picture opens what the prize is (events.js prize info): a large tooltip with a bigger picture, what it is,
   what it's for and who gets it. */
.as-prize-info-open { display: flex; align-items: flex-end; justify-content: center; max-width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.as-prize-info-open:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; border-radius: 6px; }
.as-prize-info { --art-h: 120px; --pack-scale: .343; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(320px, calc(100vw - 24px));
  padding: 16px 18px; border-color: #785a28; border-radius: 8px; background: #0a1219; white-space: normal; z-index: 20; }
.as-prize-info.is-below::after { bottom: auto; top: -12px; border-top-color: transparent; border-bottom-color: var(--secondary-color); }
.as-prize-info-art { display: flex; align-items: flex-end; justify-content: center; height: var(--art-h); margin-bottom: 4px; }
.as-prize-info h4 { margin: 0; color: var(--primary-color); font: 800 17px/1.2 "Montserrat", sans-serif; }
.as-prize-info p { margin: 0; color: #cdcac0; font: 500 13px/1.5 "Montserrat", sans-serif; }
.as-prize-info ul { align-self: stretch; margin: 0; padding: 0 0 0 20px; color: #cdcac0; font: 500 13px/1.5 "Montserrat", sans-serif; text-align: left; }
.as-prize-info .as-prize-info-who { color: #a09b8c; font-size: 12px; font-style: italic; }