/* Welcome PIN gate and Who's playing? screens. */
.gate-page, .who-page { min-height: 100dvh; }
.gate-wrap, .who-wrap { max-width: 1080px; }

.gate-head { padding-bottom: 8px; }
.gate-page .lia-hero { width: min(132px, 34vw); margin-bottom: 10px; }
.gate-page .page-head h1 { font-size: clamp(36px, 6.5vw, 60px); }
.gate-page .lede { margin-top: 8px; font-size: 18px; }

.gate-card {
  max-width: 420px; margin: 0 auto;
  background: var(--card); border-radius: 24px;
  padding: 18px 18px 20px;
  box-shadow: 0 8px 24px rgba(42, 30, 20, .12);
  border-top: 6px solid var(--gold);
}

.pin-dots { display: flex; justify-content: center; gap: 10px; min-height: 22px; margin: 2px 0 8px; }
.pin-dots i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--ink); background: transparent; display: block;
}
.pin-dots i.on { background: var(--ink); }
.gate-msg { min-height: 1.3em; margin: 0 0 10px; text-align: center; font-weight: 700; color: var(--muted); font-size: 16px; }
.gate-msg.err { color: #b42318; }

.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.keypad button {
  min-height: 64px; border-radius: 16px; cursor: pointer;
  font: 800 26px var(--font-body); color: var(--ink);
  background: var(--cream); border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--line); touch-action: manipulation;
}
.keypad button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.keypad button.key-alt { font-size: 24px; background: #fff; }
.keypad button.key-go {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: var(--gold-3); box-shadow: 0 3px 0 var(--gold-3); font-size: 20px;
}

/* Who's playing */
.who-page .lia-hero { width: min(120px, 30vw); margin-bottom: 8px; }
.who-page .page-head { padding-bottom: 12px; }
.who-page .page-head h1 { font-size: clamp(32px, 6vw, 52px); }
.who-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin: 0 auto 18px; padding: 0; list-style: none;
  max-width: 640px;
}
.who-grid > li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.who-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--card); border: 3px solid var(--line); border-radius: 22px;
  padding: 16px 12px 14px; min-height: 180px; cursor: pointer;
  font: inherit; color: inherit; box-shadow: 0 6px 16px rgba(42, 30, 20, .08);
  touch-action: manipulation;
}
.who-tile:hover, .who-tile:focus-visible { border-color: var(--gold-3); transform: translateY(-2px); }
.who-tile .pname { font-weight: 800; font-size: 20px; text-align: center; }
.who-tile .tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.who-edit {
  margin-top: 0; background: none; border: 0; color: var(--sky-deep);
  font: 700 15px var(--font-body); cursor: pointer; min-height: 40px; min-width: 48px;
}
.who-page .footer a { color: var(--sky-deep); font-weight: 800; text-decoration: none; }
.who-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0 16px; }
.who-actions .btn { min-width: 180px; }

.avatar-pick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.avatar-pick button {
  width: 56px; height: 56px; padding: 0; border: 3px solid transparent;
  border-radius: 50%; background: none; cursor: pointer;
}
.avatar-pick button[aria-checked="true"] { border-color: var(--ink); }
.avatar-pick .avatar { width: 50px !important; height: 50px !important; }

.pin-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.pin-row input[type=password], .pin-row input[type=text].pin-in {
  min-height: var(--touch); width: 7.2em; letter-spacing: .28em; text-align: center;
  font: 700 18px var(--font-mono); border-radius: 14px; border: 2px solid var(--line);
  background: #fff; color: var(--ink);
}

.gate-modal {
  position: fixed; inset: 0; width: 100%; height: 100%; min-height: 100dvh;
  z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(42, 30, 20, .58); padding: 16px; backdrop-filter: blur(4px);
}
.gate-modal[hidden] { display: none; }
.gate-modal .modal-card {
  position: relative; background: #fff; border-radius: 24px;
  padding: 24px 20px 20px; max-width: 480px; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border-top: 8px solid var(--lavender); max-height: calc(100dvh - 32px); overflow: auto;
}
.gate-modal h2 { font-family: var(--font-head); font-weight: 400; margin: 0 0 8px; font-size: 28px; }
.gate-modal p { margin: 0 0 14px; color: var(--muted); }
.gate-modal .fields { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.gate-modal label.field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.gate-modal input[type=text] {
  min-height: var(--touch); font: 700 18px var(--font-body); padding: 8px 14px;
  border-radius: 14px; border: 2px solid var(--line);
}
.gate-modal .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

@media (max-width: 760px) {
  .gate-page .lia-hero, .who-page .lia-hero { width: min(110px, 40vw); }
  .keypad button { min-height: 56px; }
  .who-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-width: none; }
}
@media (max-height: 800px) and (min-width: 761px) {
  .gate-page .lia-hero { width: 110px; }
  .keypad button { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }