/* Recruitment rows follow the Live Game table's palette, crests and team headings. */
.as-events-panel[data-view="detail"] .as-events-heading { margin-bottom: 0; padding-bottom: 4px; border-bottom: 0; }
.as-events-panel[data-view="detail"] #as-events-title { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text-color); line-height: 1.2; }
.as-events-panel[data-view="detail"] #as-events-title b { font-size: 19px; font-weight: 700; color: var(--text-color); }
.as-events-panel[data-view="detail"] #as-events-title > span { font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
.as-events-panel[data-view="detail"] .as-events-title-row { min-width: 0; }
.as-events-detail-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 3px 0 12px; }
.as-events-panel .as-events-detail-title h3 { margin: 0; font: 600 20px/1.3 Montserrat, sans-serif; color: var(--text-color); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.as-events-detail-title button { flex-shrink: 0; padding: 4px 7px; }
/* Rules read as the same pills used on the event tiles. */
.as-events-detail-rules { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.as-events-detail-rules > span { padding: 3px 11px; border: 1px solid #4c4c4c; border-radius: 13px; background: #333; color: var(--text-color); font: 500 13px/18px "Montserrat", sans-serif; white-space: nowrap; }
.as-events-panel .as-events-detail-entry { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border-color); }
.as-events-detail-ranks { display: flex; align-items: center; gap: 5px; color: var(--text-color); font: 600 18px/1 "Montserrat", sans-serif; }
.as-events-detail-ranks .rank-crest { display: block; width: 34px; height: 34px; object-fit: contain; }
.as-events-detail-fee { display: flex; align-items: baseline; gap: 8px; color: var(--text-color); font: 600 15px "Montserrat", sans-serif; }
.as-events-detail-fee > b:not(.as-events-power) { color: var(--primary-color); font-weight: 600; }
.as-events-detail-fee .as-events-power { color: var(--primary-color); }
.as-events-detail-pool { display: flex; align-items: baseline; gap: 8px; margin-left: auto; color: var(--text-color); font: 600 15px "Montserrat", sans-serif; }
.as-events-detail-pool > b:not(.as-events-power) { color: #b5b5b5; font-weight: 600; }
/* Section headings follow the site's spaced capitals (Favourites, table headers). */
.as-events-panel .as-events-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.as-events-panel .as-events-section-heading h3 { margin: 0; color: var(--text-color); font: 600 13px/1.4 "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.as-events-section-heading h3 > span { color: #b5b5b5; }
.as-events-section-heading > b:not(.as-events-power) { color: var(--text-color); font: 600 15px "Montserrat", sans-serif; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.as-events-section-heading > span { color: #b5b5b5; font: 600 13px "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.as-events-power { font: italic 800 26px/1 PowerBarlow, sans-serif; font-variant-numeric: tabular-nums; color: #f0f3e8; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.as-events-panel .as-events-roster-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 8px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.as-events-panel .as-events-roster { max-height: none; overflow: visible; }
.as-events-roster .live-game-players-table { table-layout: fixed; width: 100%; border-collapse: collapse; background: rgba(255,255,255,.05); border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
.as-events-roster thead, .as-events-roster .live-game-team-heading { background: var(--semi-transparent-bg); }
.as-events-roster th { padding: 9px 8px; text-align: left; font: 600 11px Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border-color); color: #eee; }
.as-events-roster td { padding: 3px 5px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.as-events-roster thead th:first-child { width: 58px; }
.as-events-roster thead th.as-events-wager-col { width: 174px; }
.as-events-roster thead th:last-child { width: 22px; }
.has-host-controls .as-events-roster thead th:last-child { width: 42px; }
/* Final standings end on the Won column, not the narrow controls column. */
.as-events-standings .as-events-roster thead th.as-events-wager-col:last-child { width: 174px; }
.as-events-roster .rank-cell { width: 40px; text-align: center; }
.as-events-roster .rank-crest { display: block; width: 28px; height: 28px; margin: 0; }
.as-events-roster .live-game-player-row:hover { background: rgba(255,255,255,.08); }
.as-events-roster .current-player { background: rgba(215,168,78,.15); }
.as-events-roster .current-player:hover { background: rgba(215,168,78,.25); }
.as-events-roster .player-info { display: flex; align-items: center; gap: 6px; }
.as-events-roster .as-events-profile { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; background: none; border: 0; border-radius: 6px; cursor: pointer; transition: background-color .3s ease; }
/* Same hover as the Live Game table's profile buttons. */
.as-events-roster .as-events-profile:hover { background: var(--secondary-color); }
.as-events-roster .as-events-profile img { width: 20px; height: 20px; }
.as-events-roster .player-name { font: 400 14px/1.3 Montserrat, sans-serif; overflow-wrap: anywhere; }
.as-events-roster .live-game-team-heading th { border-top: 1px solid var(--border-color); font-size: 12px; text-transform: none; }
.as-events-roster .live-game-team-heading th > div { display: flex; align-items: center; justify-content: space-between; }
/* Final standings: the place under Rank, the team under Player. */
.as-events-roster .as-events-standing th:first-child { font-weight: 700; }
/* A player's rating change from the event game, coloured like the profile's match history, in a column at the
   Player cell's right. */
.as-events-rating-change { margin-left: auto; padding-left: 4px; color: #fff; font: 700 13px/1 Montserrat, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; }
.as-events-rating-change[data-sign="1"] { color: #4caf50; }
.as-events-rating-change[data-sign="-1"] { color: #f44336; }
.as-events-roster-actions { white-space: nowrap; text-align: right; }
.as-events-empty-slot button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 0; background: none; border: 0; color: #bbb; text-align: left; font: 12px Montserrat, sans-serif; cursor: pointer; }
.as-events-empty-slot button:not(:disabled):hover { color: #fff; }
.as-events-slot-plus { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-color); border-radius: 4px; font: 400 24px/1 Montserrat, sans-serif; }
.as-events-empty-slot button:hover .as-events-slot-plus, .as-events-empty-slot button:focus-visible .as-events-slot-plus { border-color: var(--secondary-color); }
.as-events-empty-slot td > span { display: block; padding: 5px 0; color: #888; font-size: 12px; }
.as-events-open-timer { font-size: 16px; }
.as-events-open-timer [data-event-expires] { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-color); }
.as-events-panel .as-events-empty-slot button:disabled { opacity: .5; cursor: default; }
.as-events-panel[data-view="detail"] .as-events-state { margin: 10px 0; padding: 0; border: 0; background: none; }
.as-events-panel[data-view="detail"] .as-events-recruitment-controls { margin: 8px 0; }
.as-events-panel[data-view="detail"] .as-events-actions { flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) { .as-events-roster td { padding-inline: 4px; } }

/* Use the collection's approved card fronts at leaderboard thumbnail scale. */
.as-events-entry-cards { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.as-events-entry-card { display: block; width: 48px; flex: 0 0 48px; padding: 0; border: 0; border-radius: 3px; background: none; color: inherit; }
button.as-events-entry-card { cursor: pointer; }
button.as-events-entry-card:hover { outline: 1px solid var(--primary-color); outline-offset: 1px; }
.as-events-entry-card .tcg-card-slot { width: 100%; }
.as-events-entry-card .tcg-card { pointer-events: none; transform: none; filter: none; transition: none; }
.as-events-entry-card * { animation: none !important; }
.as-events-entry-card .tcg-aura, .as-events-entry-card .tcg-card-meta { display: none; }
.as-events-panel::-webkit-scrollbar { width: 6px; }
.as-events-panel::-webkit-scrollbar-track { background: #292929; border-radius: 3px; }
.as-events-panel::-webkit-scrollbar-thumb { background: var(--secondary-color); border-radius: 3px; }

.as-events-extend-control { display: inline-flex; cursor: help; }
.as-events-extend-control button:disabled { pointer-events: none; }

.as-events-player-icons { display: flex; align-items: center; gap: 3px; }
.as-events-roster .as-events-entry-cell { font-size: 11px; }
.as-events-entry-preview { position: relative; }
.as-events-card-status { display: block; font-size: 12px; }
.as-events-event-controls { margin-top: 12px; }
.as-events-timer-controls { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
.as-events-timer-controls .as-events-open-timer { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.as-events-timer-label { color: #aaa; font: 600 12px "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.as-events-timer-controls .as-events-open-timer [data-event-expires], .as-events-timer-value { color: var(--text-color); font: 700 18px "Montserrat", sans-serif; font-variant-numeric: tabular-nums; }
/* An official event's time, leading the event under its title, as plain text in the timer's style. */
.as-events-official-schedule { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 10px; }
.as-events-official-schedule > span:first-child { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.as-events-official-schedule b { color: var(--text-color); font: 700 16px "Montserrat", sans-serif; }
/* How many plan to play an official event: centred between the time and the button. */
.as-events-event-controls button { padding: 7px 9px; }

.as-events-roster-actions { white-space: normal; }
/* The host's accept (✓) and remove (×): square buttons, stacked at the row's end, tinted green and red. */
.as-events-roster-actions button { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 0 4px auto; padding: 0; border: 1px solid; border-radius: 0; font: 700 16px/1 "Montserrat", sans-serif; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.as-events-roster-actions button:last-child { margin-bottom: 0; }
.as-events-roster-actions [data-accept] { border-color: #4f8a52; background: rgba(76, 175, 80, .16); color: #8fd68f; }
.as-events-roster-actions [data-accept]:hover { border-color: #6fbf72; background: rgba(76, 175, 80, .3); color: #c6f0c6; }
.as-events-roster-actions [data-reinvite] { border-color: #8a7444; background: rgba(200, 160, 70, .14); color: #e8c77a; font-size: 18px; }
.as-events-roster-actions [data-reinvite]:hover { border-color: #c8a046; background: rgba(200, 160, 70, .28); color: #f6e2b0; }
.as-events-roster-actions [data-remove] { border-color: #8a4a44; background: rgba(166, 75, 68, .18); color: #f0a094; font-size: 20px; }
.as-events-roster-actions [data-remove]:hover { border-color: var(--secondary-color); background: rgba(166, 75, 68, .34); color: #ffd0c8; }

.as-events-view-winnings { width: 100%; margin: 6px 0 12px; }
.as-events-prize-pool { padding: 0 0 4px; }
.as-events-section-heading h3 { display: flex; align-items: baseline; gap: 12px; }
.as-events-section-heading .as-events-power { font-size: 24px; letter-spacing: 0; color: var(--primary-color); }
.as-events-prize-places { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
.as-events-prize-place { --place: #8a8a8a; --place-glow: rgba(255,255,255,.03); display: grid; grid-template-columns: 52px 190px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px 8px 11px; border-bottom: 1px solid var(--border-color); border-left: 3px solid var(--place); background: linear-gradient(90deg, var(--place-glow), rgba(255,255,255,.015) 55%); }
/* Podium colours: gold, silver and bronze accents per place (precomputed for Chromium 108). */
.as-events-prize-place[data-place="1"] { --place: #d7a84e; --place-glow: rgba(215,168,78,.16); min-height: 62px; }
.as-events-prize-place[data-place="2"] { --place: #c3c7cf; --place-glow: rgba(195,199,207,.09); }
.as-events-prize-place[data-place="3"] { --place: #b8835a; --place-glow: rgba(184,131,90,.10); }
.as-events-prize-place:last-child { border-bottom: 0; }
.as-events-prize-place > strong { font: 600 22px BeauMed, sans-serif; color: var(--place); }
.as-events-prize-place[data-place="1"] > strong { font-size: 26px; }
.as-events-prize-place[data-place="1"] .as-events-power { font-size: 32px; }
.as-events-prize-place > .as-events-power { font-size: 28px; }
.as-events-prize-amount { display: flex; align-items: baseline; gap: 8px; }
.as-events-prize-amount > span { color: #b5b5b5; font: 500 13px "Montserrat", sans-serif; }
.as-events-prize-share { color: #d0d0d0; font: 600 14px "Montserrat", sans-serif; letter-spacing: .5px; text-transform: uppercase; }
/* Packs and Max side by side, wrapping only when the row is too narrow for both. */
.as-events-prize-extras { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.as-events-prize-plus { color: #b5b5b5; font: 600 18px "Montserrat", sans-serif; }
.as-events-prize-bonus { display: inline-flex; align-items: center; gap: 7px; color: var(--text-color); font: 700 15px "Montserrat", sans-serif; white-space: nowrap; }
/* An upright pack, its 246×350 stage scaled to 25×35. */
.as-events-mini-pack { position: relative; display: block; flex: 0 0 auto; width: 25px; height: 35px; }
.as-events-mini-pack > span { position: absolute; left: 0; top: 0; width: 246px; height: 350px; transform: scale(.1); transform-origin: top left; text-align: left; pointer-events: none; }
.as-events-mini-pack .bp-stage { width: 246px; height: 350px; overflow: visible; }
.as-events-mini-pack .bp-pack { animation: none !important; }
.as-events-max-logo { display: inline-flex; align-items: center; gap: 3px; color: var(--text-color); font: 800 13px "Montserrat", sans-serif; letter-spacing: 1px; }
.as-events-max-logo img { width: 30px; height: 30px; object-fit: contain; }
/* Closing is destructive: outlined in ArenaSweats red, filled once confirming. */
.as-events-danger { padding: 7px 12px; border: 1px solid var(--secondary-color); border-radius: 3px; background: rgba(166,75,68,.15); color: var(--text-color); font: 600 12px "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background-color .15s, color .15s; }
.as-events-danger:hover, .as-events-danger.is-confirming { background: var(--secondary-color); color: #fff; }
.as-events-close-confirm { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.as-events-close-confirm > span { color: var(--text-color); font-weight: 600; }
.as-events-entry-cell .as-events-entry-card { width: 44px; flex-basis: 44px; }
.as-events-entry-cell .as-events-entry-cards { flex-wrap: nowrap; min-height: 62px; }
.as-events-entry-cell .as-events-card-status { position: absolute; top: 20px; font-size: 10px; }
.as-events-more-cards { flex: 0 0 auto; padding: 4px 1px; border: 0; background: none; color: var(--text-color); font: 12px Montserrat,sans-serif; cursor: pointer; }
.as-events-more-cards:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .as-events-roster thead th.as-events-wager-col { width: 140px; }
  .as-events-entry-cell .as-events-entry-card { width: 36px; flex-basis: 36px; }
  .as-events-entry-cell .as-events-entry-cards { gap: 3px; min-height: 49px; }
  .as-events-prize-place { grid-template-columns: 44px 1fr; gap: 6px 8px; padding-inline: 10px; }
  .as-events-prize-extras { grid-column: 2; }
}
.as-events-winnings-tile > b { color: #eee9e1; font-size: 15px; }
.as-events-winnings-tile > span:last-child { margin-top: auto; color: #c96c5c; }

/* Devil Teemo stands behind the folded top-right corner, pointing out diagonally: horns show, hovering reveals his eyes. */
.as-events-panel[data-view="detail"] { overflow-x: hidden; }
.as-events-prize-pool { position: relative; }
.as-events-prize-pool:has(.as-events-teemo-peek) { padding-top: 12px; }
.as-events-teemo-peek { position: absolute; z-index: 0; top: 14px; right: 2px; width: 44px; height: auto; transform: rotate(45deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 3px rgba(220, 35, 35, .35)); transition: transform .3s ease; }
/* Centred on the corner's diagonal. Hovering the table lifts him to show his eyes; hovering him makes him duck. */
.as-events-prize-pool:has(.as-events-prize-places:hover) .as-events-teemo-peek { transform: translate(8px, -8px) rotate(45deg); }
.as-events-prize-pool.is-ducking .as-events-teemo-peek { transform: translate(-26px, 26px) rotate(45deg); }
.as-events-prize-pool:has(.as-events-teemo-peek)::before { content: ''; position: absolute; z-index: 0; top: 4px; right: 0; width: 64px; height: 44px; background: radial-gradient(ellipse 60% 55% at 75% 45%, rgba(215, 35, 35, .22), transparent 75%); filter: blur(4px); pointer-events: none; }
.as-events-teemo-peek ~ .as-events-prize-places { position: relative; z-index: 1; background: #1f1f1f; clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 0 100%); }
.as-events-teemo-peek ~ .as-events-prize-places::after { content: ''; position: absolute; top: 0; right: 0; width: 38px; height: 38px; background: linear-gradient(225deg, transparent 50%, #3f3b3b 50%, #292727 80%); box-shadow: -2px 2px 4px rgba(0,0,0,.4); pointer-events: none; }
/* Entrance: the corner rolls up, then Teemo rises into it. */
.as-events-prize-pool.is-arriving .as-events-prize-places { animation: as-events-corner-fold .45s ease-out .25s backwards; }
.as-events-prize-pool.is-arriving .as-events-prize-places::after { animation: as-events-corner-flap .45s ease-out .25s backwards; }
.as-events-prize-pool.is-arriving::before { animation: as-events-fade-in .6s ease-out .55s backwards; }
.as-events-prize-pool.is-arriving .as-events-teemo-peek { animation: as-events-teemo-rise .9s cubic-bezier(.25, 1.4, .5, 1) .55s backwards; }
@keyframes as-events-corner-fold { from { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 0 100%); } }
@keyframes as-events-corner-flap { from { width: 0; height: 0; } to { width: 38px; height: 38px; } }
@keyframes as-events-fade-in { from { opacity: 0; } }
@keyframes as-events-teemo-rise { from { transform: translate(-24px, 24px) rotate(45deg); } to { transform: rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .as-events-teemo-peek { transition: none; } .as-events-prize-pool.is-arriving *, .as-events-prize-pool.is-arriving::before, .as-events-prize-pool.is-arriving .as-events-prize-places::after { animation: none !important; } }

/* Phase pill at the top right of the event panel: Open → Starting → Live. */
.as-events-panel[data-view="detail"] #as-events-title { flex: 1; }
/* Lobby status: one symbol per competitor; hover explains it. */
.as-events-roster thead th.as-events-status-col { width: 64px; text-align: center; }
.as-events-status-cell { text-align: center; }
.as-events-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; border: 2px solid #5a5a5a; border-radius: 50%; color: #fff; font: 700 15px/1 "Montserrat", sans-serif; cursor: help; vertical-align: middle; }
.as-events-mark[data-mark="wrong"] { border-color: #e2b13c; background: #c99a2e; color: #1c1a17; }
.as-events-mark[data-mark="ready"] { border-color: #4caf50; background: #3d8a41; }
.as-events-roster-count { display: inline-flex; align-items: center; gap: 6px; color: var(--text-color); font: 600 15px "Montserrat", sans-serif; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.as-events-roster-count img { width: 16px; height: 16px; opacity: .85; }

/* Narrow panels: the standings table drops its fixed layout so it fits. */
.as-events-roster-block { container: roster / inline-size; }
@container roster (max-width: 600px) {
  /* Fixed table layout still shares space with hidden columns; automatic layout drops them. */
  .as-events-roster .live-game-players-table { table-layout: auto; }
  .as-events-standings .as-events-roster thead th.as-events-wager-col { width: 150px; }
}
.as-events-local-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 8px 10px; border: 1px dashed #6b6b6b; border-radius: 6px; }
.as-events-local-tools > span { margin-right: 4px; color: #b5b5b5; font: 600 11px "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.as-events-local-tools button { padding: 5px 10px; font-size: 12px; }
/* Narrow standings put the DQ tag under the name rather than squeezing it. */
@container roster (max-width: 600px) {
  .as-events-standings .player-info { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 2px; }
  .as-events-standings .player-info .as-events-dq-tag { grid-column: -2; justify-self: start; }
  .as-events-standings .player-info .as-events-rating-change { grid-column: -2; justify-self: start; margin-left: 0; padding-left: 0; }
}
.as-events-test-finish { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; flex-basis: 100%; padding-top: 8px; border-top: 1px dashed #4a4a4a; }
.as-events-test-finish label { display: flex; align-items: center; gap: 6px; color: #ddd; font: 500 12px "Montserrat", sans-serif; }
.as-events-test-finish select { padding: 3px 6px; color: var(--text-color); background: #222; border: 1px solid var(--border-color); border-radius: 4px; }

/* End of event: your place in big type, coloured like the podium. */
.as-events-place-heading { --place: #8a8a8a; display: flex; align-items: center; gap: 14px; margin: 2px 0 12px; }
.as-events-place-heading[data-place="1"] { --place: #d7a84e; }
.as-events-place-heading[data-place="2"] { --place: #c3c7cf; }
.as-events-place-heading[data-place="3"] { --place: #b8835a; }
.as-events-place-heading strong { color: var(--place); font: 600 44px/1 BeauMed, sans-serif; }
.as-events-place-heading .as-events-dq-tag { font-size: 12px; line-height: 20px; padding: 0 8px; }
/* Claim rewards, under your place: the foot's Event over row, moved up so it needs no scrolling. */
.as-events-event-controls.as-events-claim-controls { margin: 0 0 14px; }
/* The host's row: a Host tag that never shrinks; a long name gives way with an ellipsis instead. */
.as-events-host-tag { flex-shrink: 0; padding: 0 5px; border-radius: 3px; background: rgba(215,168,78,.18); color: var(--primary-color); font: 700 10px/16px "Montserrat", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.as-events-roster .player-info:has(.as-events-host-tag) { min-width: 0; }
.as-events-roster .player-info:has(.as-events-host-tag) .player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Prize pool additions: the roster's table look with two columns, Player and Added, and the button to add. */
.as-events-contributions .as-events-roster thead th:first-child { width: auto; }
/* Added stays narrow, leaving the player's name the room. Its heading and contents share a left edge: where the first
   of up to three cards starts. */
.as-events-contributions .as-events-roster thead th:last-child { width: 180px; padding-left: 5px; }
/* The entry fee and Add to prize pool, right-aligned. A zero basis keeps them on the crests' line; wrapping in reverse
   keeps the entry fee on the first line and moves the button below it when the row is too narrow for both. */
.as-events-entry-end { flex: 1 1 0; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; align-items: center; gap: 8px 16px; }
.as-events-detail-entry > .as-events-detail-pool { margin-left: 0; }
.as-events-entry-end .as-events-contribute { padding: 6px 12px; }
/* Left-aligned lines: packs + Max, then cards with their power last. Max always takes two lines, its duration
   above its logo, so the packs and their count can stand as tall. */
.as-events-added { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 0; }
.as-events-added > .as-events-power { color: var(--primary-color); font-size: 18px; }
.as-events-added-extras { display: flex; align-items: center; gap: 8px; }
.as-events-added-hidden { color: #a09b8c; font: italic 600 13px/1.3 "Montserrat", sans-serif; }
.as-events-added-extras .as-events-prize-bonus { gap: 6px; }
.as-events-added-extras .as-events-prize-bonus > b { font-size: 20px; }
.as-events-added-extras .as-events-mini-pack { width: 32px; height: 46px; }
.as-events-added-extras .as-events-mini-pack > span { transform: scale(.13); }
.as-events-added-extras .as-events-added-max { flex-direction: column; gap: 2px; }
.as-events-added-extras .as-events-added-max > b { font-size: 15px; line-height: 1; }
.as-events-added-max .as-events-max-logo img { width: 22px; height: 22px; }
/* Pending offers: "Awaiting approval" in the wager column opens the offered cards. */
/* The host's action: a gold pill that pulses like the event alerts, so it reads as waiting on them. */
.as-events-review-offer { display: inline-block; padding: 6px 12px; border: 1px solid #c99a2e; border-radius: 3px; background: rgba(201,154,46,.12); color: #f0d48a; font: 600 12px "Montserrat", sans-serif; letter-spacing: .5px; white-space: nowrap; cursor: pointer; animation: as-events-offer-pulse 1.6s ease-in-out infinite alternate; transition: background-color .15s, color .15s; }
.as-events-review-offer:hover { background: rgba(201,154,46,.25); color: #fff; }
@keyframes as-events-offer-pulse { from { box-shadow: 0 0 0 rgba(215,168,78,0); } to { box-shadow: 0 0 14px rgba(215,168,78,.6); } }
/* Everyone else just reads the status. */
.as-events-awaiting { color: #c9b07a; font: 600 12px "Montserrat", sans-serif; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .as-events-review-offer { animation: none; } }
.as-events-offer-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.as-events-offer-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 120px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.as-events-offer-actions button > span { font-size: 15px; font-weight: 700; }
/* Accept matches Reject, in green. */
.as-events-offer-actions [data-offer="accept"] { border-color: #4caf50; background: rgba(76,175,80,.15); color: var(--text-color); }
.as-events-offer-actions [data-offer="accept"]:not(:disabled):hover { background: #3d8a41; color: #fff; filter: none; }
/* Hidden names: tells each player that only the host sees who they are. */
.as-events-roster-note { margin-top: 8px; color: #b6ada7; font: 12px/1.5 "Montserrat", sans-serif; }
.as-events-roster-note p { margin: 0; }
/* Bonus event: one row under the places, in the site gold, for every player whatever their placing. */
.as-events-prize-event-bonus { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 48px; padding: 6px 14px 6px 11px; border-left: 3px solid var(--primary-color); background: linear-gradient(90deg, rgba(215,168,78,.14), rgba(255,255,255,.015) 55%); }
.as-events-prize-event-bonus > strong { color: var(--primary-color); font: 800 12px "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.as-events-prize-event-bonus > span:last-child { color: #b5b5b5; font: 500 13px "Montserrat", sans-serif; }
@media (max-width: 480px) { .as-events-prize-event-bonus { padding-inline: 10px; gap: 4px 8px; } }

/* Variant D, card-forward seats: the competitors as the League client's 18-player Arena lobby (renderRoster).
   Six gold-framed team boxes of three seats, two boxes per row; each seat shows the name with the wagered cards
   under it at a readable size. Flat colours only (no color-mix, Chromium 108). */
.as-lobby { --lobby-gold: #c8aa6e; --lobby-gold-light: #f0e6d2; --lobby-gold-dark: #785a28; --lobby-grey: #a09b8c;
  --lobby-amber: #e2b13c; --lobby-box: #0a1219; --lobby-line: #262c31; --lobby-card: 48px; }
.as-lobby-over { margin-left: 6px; color: var(--lobby-amber); font-size: 11px; letter-spacing: .5px; }

/* Two boxes per row on the event panel, one on a phone. */
.as-lobby-teams { display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.as-lobby-team { min-width: 0; border: 2px solid var(--lobby-gold-dark); background: var(--lobby-box); }
.as-lobby-team-wrap { min-width: 0; }
.as-lobby-team-label { display: block; margin: 0 0 5px 2px; color: var(--lobby-gold); font: 700 11px/1.2 "BeauMed", "Montserrat", sans-serif; letter-spacing: .14em; text-transform: uppercase; }

/* A seat: crest on the left like the client's portrait, name over the wager, status and host controls on the right. */
.as-lobby-seat { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 12px; }
.as-lobby.is-carded .as-lobby-seat { min-height: 104px; }
/* The client's thin rule between seats, inset from the frame. */
.as-lobby-seat + .as-lobby-seat::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; border-top: 1px solid var(--lobby-line); }
.as-lobby-crest { flex: 0 0 36px; display: flex; justify-content: center; }
.as-lobby-crest .rank-crest { width: 36px; height: 36px; }
.as-lobby-unranked, .as-lobby-crest > span { color: var(--lobby-grey); font-size: 14px; }
.as-lobby-seat-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.as-lobby-line { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* The name wraps rather than cuts off; the #tag stays whole. */
.as-lobby-name { min-width: 0; padding: 0; border: 0; background: none; color: var(--lobby-gold-light); font: 700 15px/1.2 "BeauMed", "Montserrat", sans-serif; letter-spacing: .02em; text-align: left; overflow-wrap: anywhere; }
button.as-lobby-name { cursor: pointer; }
button.as-lobby-name:hover .as-lobby-game-name, button.as-lobby-name:focus-visible .as-lobby-game-name { color: #fff; text-decoration: underline; }
.as-lobby-tag { margin-left: 3px; color: var(--lobby-grey); font-weight: 500; white-space: nowrap; }
.as-lobby-seat.is-you .as-lobby-game-name { color: var(--lobby-gold); }
.as-lobby-seat.is-pending .as-lobby-game-name { color: #b8b2a4; }
.as-lobby-crown { flex: 0 0 auto; display: inline-flex; color: var(--lobby-gold); cursor: help; }
.as-lobby-crown svg { width: 15px; height: 12px; }
.as-lobby-reserve { flex: 0 0 auto; padding: 0 5px; border: 1px solid var(--lobby-amber); border-radius: 2px; color: var(--lobby-amber); font: 700 9px/14px "Montserrat", sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: help; }
.as-lobby-seat.is-reserve::before { border-top: 1px dashed #8a6d2a; }

/* The wager: up to three cards, +N for the rest, then the total power. Every state keeps a card-sized first slot so
   seats line up. */
.as-lobby-wager { display: flex; align-items: center; gap: 8px; min-height: calc(var(--lobby-card) * 1.4); }
.as-lobby-wager .as-events-entry-preview { flex: 0 0 auto; }
.as-lobby-wager .as-events-entry-cards { flex-wrap: nowrap; gap: 4px; align-items: stretch; }
.as-lobby-wager .as-events-entry-card { width: var(--lobby-card); flex-basis: var(--lobby-card); }
.as-lobby-wager .as-events-card-status { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--lobby-grey); font-size: 11px; white-space: nowrap; }
.as-lobby-more { flex: 0 0 30px; padding: 0; border: 1px solid #3c3a33; border-radius: 3px; background: #14191d; color: var(--lobby-gold-light); font: 600 12px "Montserrat", sans-serif; cursor: pointer; }
.as-lobby-more:hover, .as-lobby-more:focus-visible { border-color: var(--lobby-gold); }
.as-lobby-power { color: var(--lobby-gold); font: 700 13px "Montserrat", sans-serif; font-variant-numeric: tabular-nums; cursor: help; }
.as-lobby-card-gap { flex: 0 0 var(--lobby-card); height: calc(var(--lobby-card) * 1.4); border: 1px dashed #4a4436; border-radius: 3px; }
.as-lobby-hidden { flex: 0 0 var(--lobby-card); display: block; cursor: help; }
.as-lobby-card-back { display: block; width: 100%; height: auto; border-radius: 3px; }
.as-lobby-note { color: var(--lobby-grey); font: 500 12px "Montserrat", sans-serif; white-space: nowrap; }
.as-lobby-wager .as-events-review-offer { padding: 5px 10px; font-size: 11px; }

/* The host's controls: small round buttons like the client's seat swap. */
.as-lobby-controls { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.as-lobby-control { width: 26px; height: 26px; padding: 0; border: 1px solid var(--lobby-gold-dark); border-radius: 50%; background: #11171c; color: var(--lobby-grey); font: 400 15px/24px "Montserrat", sans-serif; cursor: pointer; }
.as-lobby-control:hover, .as-lobby-control:focus-visible { border-color: var(--lobby-gold); color: var(--lobby-gold-light); }
.as-lobby-control[data-remove]:hover, .as-lobby-control[data-remove]:focus-visible { border-color: #b8584f; color: #ef8a80; }
.as-lobby .as-events-mark { flex: 0 0 24px; width: 24px; height: 24px; font-size: 13px; }
.as-lobby-mark-gap { flex: 0 0 24px; }

/* The client's round gold +. */
.as-lobby-seat.is-empty { justify-content: center; }
.as-lobby-plus { position: relative; width: 50px; height: 50px; padding: 0; border: 2px solid #9a7d48; border-radius: 50%; background: #1e2328; box-shadow: inset 0 0 0 2px #0a1219; cursor: pointer; }
.as-lobby-plus::before, .as-lobby-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: var(--lobby-gold-light); }
.as-lobby-plus::after { transform: rotate(90deg); }
button.as-lobby-plus:hover, button.as-lobby-plus:focus-visible { border-color: var(--lobby-gold); background: #2a3038; }
.as-lobby-plus.is-idle { border-color: #3d3220; background: none; box-shadow: none; cursor: default; }
.as-lobby-plus.is-idle::before, .as-lobby-plus.is-idle::after { background: #5b5a56; }
.as-lobby-reserve-join { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 28px; padding: 0; border: 0; border-top: 1px dashed #4a4436;
  background: none; color: #8f8a7e; font: 600 10px/1 "Montserrat", sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.as-lobby-reserve-join:hover, .as-lobby-reserve-join:focus-visible { background: #12181d; color: var(--lobby-gold-light); }
.as-lobby-reserve-join b { color: var(--lobby-gold); font-size: 14px; font-weight: 400; }

/* Phones: one box per row, slightly smaller cards and crest. */
@container roster (max-width: 420px) {
  .as-lobby-teams { --lobby-card: 44px; }
  .as-lobby-seat { gap: 8px; padding: 8px 10px; }
  .as-lobby.is-carded .as-lobby-seat { min-height: 96px; }
  .as-lobby-crest { flex-basis: 30px; }
  .as-lobby-crest .rank-crest { width: 30px; height: 30px; }
  .as-lobby-name { font-size: 14px; }
}

/* The event's main controls, shaped like the Arena lobby's: a round gold × beside a FIND MATCH-shaped button. The button
   is the client's outline at a fixed size: a short straight top, diagonal sides and a rounded bottom. Its 2px edge is
   the outer fill showing round the inner one (::before), so the edge follows the curve. */
.as-find-match { position: relative; flex: 0 0 auto; width: 210px; height: 48px; padding: 0 0 6px; border: 0; color: #f0e6d2; cursor: pointer;
  background: linear-gradient(180deg, #6fdcf3, #0b8fbe); clip-path: path('M22 0H188L210 30C160 52 50 52 0 30Z'); }
.as-find-match::before { content: ''; position: absolute; left: 2px; top: 2px; width: 206px; height: 44px;
  background: linear-gradient(90deg, #1f8dbb 0%, #0d3b5a 26%, #0a2a42 50%, #0e4466 76%, #2ba2d0 100%); clip-path: path('M21 0H185L206 28C157 49 49 49 0 28Z'); }
.as-find-match > span { position: relative; font: 700 15px/1 "BeauMed", "Montserrat", sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.as-find-match:hover::before, .as-find-match:focus-visible::before { background: linear-gradient(90deg, #2ea6d6 0%, #134f77 26%, #0f3a5a 50%, #155a85 76%, #3cb6e2 100%); }
.as-find-match:disabled { background: #5b5a56; color: #8c8a84; cursor: default; }
.as-find-match:disabled::before { background: #1e2328; }
/* The client's round ×: a thin gold ring with a thin gold cross. */
.as-lobby-leave { position: relative; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 2px solid #c8aa6e; border-radius: 50%; background: #1e2328; cursor: pointer; }
.as-lobby-leave::before, .as-lobby-leave::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: #c8aa6e; transform: rotate(45deg); }
.as-lobby-leave::after { transform: rotate(-45deg); }
.as-lobby-leave:hover, .as-lobby-leave:focus-visible { border-color: #f0e6d2; }
.as-lobby-leave:hover::before, .as-lobby-leave:hover::after, .as-lobby-leave:focus-visible::before, .as-lobby-leave:focus-visible::after { background: #f0e6d2; }
/* The event controls give every button padding; these draw their own shapes. */
.as-events-event-controls .as-find-match { padding: 0 0 6px; }
.as-events-event-controls .as-lobby-leave { padding: 0; }

/* Empty seats are short; boxes side by side stretch to the same height, their empty seats sharing the extra space. */
.as-lobby-teams { align-items: stretch; }
.as-lobby-team-wrap { display: flex; flex-direction: column; }
.as-lobby-team { flex: 1 1 auto; display: flex; flex-direction: column; }
.as-lobby-seat.is-empty, .as-lobby.is-carded .as-lobby-seat.is-empty { flex: 1 1 auto; min-height: 72px; }
/* The client's thin grey lines either side of the button: level with its top edge, then a short diagonal parallel to
   its slanted side, a few pixels out. */
.as-find-match-frame { position: relative; grid-column: 2; display: inline-flex; }
.as-find-match-frame::before, .as-find-match-frame::after { content: ''; position: absolute; top: 0; width: 90px; height: 24px; pointer-events: none;
  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='24'%3E%3Cpath d='M0 .5H90L72.5 24' fill='none' stroke='%235b5a56'/%3E%3C/svg%3E"); }
.as-find-match-frame::before { right: calc(100% - 12px); }
.as-find-match-frame::after { left: calc(100% - 12px); transform: scaleX(-1); }

/* While an event takes sign-ups its controls are one line: the time on the left with the × at that side's end, the main
   button in the exact centre, and the host's +15 min on the right. */
.as-events-event-controls.as-events-recruiting { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.as-events-recruiting-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.as-events-recruiting-left .as-lobby-leave { margin-left: auto; }
.as-events-recruiting-left .as-events-open-timer { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.as-events-recruiting-left .as-events-open-timer [data-event-expires], .as-events-recruiting-left .as-events-timer-value { color: var(--text-color); font: 700 18px "Montserrat", sans-serif; font-variant-numeric: tabular-nums; }
.as-events-recruiting-right { display: flex; justify-content: flex-end; }
/* Phones keep one line: the time, button, × and side lines shrink. */
@media (max-width: 700px) {
  .as-events-event-controls.as-events-recruiting { display: flex; justify-content: space-between; gap: 8px; }
  .as-events-recruiting-left { gap: 6px; }
  .as-events-recruiting-left .as-lobby-leave { margin-left: 0; }
  .as-events-recruiting-left .as-events-open-timer { flex-direction: column; align-items: flex-start; gap: 2px; }
  .as-events-recruiting-left .as-events-timer-label { font-size: 10px; }
  .as-events-recruiting-left .as-events-open-timer [data-event-expires], .as-events-recruiting-left .as-events-timer-value { font-size: 15px; }
  .as-events-recruiting .as-lobby-leave { width: 28px; height: 28px; }
  .as-events-recruiting .as-lobby-leave::before, .as-events-recruiting .as-lobby-leave::after { width: 11px; margin-left: -5.5px; }
  .as-events-recruiting .as-find-match { width: 140px; height: 40px; clip-path: path('M15 0H125L140 24C107 41 33 41 0 24Z'); }
  .as-events-recruiting .as-find-match::before { width: 136px; height: 36px; clip-path: path('M14 0H122L136 22C104 38 32 38 0 22Z'); }
  .as-events-recruiting .as-find-match > span { font-size: 12px; letter-spacing: .06em; }
  .as-events-recruiting .as-find-match-frame::before, .as-events-recruiting .as-find-match-frame::after { width: 34px; }
  .as-events-recruiting-right button { padding: 6px 7px; font-size: 11px; }
}
/* Prize pool, Add to prize pool and the entry stay on one line; the entry keeps to the right. */
.as-events-panel .as-events-detail-entry { flex-wrap: nowrap; }
.as-events-detail-entry > * { flex: 0 0 auto; }
.as-events-detail-entry > .as-events-contribute { padding: 6px 12px; }
.as-events-detail-entry > .as-events-entry-end { flex: 1 1 auto; flex-wrap: nowrap; }
@media (max-width: 600px) {
  .as-events-panel .as-events-detail-entry { gap: 8px 10px; }
  .as-events-detail-entry .as-events-detail-pool, .as-events-detail-entry .as-events-detail-fee { gap: 5px; font-size: 13px; }
  .as-events-detail-entry > .as-events-contribute { padding: 5px 8px; font-size: 11px; }
  .as-events-detail-entry .as-events-detail-ranks .rank-crest { width: 26px; height: 26px; }
}
/* Prize pool reads as the prize table's heading, in the site's spaced capitals. */
.as-events-detail-entry .as-events-detail-pool > span { font: 600 13px/1.4 "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.as-lobby-visible { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--lobby-gold-dark); border-radius: 3px; color: var(--lobby-gold); font: 600 10px/14px "Montserrat", sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: help; }
/* The host's kick ×: large enough to see and hit. */
.as-lobby-control { width: 32px; height: 32px; font-size: 18px; line-height: 30px; }
.as-lobby-control[data-remove] { font-size: 26px; line-height: 28px; }
/* Narrow panels show a countdown as just its MM:SS, without "Closes in". */
@container event-body (max-width: 660px) {
  .as-events-left-countdown .as-events-timer-label { display: none; }
}
/* The event panel never scrolls sideways (a spinning wheel or Devil Teemo's hover nudge could otherwise widen it). */
.as-events-panel { overflow-x: hidden; }
/* The pills keep their usual look under the heading; the prize pool line follows with no divider of its own. */
.as-events-panel .as-events-rules-block ~ .as-events-detail-entry { margin-top: 0; padding-top: 0; border-top: 0; }
/* The rules: one line in a thin ArenaSweats-red frame, RULES in bold red before the usual pills. */
.as-events-panel .as-events-rules-block { margin: 12px 0 14px; padding: 8px 12px; border: 1px solid var(--secondary-color); border-radius: 8px; }
.as-events-panel .as-events-rules-block { display: flex; align-items: flex-start; gap: 10px; }
.as-events-panel .as-events-rules-what { margin: 12px 0 -4px; color: #a09b8c; font: 500 13px/18px "Montserrat", sans-serif; }
.as-events-panel .as-events-rules-block .as-events-detail-rules { flex: 1 1 auto; min-width: 0; margin: 0; }
.as-events-panel .as-events-rules-block .as-events-detail-rules.is-wrapped { justify-content: flex-end; }
/* A little brighter than the site's usual pills, inside the frame. */
.as-events-panel .as-events-rules-block .as-events-detail-rules > span { border-color: #5a5a5a; background: #3e3e3e; }
/* A champion or item rule, spelled out under the Rules box. */
.as-events-panel .as-events-rules-restriction { margin: -6px 0 14px; color: #a09b8c; font: 500 13px/18px "Montserrat", sans-serif; }
.as-events-panel .as-events-rules-title { flex: 0 0 auto; color: var(--secondary-color); font: 800 14px/26px "Montserrat", sans-serif; letter-spacing: 2px; text-transform: uppercase; }
/* The panel's own width (not the window's) decides when the controls go compact: it can be narrow on a wide screen. */
.as-events-panel .as-events-body { container: event-body / inline-size; }
/* The × keeps its place beside the main button. When the left side has no room for the time as well, the time becomes
   the button's second line, as large as its label but not bold. Phones use their own compact line (above). */
.as-find-match { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* The label's font and size in its medium weight, white even on a greyed button. (A span, since the panel styles every small
   as small grey text; this selector also outranks the label's .as-find-match > span.) */
.as-find-match > .as-find-match-time { display: none; position: relative; margin-top: 3px; color: #fff; font: 500 15px/1 "BeauMed", "Montserrat", sans-serif; letter-spacing: .1em; text-transform: none; font-variant-numeric: tabular-nums; }
@media (min-width: 701px) {
  @container event-body (max-width: 440px) {
    .as-events-left-countdown { display: none; }
    .as-find-match > .as-find-match-time { display: block; }
  }
}