/* Banker of the Day (livewire/banker). Plain CSS: beta's Tailwind build only ships classes already in use. */
.bk { width: 0; min-width: 100%; border-radius: 1.25rem; background: #fff; border: 1px solid #ececec; overflow: hidden; }
.bk * { box-sizing: border-box; }

.bk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; color: #1a1200; background: transparent; border-bottom: 1px solid #efe2c4; }
.bk-head-title { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.bk-head-icon { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: .875rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #2a1c00; background: linear-gradient(135deg, #f5c451, #B27900); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.bk-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.2; color: #1a1200; }
.bk-head p { margin: .125rem 0 0; font-size: .75rem; color: #8a5e00; }
.bk-head-side { display: flex; align-items: center; gap: .625rem; }
.bk-combo { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.bk-combo small { font-size: .625rem; text-transform: uppercase; letter-spacing: .08em; color: #8a5e00; }
.bk-combo strong { font-size: 1.125rem; font-weight: 800; color: #B27900; }
.bk-all { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem .875rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; color: #2a1c00 !important; background: linear-gradient(135deg, #f5c451, #B27900); text-decoration: none !important; white-space: nowrap; }
.bk-all:hover { filter: brightness(1.08); }

.bk-grid { display: grid; gap: .875rem; padding: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .bk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bk-card { position: relative; display: flex; flex-direction: column; gap: .75rem; min-width: 0; padding: .875rem; border-radius: 1rem; background: linear-gradient(180deg, #FFFCF5, #fff 45%); border: 1px solid #f0e4c8; transition: border-color .2s, box-shadow .2s, transform .2s; }
.bk-card:hover { border-color: #B27900; box-shadow: 0 10px 24px rgba(178, 121, 0, .16); transform: translateY(-2px); }
.bk-card.is-won { border-color: #9be3bb; background: linear-gradient(180deg, #F1FBF5, #fff 45%); }
.bk-card.is-lost { opacity: .85; }

.bk-league { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: #8a5e00; min-width: 0; }
.bk-league > i { color: #B27900; }
.bk-league > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-league b { color: #3E2A00; }
.bk-badge { flex-shrink: 0; font-style: normal; font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .1875rem .5rem; border-radius: 9999px; color: #f5c451; background: #3E2A00; }
.bk-badge.is-won { color: #fff; background: #14AE5C; }
.bk-badge.is-lost { color: #fff; background: #9CA3AF; }
.bk-badge.is-void { color: #fff; background: #6b7280; }

.bk-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; color: inherit !important; text-decoration: none !important; }
.bk-team { display: flex; flex-direction: column; align-items: center; gap: .375rem; min-width: 0; text-align: center; }
.bk-team img, .bk-avatar { width: 2.75rem; height: 2.75rem; flex-shrink: 0; object-fit: contain; }
.bk-avatar { border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #F3EBD9; color: #8a5e00; font-size: .8125rem; font-weight: 800; }
.bk-team-name { width: 100%; font-size: .8125rem; font-weight: 700; color: #1E1E1E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.bk-match:hover .bk-team-name { color: #B27900; }
.bk-center { display: flex; flex-direction: column; align-items: center; padding: .375rem .625rem; border-radius: .75rem; background: #F7F2E6; }
.bk-center strong { font-size: 1rem; font-weight: 800; color: #1E1E1E; white-space: nowrap; }
.bk-center small { font-size: .5625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a5e00; }

.bk-pick { display: flex; align-items: center; gap: .5rem; padding: .5rem; border-radius: .875rem; background: #F3F3F3; }
.bk-tip, .bk-odd { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: .375rem .625rem; border-radius: .625rem; }
.bk-tip { flex: 1; background: linear-gradient(135deg, #f5c451, #B27900); color: #2a1c00; }
.bk-odd { background: #3E2A00; color: #f5c451; align-items: center; min-width: 4rem; }
.bk-tip small, .bk-odd small { font-size: .5625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.bk-tip strong { font-size: .9375rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-odd strong { font-size: .9375rem; font-weight: 800; }
.bk-pick.is-locked .bk-tip strong, .bk-pick.is-locked .bk-odd strong { letter-spacing: .02em; }
.bk-pick.is-locked .bk-tip strong i, .bk-pick.is-locked .bk-odd strong i { margin-right: .125rem; }
a.bk-pick.is-locked { text-decoration: none !important; cursor: pointer; transition: filter .15s; }
a.bk-pick.is-locked:hover { filter: brightness(1.05); }
.bk-unlock { display: flex; align-items: center; justify-content: center; gap: .375rem; padding: .5rem; border-radius: .75rem; background: #3E2A00; font-size: .75rem; font-weight: 700; color: #f5c451 !important; text-decoration: none !important; }
.bk-unlock:hover { background: #2a1c00; }
.is-won .bk-tip { background: #14AE5C; color: #fff; }
.is-lost .bk-tip { background: #9CA3AF; color: #fff; }
.is-void .bk-tip { background: #6b7280; color: #fff; }

.bk-ring { --p: 0; position: relative; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 9999px; background: conic-gradient(#14AE5C calc(var(--p) * 1%), #e5e7eb 0); display: flex; align-items: center; justify-content: center; }
.bk-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 9999px; background: #fff; }
.bk-ring span { position: relative; font-size: .6875rem; font-weight: 800; color: #1E1E1E; }

.bk-more { display: flex; align-items: center; justify-content: center; gap: .375rem; margin-top: auto; padding: .5rem; border-radius: .75rem; border: 1px dashed #e0c88f; font-size: .75rem; font-weight: 700; color: #8a5e00 !important; text-decoration: none !important; }
.bk-more:hover { background: #FBF3DF; border-style: solid; }

.bk-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; color: #6b7280; font-size: .875rem; }
.bk-empty i { font-size: 2rem; color: #B27900; }
.bk-empty p { margin: 0; max-width: 28rem; }

@media (max-width: 640px) {
    .bk-head { padding: .875rem; }
    .bk-head h2 { font-size: 1.0625rem; }
    .bk-head-side { width: 100%; justify-content: space-between; }
    .bk-combo { align-items: flex-start; }
    .bk-grid { padding: .75rem; }
}