/* Special prizes (event-prize.js): the prize table's top row with its weighted wheel, the results' spin button, the
   spin dialog and the tile tag. Riot Points read in Riot's red; the wheel is SVG; no color-mix (Chromium 108). */
:root { --riot-red: #eb0029; }

/* The prize table's top row: set apart from the placings by a red edge and a faint red wash. */
.as-prize-row { border-bottom: 1px solid var(--border-color); border-left: 3px solid var(--riot-red); background: linear-gradient(90deg, rgba(235, 0, 41, .14), rgba(235, 0, 41, .03) 60%); }
/* A grand prize the pool unlocked or upgraded while the event was open (event-ladder.js animateLadder) arrives once,
   after the bar has grown to it. */
.as-prize-row.is-arriving { animation: as-prize-arrive .8s ease-out .6s backwards; }
@keyframes as-prize-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .as-prize-row.is-arriving { animation: none; } }
/* Two lines: SPECIAL PRIZE above, then the prize with "Who wins this?" on the right. The right end stays clear of
   Devil Teemo peeking over the table's corner. */
.as-prize-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 12px; min-height: 58px; padding: 8px 52px 8px 14px; }
.as-prize-head > .as-prize-kicker { grid-column: 1 / -1; }
.as-prize-kicker { flex: 0 0 auto; color: #f0f0f0; font: 700 11px/1.2 "Montserrat", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.as-prize-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.as-prize-amount { color: #fff; font: 800 30px/1 "Montserrat", sans-serif; }
.as-prize-rp { color: var(--riot-red); font: 900 15px/1 "Montserrat", sans-serif; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
/* "Who wins this?" on the right, with a small yellow triangle that turns when the wheel is open. */
.as-prize-who { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 4px 2px; border: 0; background: none; color: #ddd; font: 600 13px "Montserrat", sans-serif; white-space: nowrap; cursor: pointer; }
.as-prize-who:hover, .as-prize-who:focus-visible { color: #fff; }
.as-prize-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--primary-color); transition: transform .15s; }
.as-prize-row.is-open .as-prize-caret { transform: rotate(180deg); }
.as-prize-wheel-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 14px 18px; }
.as-prize-wheel-panel > b { color: #fff; font: 800 16px/1.2 "Montserrat", sans-serif; }
.as-prize-wheel-panel > .as-prize-help { max-width: 360px; margin: -4px 0 0; color: #ddd; font: 500 13px/1.45 "Montserrat", sans-serif; text-align: center; }

/* The wheel: a pointer at the top over the SVG disc. Before the event it is a button that only says it spins after. */
.as-prize-wheel { position: relative; display: block; width: 200px; height: 200px; }
.as-prize-wheel-tap { display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.as-prize-wheel-tap:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }
.as-prize-early { margin: -4px 0 0; color: var(--primary-color); font: 700 13px/1.3 "Montserrat", sans-serif; animation: as-prize-early 3s ease-in forwards; }
@keyframes as-prize-early { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
/* Each placing's chance, under the wheel, with its slice's colour. */
.as-prize-chances { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.as-prize-chances > span { color: #aaa; font: 600 11px/1 "Montserrat", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.as-prize-chances > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.as-prize-chances li { display: inline-flex; align-items: center; gap: 5px; color: #ddd; font: 600 13px/1.2 "Montserrat", sans-serif; }
.as-prize-chances li > i { width: 9px; height: 9px; border-radius: 2px; }
.as-prize-chances li > b { color: #fff; font-weight: 800; }
.as-prize-wheel.is-large { width: min(260px, 70vw); height: min(260px, 70vw); margin: 10px auto 4px; }
.as-prize-disc { position: absolute; inset: 0; display: block; }
/* A spin (event-prize.js prizeResultRow) turns from the top to where it lands, the inline transform. Its length and how
   far in it is are set inline, so a redraw while it turns carries it on from the same point. */
@keyframes as-prize-spin { from { transform: rotate(0deg); } }
.as-prize-disc.is-turning { animation: as-prize-spin 4.5s cubic-bezier(.12, .7, .16, 1) both; }
.as-prize-disc svg { display: block; width: 100%; height: 100%; }
.as-prize-disc path { stroke: #151515; stroke-width: 1.5; }
.as-prize-disc text { font: 800 14px "Montserrat", sans-serif; text-anchor: middle; dominant-baseline: central; }
.as-prize-rim { fill: none; stroke: #d7a84e; stroke-width: 3; }
.as-prize-hub { fill: #1e1e1e; stroke: #d7a84e; stroke-width: 2; }
.as-prize-pointer { position: absolute; top: -8px; left: 50%; z-index: 1; width: 0; height: 0; margin-left: -10px; border: 10px solid transparent; border-top: 18px solid #fff; }
.as-prize-wheel.is-large .as-prize-pointer { top: -10px; margin-left: -13px; border-width: 13px; border-top-width: 24px; }

/* On the results the prize row stands alone, under the place line, and opens to spin in place. */
.as-prize-row.is-standalone { margin: 12px 0 0; border: 1px solid var(--border-color); border-left: 3px solid var(--riot-red); border-radius: 6px; }
.as-prize-row.is-standalone .as-prize-head { padding-right: 14px; }
/* The wheel turns inside its row; its square corners never push the panel wider. */
.as-prize-wheel-panel { overflow: hidden; }
.as-prize-result { text-align: center; }
.as-prize-result > b { display: block; color: #fff; font: 700 18px/1.3 "Montserrat", sans-serif; }
.as-prize-result > b.as-prize-congrats { color: var(--primary-color); font-size: 24px; }
.as-prize-result p { margin: 4px 0 10px; color: #ddd; }
.as-prize-code { display: flex; justify-content: center; align-items: center; gap: 8px; }
.as-prize-code code { padding: 6px 10px; border: 1px dashed var(--primary-color); border-radius: 4px; color: #fff; font: 600 15px/1 monospace; letter-spacing: 1px; user-select: all; }
.as-prize-code a { text-decoration: none; }

/* The tile's tag, in the BONUS tab's spot; a tile with a special prize shows it instead of BONUS. */
.as-events-tile-prize { position: absolute; z-index: 2; top: 0; right: 8px; height: 15px; padding: 0 6px; border-radius: 3px; background: var(--secondary-color); color: #fff; font: 800 10px/15px "Montserrat", sans-serif; letter-spacing: .04em; white-space: nowrap; pointer-events: none; }

@media (max-width: 480px) {
  .as-prize-head { gap: 2px 10px; }
  .as-prize-amount { font-size: 26px; }
}
/* The results' Spin the wheel: full width, gold, with an arrow either side nudging in towards it. */
.as-prize-spin-call { display: flex; align-items: center; justify-content: center; gap: 14px; width: calc(100% - 28px); margin: 2px 14px 14px; padding: 12px; border: 2px solid var(--primary-color); border-radius: 6px;
  background: rgba(215, 168, 78, .12); color: #fff; font: 800 17px/1 "Montserrat", sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.as-prize-spin-call:hover, .as-prize-spin-call:focus-visible { background: rgba(215, 168, 78, .24); }
.as-prize-arrow { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid var(--primary-color); animation: as-prize-nudge 1.2s ease-in-out infinite; }
.as-prize-arrow.is-right { border-left: 0; border-right: 12px solid var(--primary-color); animation-name: as-prize-nudge-left; }
@keyframes as-prize-nudge { 50% { transform: translateX(4px); } }
@keyframes as-prize-nudge-left { 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .as-prize-arrow { animation: none; } }
.as-prize-wheel-panel .as-prize-close { margin-top: 4px; }