/* Impasta on the TV, on top of the shared TV styles. */
body.tv main, body.tv .screen { min-width: 0; }
.imp-screen { flex-direction: column !important; align-items: stretch !important; justify-content: center; gap: 3vh !important; }
.imp-top .lcd { height: 5vh; padding: 0 2vh; font-size: 2vh; border-radius: 1.2vh; margin: 0; justify-content: space-between; max-width: 46vh; }
.imp-top .lcd span:last-child { color: #FFD36B; }
.imp-screen h2 { margin: 0 !important; }
.imp-say { margin: 0; font-size: 3vh; color: var(--soft); max-width: 60vh; }
.imp-say b { color: var(--ink); }
.noodle { width: 16vh; height: 16vh; flex: none; animation: sway 3s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateY(-.6vh); } }

.imp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5vw; align-items: center; align-content: center; min-height: 0; }
.imp-turn { display: grid; gap: 2.6vh; justify-items: start; min-width: 0; }
.imp-turn h2 { font-size: 7vh !important; color: #FFD36B; overflow-wrap: anywhere; }

/* Every player's clues side by side. */
.imp-board { list-style: none; margin: 0; padding: 1.4vh 2.4vh; border-radius: 2.6vh; background: var(--lcd); box-shadow: 0 .6vh 2vh rgba(0,0,0,.6) inset;
  display: grid; gap: .4vh; max-height: 66vh; overflow: hidden; min-width: 0; }
.imp-board li { display: grid; grid-template-columns: 4.2vh minmax(0, 1fr) repeat(var(--laps, 2), minmax(0, 1.2fr)); align-items: center; gap: 1.6vh; padding: 1vh 0;
  border-bottom: 1px solid rgba(125,255,163,.12); color: #DDF7E5; }
.imp-board li:last-child { border-bottom: 0; }
.imp-board li i { width: 4.2vh; height: 4.2vh; border-radius: 50%; background: var(--tint); }
.imp-board li b { font: 600 2.8vh/1.1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-board li span { font: 700 2.8vh/1.1 var(--display); letter-spacing: -.01em; color: #FFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
.imp-board li span.skipped { font: 400 1.8vh/1 var(--pixel); text-transform: uppercase; color: var(--lcd-dim); }
.imp-board li span.empty { height: 3vh; border-radius: .8vh; background: rgba(125,255,163,.06); animation: none; }
.imp-board li.now span.empty:first-of-type, .imp-board li.now span:not(.skipped):not(.empty) ~ span.empty { box-shadow: 0 0 0 1px var(--lcd-ink) inset; }
.imp-board li.now b { color: var(--lcd-ink); }
.imp-board li.away { opacity: .35; }

.imp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2vh; }
.imp-chips li { display: flex; align-items: center; gap: 1vh; padding: .9vh 1.8vh .9vh .9vh; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font: 600 2.4vh/1 var(--body); opacity: .55; }
.imp-chips li i { width: 3.2vh; height: 3.2vh; border-radius: 50%; background: var(--tint); }
.imp-chips li.done { opacity: 1; border-color: var(--lcd-ink); box-shadow: 0 0 1.4vh rgba(125,255,163,.25); }
.imp-chips li.away { opacity: .25; }

.imp-drama { display: grid; justify-items: center; align-content: center; text-align: center; gap: 3vh; }
.imp-drama .noodle { width: 30vh; height: 30vh; animation-duration: 1.2s; }
.imp-drama h2 { font-size: 8vh !important; color: #FFD36B; }

.imp-reveal { display: grid; gap: 2.6vh; justify-items: start; align-content: center; min-width: 0; }
.imp-reveal h2 { font-size: 7vh !important; }
.imp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4vw; width: 100%; }
.imp-dish { padding: 3vh 3.4vh; border-radius: 3vh; color: var(--food-ink); animation: pop .5s cubic-bezier(.2,1.4,.4,1); min-width: 0; }
.imp-dish small { display: block; font: 400 2vh/1.2 var(--pixel); text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.imp-dish b { display: block; margin-top: 1.2vh; font: 800 7vh/1 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.imp-dish.crew { background: #CDEBC9; }
.imp-dish.other { background: #FFD36B; animation-delay: .25s; animation-fill-mode: backwards; }
.imp-tally { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2vh; }
.imp-tally li { display: flex; align-items: center; gap: 1vh; padding: .9vh 1.8vh .9vh .9vh; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font: 600 2.4vh/1 var(--body); }
.imp-tally li i { width: 3.2vh; height: 3.2vh; border-radius: 50%; background: var(--tint); }
.imp-tally li span { font: 400 1.8vh/1 var(--pixel); text-transform: uppercase; color: var(--soft); }
.imp-tally li em { font: 400 2vh/1 var(--pixel); font-style: normal; color: var(--lcd-ink); }
.imp-tally li.imp { border-color: #FFD36B; box-shadow: 0 0 1.6vh rgba(255,211,107,.3); }
.imp-actions { display: flex; gap: 2vh; }

.imp-scores { list-style: none; margin: 0; padding: 2vh; display: grid; gap: 1.4vh; border-radius: 2.4vh; background: var(--lcd); width: min(80vh, 100%); }
.imp-scores li { display: flex; align-items: center; gap: 2vh; font: 600 3.4vh/1 var(--body); color: #DDF7E5; }
.imp-scores li i { width: 5vh; height: 5vh; border-radius: 50%; background: var(--tint); }
.imp-scores li b { flex: 1; }
.imp-scores li span { font: 400 4vh/1 var(--pixel); color: var(--lcd-ink); }
