/* Pod page: the pod screen plus its join panel. Kept to CSS that iOS 12 Safari
   understands: no inset, dvh, flex gap, aspect-ratio or :is(). */
html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #e8eef6;
  font: 16px/1.4 -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }
.muted { color: #8a97a8; }
.small { font-size: 14px; }

/* ---------- pod screen ---------- */
#pad {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: #000;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#podNum { font-weight: 800; font-size: 40vmin; line-height: 1; color: #1f2937; }
#podSym { font-weight: 800; font-size: 50vmin; line-height: 1; color: rgba(0, 0, 0, 0.45); }
#podMsg { font-weight: 800; font-size: 16vmin; line-height: 1; color: #fff; }
#podMsg.huge { font-size: 40vmin; }
#podStatus {
  position: absolute; left: 0; right: 0; bottom: 16px;
  padding: 0 16px; text-align: center; color: #4b5563; font-size: 14px;
}
/* Sits over the dark pad without blocking it: taps go through to the pad. */
#hint {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1;
  padding: 16px; text-align: center; color: #8a97a8; font-size: 15px;
  pointer-events: none;
}
#hint p { margin: 0 0 6px; }
#hint a { color: #8ab4f8; font-size: 14px; pointer-events: auto; }
#dupe {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: #0b0f14; padding: 24px; text-align: center;
}
#dupe > * { margin: 8px 0; }
.btn {
  -webkit-appearance: none; appearance: none;
  border: 0; border-radius: 12px; padding: 16px 24px;
  font: inherit; font-weight: 600; font-size: 18px;
  background: #22c55e; color: #04130a; text-decoration: none;
}

/* ---------- join panel ---------- */
#join {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3;
  background: #0b0f14; font-size: 17px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#join main { max-width: 480px; margin: 0 auto; padding: 24px 16px 40px; }
#join h1 { font-size: 28px; margin: 8px 0 4px; }
#join p { margin: 0 0 12px; }
#join a { color: #8ab4f8; }
.card { background: #151b23; border: 1px solid #263040; border-radius: 16px; padding: 16px; margin: 16px 0; }
#join label { display: block; font-size: 14px; color: #8a97a8; margin: 12px 0 6px; }
#join label:first-child { margin-top: 0; }
#join input {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 100%; padding: 14px; border-radius: 10px; border: 1px solid #263040;
  background: #0e141b; color: #e8eef6; font: inherit; font-size: 22px; letter-spacing: 2px;
}
#joinBtn {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 100%; margin-top: 20px; border: 0; border-radius: 12px; padding: 16px;
  font: inherit; font-weight: 600; font-size: 18px; background: #22c55e; color: #04130a;
}
#joinBtn:disabled { opacity: 0.4; }
.numbers { margin: 0 -4px 8px; }
.numbers .num {
  -webkit-appearance: none; appearance: none;
  display: inline-block; vertical-align: top; width: 64px; height: 56px; margin: 4px; padding: 0;
  border: 1px solid #263040; border-radius: 12px; background: #0e141b; color: #e8eef6;
  font: inherit; font-size: 22px; font-weight: 700; line-height: 1;
}
.numbers .num span { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: #8a97a8; }
.numbers .num.used { opacity: 0.45; color: #8a97a8; }
.numbers .num.chosen { background: #22c55e; border-color: #22c55e; color: #04130a; }