/* Knock 'Em Down — phone extras (the rest comes from /water/water.css) */
.howto {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 6;
  background: rgba(0,0,0,.65); color: #fff; font-weight: 800; padding: 8px 16px; border-radius: 99px; white-space: nowrap;
  font-size: 1rem; transition: background .2s;
}
.howto.hold { background: rgba(255,122,61,.92); }
.wphone .whud .pill { font-size: .95rem; }

/* ===== TV ===== */
.ktv { height: 100vh; overflow: hidden; background: #0b0816; display: grid; place-items: center; }
.kbooth, .kbooth.booth.has-art {
  position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  background: url(/art/cans/booth-empty.jpg) center / cover no-repeat, #1a0f2e;
}
.kfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.board {
  position: absolute; right: 1.2%; top: 14%; width: 22%; z-index: 6; display: flex; flex-direction: column; gap: .5cqw;
  background: rgba(10, 6, 24, .82); border: .2cqw solid #ffc53d; border-radius: 1.2cqw; padding: .9cqw;
}
.board h3 { margin: 0 0 .2cqw; font-family: 'Fredoka', sans-serif; font-size: 1.4cqw; color: #ffc53d; display: flex; justify-content: space-between; }
.brow { display: grid; grid-template-columns: 1.6cqw 1fr auto; gap: .5cqw; align-items: center; font-weight: 800; font-size: 1.15cqw;
  padding: .3cqw .5cqw; border-radius: .7cqw; background: rgba(255,255,255,.06); transition: background .3s; }
.brow .n { font-family: 'Fredoka', sans-serif; color: #ffc53d; }
.brow .s { font-family: 'Fredoka', sans-serif; font-size: 1.5cqw; }
.brow.flash { background: rgba(255,197,61,.45); }
.brow.off { opacity: .45; }
.stalltag { position: absolute; z-index: 5; transform: translateX(-50%); bottom: 31%; padding: .25cqw .9cqw; border-radius: 99px;
  background: rgba(10,6,24,.85); border: .2cqw solid #ffc53d; font-weight: 800; font-size: 1.15cqw; white-space: nowrap; }
.clock { position: absolute; left: 50%; top: 1.5%; transform: translateX(-50%); z-index: 6; font-family: 'Fredoka', sans-serif;
  font-size: 2.6cqw; font-weight: 700; padding: .2cqw 1.4cqw; border-radius: 1cqw; background: rgba(10,6,24,.82); border: .2cqw solid #ffc53d; }
.clock.low { color: #ff5a5a; animation: pulse .6s infinite; }
.pop { position: absolute; z-index: 9; pointer-events: none; transform: translate(-50%, -50%); animation: popfade 1.2s ease-out forwards; }
@keyframes popfade { 0% { transform: translate(-50%, -30%) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  80% { opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1); opacity: 0; } }
/* a big group (Kita 2026-10-06: up to 50): smaller rows; team rows on top */
#rows.many .brow { padding: .15cqw .5cqw; font-size: .8cqw; }
.brow.team { background: rgba(255,210,61,.18); font-weight: 900; }