:root {
  --crimson: #bc323f;
  --crimson-dark: #8f2530;
  --ink: #1c1c1e;
  --muted: #8e8e93;
  --line: #ececec;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.round { width: 48px; height: 48px; border-radius: 50%; background: var(--crimson); color: #fff; display: grid; place-items: center; font-size: 24px; transition: background .2s; }
.round:hover { background: var(--crimson-dark); }

/* Session list */
.sessions { max-width: 560px; margin: 0 auto; padding: 8vh 24px; }
.sessions header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6vh; }
.sessions .logo { height: 24px; }
#list { list-style: none; padding: 0; }
#list a { display: flex; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
#list a:hover { color: var(--crimson); }
#list time { flex: 1; }
#list span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Big screen */
.host { height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 4vh; padding: 5vh 6vw; }
.host .logo { height: clamp(18px, 1.8vw, 40px); }
.host h1 { font-size: clamp(28px, 3.4vw, 80px); font-weight: 600; letter-spacing: -.02em; }
.host section { display: none; min-height: 0; }
[data-view=lobby] #lobby, [data-view=result] #result { display: grid; }
#lobby { grid-template-columns: auto 1fr; gap: 5vw; align-items: start; }
#qr { width: min(44vh, 32vw); display: block; }
#lobby figcaption { margin-top: 2vh; text-align: center; color: var(--muted); font-size: clamp(14px, 1.4vw, 32px); }
.counts { display: flex; gap: 3vw; font-size: clamp(32px, 4vw, 96px); font-weight: 600; font-variant-numeric: tabular-nums; }
.counts span { display: flex; align-items: center; gap: .3em; }
.counts svg { width: .75em; height: .75em; color: var(--crimson); }
#names { list-style: none; padding: 0; margin-top: 4vh; display: flex; flex-wrap: wrap; align-content: start; gap: .6em; font-size: clamp(14px, 1.5vw, 36px); }
#names li { padding: .35em .9em; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); animation: pop .3s ease-out; }
#names li.answered { color: var(--ink); border-color: var(--crimson); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
#result { grid-template-rows: auto minmax(0, 1fr); gap: 2vh; }
#legend { list-style: none; padding: 0; display: flex; justify-content: flex-end; gap: 2.5vw; min-height: 1.5em; font-size: clamp(14px, 1.3vw, 30px); }
#legend li { display: flex; align-items: center; gap: .5em; }
#legend i { width: 1.6em; height: 4px; border-radius: 2px; }
#chart { width: 100%; height: 100%; overflow: visible; font-variant-numeric: tabular-nums; }
#chart .grid { stroke: var(--line); }
#chart .base { stroke: #c7c7cc; }
#chart text { fill: var(--muted); font-size: 20px; }
#chart .peak { fill: var(--ink); font-size: 26px; font-weight: 600; }
.host nav { position: fixed; right: 2vw; bottom: 2vh; display: flex; opacity: .25; transition: opacity .2s; }
.host nav:hover { opacity: 1; }
.host nav button { width: 48px; height: 48px; display: grid; place-items: center; font-size: 24px; }

/* Participant phone */
.join { min-height: 100svh; max-width: 480px; margin: 0 auto; padding: 96px 24px 24px; display: flex; flex-direction: column; justify-content: center; }
.join .mark { position: absolute; top: 24px; left: 24px; width: 36px; }
.join h1 { font-size: 24px; font-weight: 600; margin-bottom: 24px; }
.field { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--line); transition: border-color .2s; }
.field:focus-within { border-color: var(--ink); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 28px; padding: 12px 0; appearance: textfield; }
.field input::-webkit-inner-spin-button, .field input::-webkit-outer-spin-button { -webkit-appearance: none; }
.error .field { border-color: var(--crimson); animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#done { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 120px; font-weight: 700; }
#done svg { width: 56px; height: 56px; color: var(--crimson); }