/* Picnic Panic on the TV, on top of the shared TV styles. */
.ppt { min-width: 0; flex-direction: column !important; align-items: stretch !important; justify-content: center; gap: 3vh !important; position: relative; }
.ppt-top { display: flex; align-items: center; gap: 2vh; }
.ppt-top .lcd { height: 6vh; padding: 0 2.2vh; font-size: 2.4vh; border-radius: 1.2vh; margin: 0; }
.ppt-top .ppt-clock { font-size: 3.4vh; }
.ppt-top .lcd.warn { color: #FFB199; text-shadow: 0 0 1.4vh rgba(255,140,110,.6); }
.ppt-top .btn { margin-left: auto; height: 6vh; font-size: 2.2vh; padding: 0 3vh; }

/* one card per player; a single row up to four, two rows after that */
.ppt-race { --map: min(44vh, 25vw); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4vh 2vw; }
.ppt-race[style*="--n:5"], .ppt-race[style*="--n:6"], .ppt-race[style*="--n:7"], .ppt-race[style*="--n:8"] { --map: min(24vh, 22vw); }
.ppt-race li { display: grid; gap: 1vh; padding: 1.6vh; border-radius: 2vh; background: var(--panel); border: 1px solid var(--line); min-width: 0;
  width: calc(var(--map) * .75 + 3.2vh); transition: transform .2s ease; }
.ppt-race li.frozen { border-color: #E0452E; box-shadow: 0 0 2.4vh rgba(224,69,46,.35); animation: shake .4s ease; }
.ppt-race li.away { opacity: .4; }
@keyframes shake { 25% { transform: translateX(-.8vh); } 75% { transform: translateX(.8vh); } }
.ppt-name { display: flex; align-items: center; gap: 1vh; margin: 0; font: 600 2.4vh/1.1 var(--body); min-width: 0; }
.ppt-name i { width: 2.8vh; height: 2.8vh; border-radius: 50%; background: var(--tint); flex: none; }
.ppt-name b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ppt-name em { font: 400 1.6vh/1 var(--pixel); font-style: normal; text-transform: uppercase; padding: .6vh 1vh; border-radius: 99px; background: var(--lcd); color: var(--lcd-ink); }
.ppt-race li.frozen em { color: #FFB199; }
.ppt-stats { display: flex; justify-content: space-between; margin: 0; font: 400 1.8vh/1 var(--pixel); text-transform: uppercase; color: var(--soft); }
.ppt-meter { height: 1.2vh; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.ppt-meter u { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--tint); transition: width .3s ease; }

.ppt-map { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .3vh; padding: .6vh; border-radius: 1vh; background: #4A1712; height: var(--map); aspect-ratio: 9 / 12; }
.ppt-map i { border-radius: .3vh; background: #C9584B; }
.ppt-map i:nth-child(even) { background: #B94C40; }
.ppt-map .m-o { background: var(--tint) !important; opacity: 1; }
.ppt-map .m-f { background: #9AA3AF !important; }
.ppt-map .m-x { background: #140C09 !important; box-shadow: 0 0 0 .25vh #FFB199 inset, 0 0 1vh rgba(255,140,110,.8); }
.ppt-map .m-a { background: #2A1A14 !important; }

.ppt-count { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2vh;
  background: rgba(13,15,18,.72); backdrop-filter: blur(4px); border-radius: 3vh; }
.ppt-count p { margin: 0; font: 600 4vh/1 var(--display); }
.ppt-count b { font: 400 30vh/1 var(--pixel); color: var(--lcd-ink); text-shadow: 0 0 4vh rgba(125,255,163,.5); }

.ppt-split { display: flex; align-items: center; gap: 6vw; width: 100%; }
.ppt-left { flex: 1; display: grid; gap: 3vh; justify-items: start; min-width: 0; }
.ppt-left h2 { margin: 0 !important; }
.ppt-tag { height: 5vh; padding: 0 2vh; font-size: 2vh; border-radius: 1.2vh; margin: 0; }
.ppt .bb-scores { width: 100%; }
.ppt .bb-scores small { font: 400 2vh/1 var(--pixel); color: var(--soft); }
.ppt-big .ppt-map { --map: 62vh; height: 62vh; }

/* final and round scores */
.bb-scores { list-style: none; margin: 0; padding: 2vh; display: grid; gap: 1.4vh; border-radius: 2.4vh; background: var(--lcd); max-width: 80vh; }
.bb-scores li { display: flex; align-items: center; gap: 2vh; font: 600 3.4vh/1 var(--body); color: #DDF7E5; }
.bb-scores li i { width: 5vh; height: 5vh; border-radius: 50%; background: var(--tint); flex: none; }
.bb-scores li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-scores li span { font: 400 4vh/1 var(--pixel); color: var(--lcd-ink); min-width: 3ch; text-align: right; }
.ppt-left .btn { justify-self: start; }