.match-alert, #alertEdges { --alert-accent: #e9bf72; --alert-other: #b6a1df; --alert-bg: #211d25; }
.match-alert[data-kind="live"], #alertEdges[data-kind="live"] { --alert-accent: #5cebd2; --alert-other: #ff6486; --alert-bg: #181e22; }
.match-alert { position: fixed; z-index: 80; right: 24px; top: 190px; width: 310px; padding: 20px; color: #f2f0ea; background: var(--alert-bg); border: 1px solid color-mix(in srgb, var(--alert-accent) 50%, #333); border-top: 3px solid var(--alert-accent); box-shadow: 0 18px 55px #0008, 0 0 30px color-mix(in srgb, var(--alert-accent) 9%, transparent); transform: translateX(calc(100% + 60px)); opacity: 0; transition: transform .52s cubic-bezier(.16,1,.3,1), opacity .25s, width .5s, padding .5s; }
.match-alert[hidden] { display: none; }
.match-alert.visible { transform: translateX(0); opacity: 1; animation: match-ticket-enter .52s cubic-bezier(.16,1,.3,1); }
@keyframes match-ticket-enter { from { transform: translateX(calc(100% + 60px)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.alert-top { display: flex; justify-content: space-between; align-items: center; color: var(--alert-accent); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.alert-top button { width: 30px; height: 30px; margin: -8px -8px -5px 0; color: #bab4bf; background: transparent; font-size: 22px; }
.alert-headline { display: flex; align-items: center; gap: 10px; margin: 19px 0 17px; }
.alert-headline strong { font: 600 35px/1 'Barlow Condensed'; letter-spacing: -.015em; transition: font-size .5s; }
.open-dot { width: 7px; height: 7px; background: var(--alert-accent); box-shadow: 0 0 12px var(--alert-accent); flex: 0 0 auto; }
.alert-match { padding: 15px 0 20px; border-top: 1px solid #ffffff19; display: grid; grid-template-columns: 1fr; gap: 5px; }
.alert-match strong { font: 600 34px/1.05 'Barlow Condensed'; overflow-wrap: anywhere; transition: font-size .5s; }
.alert-match strong:first-child { color: var(--alert-accent); }
.alert-match strong:last-child { color: var(--alert-other); }
.alert-match > span { color: #9b929e; font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.alert-clock { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.alert-clock > span { font-size: 9px; letter-spacing: .08em; color: #c0b8c4; }
.alert-clock strong { font: 600 32px 'Barlow Condensed'; font-variant-numeric: tabular-nums; color: var(--alert-accent); }
.alert-track { height: 3px; background: #ffffff15; margin: 8px 0 18px; overflow: hidden; }
.alert-track > div { height: 100%; background: var(--alert-accent); transform-origin: left; }
.alert-place { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--alert-accent); color: #141518; font-size: 13px; }
.alert-place:hover { filter: brightness(1.15); }
.alert-place span { font-size: 21px; line-height: 1; }
.alert-place:disabled { opacity: .45; cursor: default; }
.alert-foot { color: #a39ba9; font-size: 9px; letter-spacing: .1em; margin-top: 12px; }
.match-alert.compact { width: 266px; padding: 16px; }
.compact .alert-headline { margin: 15px 0; }
.compact .alert-headline strong { font-size: 26px; }
.compact .alert-match { padding: 12px 0 14px; }
.compact .alert-match strong { font-size: 27px; }
.match-alert.urgent .alert-clock { animation: urgency 1s ease-in-out infinite; }
.match-alert.closing .open-dot { box-shadow: none; background: #aaa; }
#alertEdges { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
#alertEdges i { position: absolute; top: -60%; bottom: auto; width: 4px; height: 55%; background: linear-gradient(transparent, var(--alert-accent), transparent); box-shadow: 0 0 35px 8px color-mix(in srgb, var(--alert-accent) 38%, transparent); opacity: 0; }
#alertEdges i:first-child { left: 0; }
#alertEdges i:last-child { right: 0; --alert-accent: var(--alert-other); }
#alertEdges.sweep i { animation: edge-sweep 1.25s ease-in-out; }
.destination-highlight { animation: destination 1.5s ease-out; }
.match-alert-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes edge-sweep { 0% { top: -55%; opacity: 0; } 20% { opacity: 1; } 75% { opacity: 1; } 100% { top: 110%; opacity: 0; } }
@keyframes urgency { 50% { opacity: .55; } }
@keyframes destination { 0%,35% { outline: 2px solid var(--cyan); outline-offset: 10px; } 100% { outline: 2px solid transparent; outline-offset: 16px; } }

.match-alert-stack { position: fixed; z-index: 80; top: 190px; right: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-height: calc(100dvh - 210px); overflow-y: auto; overflow-x: clip; padding: 0 0 12px 18px; max-width: 100vw; pointer-events: none; }
.match-alert-stack .match-alert { position: relative; top: auto; right: auto; bottom: auto; flex: 0 0 auto; pointer-events: auto; }
.alert-track > div { transition: transform .1s linear; }
@media(min-width: 1851px) { .match-alert-stack { right: max(24px, calc((100vw - 1180px) / 4 - 145px)); } }
@media(max-width: 1850px) { .match-alert-stack { top: auto; bottom: 20px; max-height: calc(100dvh - 40px); } }
@media(max-width: 600px) { .match-alert-stack { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px); } .match-alert, .match-alert.compact { width: min(310px, calc(100vw - 24px)); padding: 16px; } .alert-match strong, .compact .alert-match strong { font-size: 26px; } }
/* Opening/closing motion is intentional for this notification, including reduced-motion systems. */
.alert-sound-settings { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.alert-sound-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-top: 16px; }
.alert-sound-row label { font-size: 15px; }
.alert-sound-row label small { display: block; max-width: 210px; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
#bettingSound { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 10px 0 10px 8px; background: transparent; color: var(--muted); font-size: 10px; }
.sound-switch-track { width: 30px; height: 16px; display: block; border: 1px solid var(--muted); padding: 2px; }
.sound-switch-track::after { content: ''; display: block; width: 10px; height: 10px; background: var(--muted); transition: transform .18s; }
#bettingSound[aria-checked="true"] { color: var(--cyan); }
#bettingSound[aria-checked="true"] .sound-switch-track { border-color: var(--cyan); }
#bettingSound[aria-checked="true"] .sound-switch-track::after { transform: translateX(14px); background: var(--cyan); }
.alert-sound-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
#testBettingSound { padding: 9px 12px; border: 1px solid var(--line); background: var(--ink); color: var(--cyan); }
#testBettingSound:disabled { opacity: .45; cursor: default; }
.alert-sound-actions > span, .sound-device-note { font-size: 11px; color: var(--muted); }
.sound-device-note { margin: 15px 0 0; }
#bettingSoundNotice:empty { display: none; }