/* UNLUCKY BETS (bets.html, js/bets.js): parlay idea tickets built from today's games, plus the weird ones. */
.ub { padding: 16px 0 40px; }
.ub-hero { position: relative; margin: 0 -4px 16px; padding: 22px 16px 16px; border-radius: 26px; overflow: hidden; background: radial-gradient(90% 120% at 0 0, rgba(225, 29, 72, .35), transparent 60%), radial-gradient(80% 100% at 100% 100%, rgba(246, 207, 95, .25), transparent 60%), linear-gradient(160deg, #1a0a10, #0b0b0e); border: 1px solid rgba(246, 207, 95, .3); }
.ub-hero::after { content: ''; position: absolute; inset: 0; background: url(../img/reel/r9.jpg) center / cover; opacity: .14; z-index: 0; pointer-events: none; }
.ub-hero > * { position: relative; z-index: 1; }
.ub-hero h1 { margin: 6px 0 6px; font: 900 44px/1 var(--f-serif); color: #fff; }
.ub-hero h1 em { font-style: italic; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ub-hero .lead { margin: 0 0 14px; color: #dcd8cf; }
.ub-ctrl { display: grid; gap: 10px; }
.ub-chips, .ub-stake { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ub-chips button, .ub-stake button { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .35); color: #e9e4d8; font: 800 12.5px var(--f-body); cursor: pointer; transition: transform .13s var(--press); }
.ub-chips button:active, .ub-stake button:active { transform: scale(.94); }
.ub-chips button.on, .ub-stake button.on { color: #221500; background: var(--gold-metal); border-color: transparent; box-shadow: 0 4px 12px rgba(200, 147, 26, .35); }
.ub-stake small { margin-right: 4px; font: 800 10px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ub-empty { grid-column: 1 / -1; padding: 30px 10px; text-align: center; color: var(--mute); border: 1px dashed rgba(255, 255, 255, .15); border-radius: 18px; }
/* a parlay ticket */
.ub-p { --c: #f6cf5f; position: relative; display: grid; gap: 10px; padding: 14px; border-radius: 22px; overflow: hidden; background: linear-gradient(170deg, color-mix(in srgb, var(--c) 22%, #141218), #0b0b0e 70%); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 16px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); animation: ubin .45s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes ubin { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.ub-p::before { content: ''; position: absolute; left: 0; right: 0; top: 64px; border-top: 2px dashed rgba(255, 255, 255, .1); }
.ub-ph { display: flex; align-items: center; gap: 10px; }
.ub-ph > i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-style: normal; font-size: 24px; background: color-mix(in srgb, var(--c) 35%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.ub-ph > div { flex: 1; min-width: 0; display: grid; }
.ub-ph b { font: 800 18px/1.1 var(--f-head); color: #fff; }
.ub-ph small { font: 700 11px var(--f-body); color: var(--mute); letter-spacing: .04em; }
.ub-odds { font: 400 32px/1 'Bebas Neue', var(--f-head); letter-spacing: .03em; color: #f6cf5f; text-shadow: 0 0 14px rgba(246, 207, 95, .55); }
.ub-say { margin: 4px 0 0; font: 500 13px/1.45 var(--f-body); color: #cfcabe; }
.ub-legs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ub-legs li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .06); }
.ub-legs img { flex: none; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.ub-legs span { flex: 1; min-width: 0; display: grid; }
.ub-legs b { font: 800 14px var(--f-head); color: #fff; }
.ub-legs small { font: 600 11px var(--f-body); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-legs em { flex: none; font: 800 12.5px var(--f-body); font-style: normal; color: #9ff5c4; }
.ub-pay { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(100deg, rgba(70, 244, 156, .12), rgba(70, 244, 156, .02)); border: 1px solid rgba(70, 244, 156, .3); }
.ub-pay span { display: grid; }
.ub-pay small { font: 800 9.5px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #9ff5c4; }
.ub-pay b { font: 400 30px/1 'Bebas Neue', var(--f-head); letter-spacing: .03em; color: #9ff5c4; text-shadow: 0 0 12px rgba(70, 244, 156, .5); }
.ub-pay .btn:disabled { filter: saturate(.4); }
/* weird and wonderful */
.ub-weird { margin-top: 26px; }
.ub-wh h2 { margin: 0; font: 900 28px var(--f-serif); color: #fff; }
.ub-wh p { margin: 4px 0 12px; color: var(--mute); font-size: 13.5px; }
.ub-wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.ub-w { display: grid; gap: 4px; padding: 14px; border-radius: 18px; text-decoration: none; color: #fff; background: linear-gradient(160deg, rgba(168, 85, 247, .18), rgba(255, 255, 255, .03)); border: 1px solid rgba(192, 132, 252, .3); transition: transform .15s var(--press), border-color .2s; }
.ub-w:hover { border-color: #c084fc; }
.ub-w:active { transform: scale(.96); }
.ub-w i { font-style: normal; font-size: 28px; }
.ub-w b { font: 800 15px var(--f-head); }
.ub-w small { font: 500 12px/1.35 var(--f-body); color: #cfcabe; }
.ub-w span { margin-top: 4px; font: 400 24px/1 'Bebas Neue', var(--f-head); color: #f6cf5f; }
.ub-w span em { font: 700 9px var(--f-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ub-fine { margin: 20px 0 0; text-align: center; font: 500 12px var(--f-body); color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .ub-p { animation: none; } }