/* Phone buzzer: one huge button in the team colour. No zoom, no text selection,
   no pull-to-refresh, no long-press menus. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body{position:fixed;inset:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{-webkit-appearance:none;appearance:none}

/* team picker */
.pick{height:100%;box-sizing:border-box;padding:max(18px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:auto}
.pick h1{font-family:var(--display);font-size:clamp(26px,8vw,40px);margin:.2em 0 .1em}
.pick .sub{color:var(--muted);margin:0 0 14px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-height:0;grid-auto-rows:minmax(64px,1fr)}
.tile{border:0;border-radius:12px;background:var(--tc);color:var(--ink);font-family:var(--display);font-weight:800;font-size:clamp(18px,5.4vw,26px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:12px;text-align:left;cursor:pointer;overflow:hidden}
.tile small{font-family:var(--body);font-weight:600;font-size:.55em;opacity:.8;letter-spacing:.1em;text-transform:uppercase}
.tile span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tile.taken::after{content:"has a phone";font-family:var(--body);font-size:11px;font-weight:600;opacity:.75;margin-top:2px}
.tile:active{transform:scale(.97)}
.msg{color:var(--bad);min-height:1.2em;margin:10px 0 0}

/* conflict warning */
.conflict{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:rgba(3,9,17,.92);z-index:20}
.conflict .box{background:var(--panel);border:1px solid var(--brass);border-radius:12px;padding:22px;max-width:420px;width:100%;box-sizing:border-box}
.conflict h2{font-family:var(--display);margin:0 0 .4em;font-size:24px;color:var(--brass)}
.conflict p{color:var(--muted);line-height:1.5}
.conflict .big,.conflict .ghost{display:block;width:100%;padding:16px;border-radius:10px;font-size:18px;font-weight:700;margin-top:10px;cursor:pointer}
.conflict .big{background:var(--brass);color:var(--night);border:0}
.conflict .ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}

/* the buzzer pad */
.pad{height:100%;display:grid;grid-template-rows:auto 1fr auto;box-sizing:border-box;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))}
.ptop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:2px 4px 10px}
.tname{font-family:var(--display);font-weight:800;font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tname::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--tc);margin-right:.4em}
.tscore{font-family:var(--display);font-weight:800;font-size:22px;color:var(--brass);font-variant-numeric:tabular-nums}
.pfoot{display:flex;justify-content:space-between;align-items:center;padding-top:10px;color:var(--muted);font-size:12px}
.change{background:none;border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:.5em .8em;font-size:12px}

.buzz{position:relative;width:100%;height:100%;border:0;border-radius:24px;cursor:pointer;touch-action:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;padding:16px;
  background:var(--panel);color:var(--muted);transition:background .15s,transform .08s,box-shadow .2s;outline:none}
.buzz .big{font-family:var(--display);font-weight:800;font-size:clamp(44px,15vw,96px);line-height:.95;letter-spacing:-.02em;text-align:center}
.buzz .small{font-size:clamp(16px,4.6vw,22px);font-weight:600;text-align:center;opacity:.9;line-height:1.3}
.buzz.pressed{transform:scale(.97)}

/* states */
.buzz.s-waiting{background:var(--tc22);color:var(--fg)}
.buzz.s-armed{background:var(--tc);color:var(--ink);animation:armed 0.9s ease-in-out infinite}
@keyframes armed{0%,100%{box-shadow:0 0 0 0 var(--tcGlow);filter:brightness(1)}50%{box-shadow:0 0 0 14px transparent;filter:brightness(1.15)}}
.buzz.s-sent{background:var(--tc);color:var(--ink);filter:brightness(.85)}
.buzz.s-first{background:var(--tc);color:var(--ink);box-shadow:0 0 0 8px #fff inset}
.buzz.s-first .big{animation:pop .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pop{from{transform:scale(.6)}to{transform:none}}
.buzz.s-queued{background:var(--tc55);color:var(--fg)}
.buzz.s-other{background:var(--tc70);color:var(--fg)}
.buzz.s-locked{background:#1a222e;color:#6f7f94}
.buzz.s-early{background:repeating-linear-gradient(45deg,#2a0d0d 0 26px,#451414 26px 52px);color:#ffc9c7;box-shadow:inset 0 0 0 6px var(--bad)}
.buzz.s-offline{background:#1a222e;color:var(--muted)}