/* Breadwinner on the TV, on top of the shared TV styles. Sized in vh so it reads from the couch. */
.bwt { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start; gap: 2.6vh !important; min-width: 0; padding-top: 2vh; }
.bwt-head { display: grid; gap: 1.6vh; }
.bwt-status { height: 6vh; margin: 0; padding: 0 2.4vh; font-size: 2.4vh; border-radius: 1.4vh; justify-content: space-between; }
.bwt-last { margin: 0; font: 700 4.6vh/1.15 var(--display); letter-spacing: -.02em; color: #FFE3A3; min-height: 1.2em; }

.bwt-seats { flex: 1; display: grid; gap: 2vh; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); align-content: start; }
.bwt-seats.n2 { --cols: 2; }
.bwt-seats.n4 { --cols: 4; }
.bwt-seats.n5 { --cols: 5; }
.bwt-seat { min-width: 0; padding: 2vh; border-radius: 2.4vh; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 1.4vh; align-content: start; transition: border-color .2s, box-shadow .2s; }
.bwt-seat.turn { border-color: var(--accent); box-shadow: 0 0 0 .3vh var(--accent), 0 0 4vh rgba(255,90,31,.25); }
.bwt-seat.won { border-color: var(--lcd-ink); box-shadow: 0 0 0 .3vh var(--lcd-ink), 0 0 5vh rgba(125,255,163,.3); }
.bwt-seat.away { opacity: .5; }
.bwt-seat header { display: flex; align-items: center; gap: 1.2vh; min-width: 0; }
.bwt-seat header i { width: 4vh; height: 4vh; border-radius: 50%; background: var(--tint); flex: none; }
.bwt-seat header b { font: 700 3vh/1.1 var(--display); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bwt-seat header span { font: 400 2.4vh/1 var(--pixel); color: var(--lcd-ink); }
.bwt-nums { margin: 0; display: flex; gap: 2.4vh; font: 400 1.8vh/1 var(--pixel); text-transform: uppercase; color: var(--soft); }
.bwt-nums b { font: 700 2.6vh/1 var(--display); color: var(--ink); margin-left: .6vh; }
.bwt-empty { margin: 0; color: var(--soft); font-size: 2vh; }

.bwt-sets { list-style: none; margin: 0; padding: 0; display: grid; gap: .9vh; }
.bwt-sets li { display: flex; flex-wrap: wrap; align-items: center; gap: .6vh 1vh; padding: 1vh 1.3vh; border-radius: 1.4vh; background: rgba(255,255,255,.04); border: 1px solid transparent; min-width: 0; }
.bwt-sets li.full { background: var(--tint); color: var(--food-ink); border-color: var(--deep); }
.bwt-sets .bw-emblem { width: 3.8vh; height: 3.8vh; }
.bwt-sets b { font: 600 2.3vh/1.1 var(--body); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bwt-sets small { font: 400 2vh/1 var(--pixel); opacity: .8; }
.pips { display: flex; gap: .4vh; }
.pips u { width: 1.6vh; height: 1.6vh; border-radius: 50%; border: .2vh solid var(--tint); background: transparent; }
.pips u.on { background: var(--tint); }
.full .pips u { border-color: var(--deep); }
.full .pips u.on { background: var(--deep); }
.bwt-sets em { flex-basis: 100%; font: 400 1.5vh/1 var(--pixel); text-transform: uppercase; font-style: normal; opacity: .75; }

.bwt-over { display: flex; align-items: center; gap: 4vh; flex-wrap: wrap; padding: 2.4vh 3vh; border-radius: 2.4vh; background: var(--lcd); }
.bwt-over h2 { margin: 0 !important; color: var(--lcd-ink); font-size: 5vh !important; flex: 1; min-width: 0; }
.bwt-btns { display: flex; gap: 2vh; }

/* Four or five players: narrower panels, so each truck becomes a small tile, two to a row.
   The emblem and color say which truck it is. */
.bwt-seats.n4 .bwt-sets, .bwt-seats.n5 .bwt-sets { grid-template-columns: 1fr 1fr; gap: .8vh; }
.bwt-seats.n4 .bwt-sets li, .bwt-seats.n5 .bwt-sets li { padding: .8vh; gap: .5vh .6vh; }
.bwt-seats.n4 .bwt-sets b, .bwt-seats.n5 .bwt-sets b { display: none; }
.bwt-seats.n4 .bwt-sets small, .bwt-seats.n5 .bwt-sets small { margin-left: auto; font-size: 1.8vh; }
.bwt-seats.n4 .bwt-sets .pips, .bwt-seats.n5 .bwt-sets .pips { flex-basis: 100%; order: 3; }
.bwt-seats.n4 .bwt-sets em, .bwt-seats.n5 .bwt-sets em { order: 4; font-size: 1.3vh; }
.bwt-seats.n5 .bwt-seat { padding: 1.6vh; }