/* Everything is sized in rem, and rem follows the screen width, so the layout scales from laptop to TV. */
html { font-size: clamp(13px, 1.1vw, 34px); }
body.host { overflow: hidden; display: flex; flex-direction: column; height: 100vh; }

/* ---------- Corner controls, sitting on the sweater band ---------- */
.corner {
  position: fixed;
  z-index: 5;
  top: calc(var(--band-h, 64px) / 2);
  right: 1rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.corner .btn { width: 2.4rem; height: 2.4rem; min-height: 0; background: var(--navy-deep); border: 0; color: var(--muted); }
.corner .btn:hover { color: var(--snow); }
.preview-tag { background: var(--gold); color: var(--ink); font-weight: 800; font-stretch: 75%; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0.7rem; }

.screen { position: relative; z-index: 1; flex: 1; min-height: 0; padding: 2.6rem 3.8rem 2.2rem; }
.empty { margin: 0; display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-family: var(--display); font-size: 2rem; }
.locked { height: 100%; display: grid; place-content: center; justify-items: center; gap: 1.2rem; text-align: center; }
.locked img { width: 5rem; }
.locked h1 { font-size: 6rem; }
.locked p { font-size: 1.3rem; margin: 0; }

/* ---------- Lobby ---------- */
.lobby { height: 100%; display: grid; grid-template-columns: 30rem minmax(0, 1fr); gap: 4.2rem; }
.join { display: flex; flex-direction: column; gap: 2.4rem; align-items: flex-start; justify-content: center; }
.logo { display: flex; align-items: center; gap: 1.1rem; }
.logo img { width: 4.6rem; height: 4.6rem; }
.logo h1 { font-size: 6.1rem; line-height: 0.86; }
.qr-frame { --bulb-pad: 1.24rem; }
.qr { width: min(21rem, 42vh); aspect-ratio: 1; background: #fff; padding: 0.6rem; }
.qr svg, .mini-qr svg { width: 100%; height: 100%; display: block; }
.join-url { margin: 0; font-weight: 700; font-size: 1.33rem; color: var(--muted); }

.lobby-main { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2rem; }
.plates {
  max-height: 34vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 0.76rem;
  align-content: start;
  padding-top: 0.9rem;
}
.plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.66rem;
  padding: 0.66rem 0.76rem;
  border: 0;
  border-bottom: 0.24rem solid var(--red);
  background: var(--navy-2);
  color: var(--snow);
  text-align: left;
  cursor: pointer;
  transition: opacity 0.4s, background 0.2s;
}
.plate.enter { animation: drop-in 0.6s var(--ease-land) both; }
.plate.enter .avatar { animation: land 0.5s 0.15s var(--ease-land) both; }
.plate:has(.avatar[data-swatch='gold']) { border-bottom-color: var(--gold); }
.plate:has(.avatar[data-swatch='snow']) { border-bottom-color: var(--snow); }
.plate:has(.avatar[data-swatch='pine']) { border-bottom-color: #4F9C7B; }
.plate:hover { background: #22336A; }
.plate .avatar { --size: 2.85rem; }
.plate .name { flex: 1; min-width: 0; font-weight: 800; font-size: 1.24rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-count { flex: none; display: flex; align-items: center; gap: 0.25rem; font-weight: 800; font-size: 0.95rem; color: var(--muted); }
.crown { position: absolute; top: -0.75rem; left: 0.45rem; color: var(--gold); }
.crown .icon { width: 1.45rem; height: 1.45rem; fill: var(--navy); }
.away { opacity: 0.45; }

.cats { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.48rem; }
.cat-list { display: flex; flex-direction: column; gap: 0.48rem; }
.cat {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto 4.6rem 2.2rem;
  align-items: center;
  gap: 0.95rem;
  padding: 0.6rem 0.95rem;
  background: var(--navy-2);
  transition: opacity 0.4s;
}
.cat.enter { animation: rise-in 0.5s var(--ease-out) both; }
.cat.thin { opacity: 0.55; }
.cat .num { font-family: var(--display); font-size: 1.9rem; color: var(--gold); }
.cat-name { font-weight: 800; font-size: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-meta { display: flex; align-items: center; gap: 0.3rem; color: var(--muted); font-weight: 800; font-size: 1.1rem; }
.rounds { font-family: var(--display); font-size: 1.7rem; color: var(--muted); text-align: right; }
.cat-remove { width: 2.2rem; height: 2.2rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.cat-remove:hover { color: var(--red); background: var(--snow); }
.cat-add { display: flex; flex-wrap: wrap; gap: 0.57rem; margin-top: 0.4rem; }
.cat-add input {
  width: 15rem;
  height: 2.66rem;
  padding: 0 0.95rem;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--snow);
  font-size: 1.14rem;
  outline: none;
}
.cat-add input::placeholder { color: var(--muted); }
.cat-add input:focus { border-color: var(--gold); }
.presets { display: flex; flex-wrap: wrap; gap: 0.57rem; }
.preset {
  height: 2.66rem;
  padding: 0 1rem;
  border: 2px dashed var(--line);
  background: transparent;
  color: var(--snow);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.preset:hover { border-color: var(--gold); }

.lobby-controls { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.settings { display: flex; gap: 0.57rem; }
.setting { height: 3rem; display: flex; align-items: center; gap: 0.3rem; padding-left: 0.85rem; background: var(--navy-2); color: var(--gold); cursor: pointer; }
.setting .icon { width: 1.3rem; height: 1.3rem; }
.setting select {
  appearance: none;
  height: 100%;
  padding: 0 0.85rem 0 0.4rem;
  border: 0;
  background: transparent;
  color: var(--snow);
  font-family: var(--display);
  font-size: 1.55rem;
  cursor: pointer;
}
.setting select:focus-visible { outline: 3px solid var(--gold); }
.setting option { background: var(--navy); color: var(--snow); font-family: var(--font); }
.start { height: 5.1rem; padding: 0 3.4rem; font-size: 2.85rem; }

/* ---------- Round (voting + reveal) ---------- */
.round { height: 100%; display: flex; flex-direction: column; gap: 1.6rem; }
.round-head { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 11rem; align-items: center; gap: 1rem; }
.round-num { font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--gold); }
.round-num small { font-size: 1.9rem; color: var(--muted); }
.cat-title { text-align: center; font-size: 4.9rem; line-height: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.round .cat-title { animation: rise-in 0.6s var(--ease-out) both; }
.reveal .cat-title { animation: none; }
.head-side { display: flex; justify-content: flex-end; }
.mini-qr { width: 4.4rem; height: 4.4rem; background: #fff; padding: 0.2rem; }
.next { width: 5.7rem; height: 4.6rem; }
.next .icon { width: 2.3rem; height: 2.3rem; }

.matchup { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 11.4rem minmax(0, 1fr); align-items: stretch; padding-top: 1.1rem; }
.middle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.76rem; }
.card { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 1.9rem; transition: opacity 0.7s var(--ease-out); }
.round:not(.reveal) .card { animation: from-left 0.8s 0.1s var(--ease-out) both; }
.round:not(.reveal) .card.side-b { animation-name: from-right; animation-delay: 0.18s; }
.round:not(.reveal) .side-tag { animation: land 0.45s 0.55s var(--ease-land) both; }
.round:not(.reveal) .item-name { animation: rise-in 0.6s 0.5s var(--ease-out) both; }
@keyframes from-left { from { opacity: 0; transform: translateX(-4rem); } }
@keyframes from-right { from { opacity: 0; transform: translateX(4rem); } }
.card .marquee { min-height: 0; display: flex; }
.pic { flex: 1; min-height: 0; position: relative; z-index: 2; overflow: hidden; background: #E6E4EE; transition: filter 0.8s var(--ease-out); }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic.photo { background: #05091A; }
.pic.photo .backdrop { position: absolute; inset: 0; filter: blur(1.5rem) brightness(0.6); transform: scale(1.2); }
.pic.photo .main { position: relative; object-fit: contain; }
.side-tag {
  position: absolute;
  z-index: 3;
  left: -0.4rem;
  bottom: -1.6rem;
  padding: 0.38rem 1.24rem 0.28rem;
  background: var(--red);
  color: var(--snow);
  font-family: var(--display);
  font-size: 2.66rem;
  line-height: 1;
}
.side-b .side-tag { left: auto; right: -0.4rem; background: var(--gold); color: var(--ink); }
.count:empty { display: none; }
.count { position: absolute; z-index: 3; right: 1rem; bottom: -2rem; font-family: var(--display); font-size: 4.6rem; line-height: 1; font-variant-numeric: tabular-nums; animation: rise-in 0.4s 0.2s var(--ease-out) both; text-shadow: 0 0.2rem 0 var(--navy-deep); }
.side-b .count { right: auto; left: 1rem; }
.winner .count { color: var(--gold); }
.stamp { position: absolute; z-index: 4; right: -1.9rem; top: -2.3rem; width: 5.7rem; animation: stamp 0.42s 1.15s var(--ease-in) both; filter: drop-shadow(0 0.3rem 0 rgba(5, 9, 26, 0.5)); }
.winner .marquee { animation: thud 0.3s 1.5s var(--ease-out); }
.side-a .stamp { right: auto; left: -1.9rem; }
.loser { opacity: 0.4; transition-delay: 0.2s; }
.loser .pic { filter: grayscale(1) brightness(0.8); transition-delay: 0.2s; }

.card-foot { min-height: 3rem; display: flex; align-items: center; gap: 1.2rem; padding-left: 4.8rem; }
.side-b .card-foot { flex-direction: row-reverse; padding: 0 4.8rem 0 0; text-align: right; }
.item-name { font-size: 3rem; line-height: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.byline:empty { display: none; }
.byline { position: relative; display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.15rem; animation: rise-in 0.5s 1.4s var(--ease-out) both; }
.byline .avatar { --size: 2.3rem; }
.byline .plus { position: static; }
.voters:empty { display: none; }
.voters { display: flex; flex-wrap: wrap; gap: 0.57rem; padding-left: 4.8rem; }
.side-b .voters { justify-content: flex-end; padding: 0 4.8rem 0 0; }
.voter { position: relative; }
.voter.enter { animation: drop-in 0.5s var(--ease-land) both; animation-delay: calc(0.35s + var(--n) * 0.06s); }
.voter .avatar { --size: 2.66rem; }
.voter .plus { position: absolute; top: -0.5rem; right: -0.6rem; }
.plus { background: var(--gold); color: var(--ink); font-weight: 900; font-size: 0.76rem; padding: 0.05rem 0.3rem; animation: land 0.4s 1.6s var(--ease-land) both; }

.timer { position: relative; width: 9.5rem; height: 9.5rem; animation: land 0.6s 0.35s var(--ease-land) both; }
.timer svg { width: 100%; height: 100%; display: block; }
.timer .disc { fill: var(--gold); transition: fill 0.3s; }
.timer .ring { fill: none; stroke: var(--navy-deep); stroke-width: 12; stroke-dasharray: 1; transform: rotate(-90deg); transform-origin: center; }
#timer-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 5.1rem; line-height: 1; color: var(--ink); }
.timer.urgent .disc { fill: var(--red); }
#timer-num.tick { animation: tick 0.45s var(--ease-out); }
.timer.urgent #timer-num { color: var(--snow); }
.vs { font-family: var(--display); font-size: 2.1rem; color: var(--muted); letter-spacing: 0.06em; animation: fade-in 0.6s 0.6s both; }
.verdict { padding: 0.4rem 0.9rem; background: var(--snow); color: var(--ink); font-family: var(--display); font-size: 2.2rem; text-transform: uppercase; text-align: center; transform: rotate(-4deg); animation: land 0.45s 0.9s var(--ease-land) both; }


.round-foot { display: flex; align-items: center; gap: 1.2rem; min-height: 3rem; }
.reveal .round-foot { padding-top: 1rem; border-top: 2px solid rgba(244, 241, 234, 0.14); }
.tally { flex: none; font-family: var(--display); font-size: 2.1rem; color: var(--muted); }
.tally b { font-weight: 400; color: var(--gold); }
.strip { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.48rem; }
.chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.48rem;
  max-width: 14rem;
  padding: 0.28rem 0.76rem 0.28rem 0.28rem;
  background: var(--navy-2);
  color: var(--muted);
  transition: background 0.3s, color 0.3s, opacity 0.3s;
}
.chip .avatar { --size: 1.9rem; }
.chip .name { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.voted { background: var(--snow); color: var(--ink); }
.chip.voted .avatar { box-shadow: 0 0 0 2px var(--ink); }
.chip.voted .icon { animation: land 0.35s var(--ease-land) both; }
.chip.enter { animation: rise-in 0.45s var(--ease-out) both; animation-delay: calc(var(--n) * 0.03s); }
.strip li.enter { animation: rise-in 0.45s var(--ease-out) both; animation-delay: calc(var(--n) * 0.04s); }
.chip.score { color: var(--snow); }
.chip .pts { margin-left: auto; font-family: var(--display); font-size: 1.33rem; color: var(--gold); }
.chip .rank { color: var(--muted); font-size: 0.9rem; font-weight: 800; }
.chip .plus { position: absolute; top: -0.6rem; right: -0.4rem; }

/* ---------- Final ---------- */
.final { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.podium { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2rem; }
.step { position: relative; width: 13rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; animation: rise 0.9s var(--ease-out) both; }
.step .avatar { --size: 7rem; }
.step .name { max-width: 100%; font-weight: 800; font-size: 1.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step .pts { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--gold); }
.step .block {
  width: 100%;
  margin-top: 0.4rem;
  display: grid;
  place-items: start center;
  padding-top: 0.8rem;
  font-family: var(--display);
  font-size: 4rem;
  line-height: 1;
  background: var(--navy-2);
}
.step.p1 { animation-delay: 0.9s; }
.step.p1 .avatar { --size: 9rem; box-shadow: 0 0 0 0.3rem var(--navy), 0 0 0 0.55rem var(--gold); }
.step.p1 .block { height: 10rem; background: var(--red); }
.block { position: relative; overflow: hidden; }
.block-band { display: block; align-self: start; width: 100%; margin: -0.8rem 0 0.6rem; background-repeat: repeat-x; }
.step:not(.p1) .block-band { display: none; }
.step.p2 { animation-delay: 0.5s; }
.step.p2 .block { height: 6.5rem; }
.step.p3 { animation-delay: 0.1s; }
.step.p3 .block { height: 4.5rem; }
.winner-star { position: absolute; top: -2.4rem; right: 0.4rem; width: 4.4rem; z-index: 1; animation: stamp 0.42s 1.8s var(--ease-in) both; }
@keyframes rise { from { transform: translateY(6rem); opacity: 0; } }

.rest { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.48rem; max-width: 80rem; }
.actions { display: flex; align-items: center; gap: 1rem; }
.btn.big { height: 4rem; padding: 0 2.4rem; font-size: 2rem; }
.actions .btn:not(.primary) { height: 4rem; padding: 0 1.8rem; font-size: 1.2rem; }