/* TeacherTimers — Name Picker page only. */

.picker-main {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 20px;
  padding-top: 10px;
}

/* ---------- Wheel ---------- */

.wheel-area {
  min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.wheel-box { position: relative; flex: 1; min-height: 0; width: 100%; }
#wheel { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }
body.spinning #wheel { cursor: progress; }
#spinBtn { min-width: 200px; font-size: 1.4rem; }

/* ---------- Names panel ---------- */

.names-panel {
  min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  border-radius: 24px;
  background: var(--sheet);
  color: var(--sheet-ink);
  box-shadow: 0 20px 50px -25px rgba(0,0,0,.55);
  overflow: auto;
  transition: opacity .4s;
}
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.names-panel h2, .names-panel h3 { margin: 0; font-weight: 800; }
.names-panel h2 { font-size: 1.15rem; }
.names-panel h3 { font-size: .95rem; }
.count { font-weight: 700; opacity: .6; }
.panel-tools { display: flex; gap: 6px; }
.names-panel .chip { background: rgba(127,127,127,.15); color: var(--sheet-ink); }
.names-panel .chip:hover { background: rgba(127,127,127,.26); }

#names {
  flex: 1 1 180px; min-height: 150px;
  resize: none;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(127,127,127,.3);
  background: rgba(127,127,127,.08);
  color: var(--sheet-ink);
  font: 700 1rem/1.5 var(--ui-font);
  outline: none;
}
#names:focus { box-shadow: 0 0 0 2px var(--accent); }
#names::placeholder { color: var(--sheet-ink); opacity: .45; }

.picked-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.picked-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 140px; overflow: auto; }
.picked-list button {
  border: 0; border-radius: 99px; padding: 5px 10px;
  font: 700 .85rem var(--ui-font);
  background: rgba(127,127,127,.15); color: var(--sheet-ink);
  text-decoration: line-through; text-decoration-color: rgba(127,127,127,.7);
}
.picked-list button:hover { text-decoration: none; background: rgba(127,127,127,.26); }

.privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .82rem; font-weight: 700; opacity: .7; line-height: 1.4; }
.privacy svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* ---------- Reveal ---------- */

.reveal {
  position: fixed; inset: 0; z-index: 45;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}
.reveal[hidden] { display: none; }
.reveal-card {
  max-width: min(92vw, 1100px);
  padding: clamp(20px, 4vmin, 48px) clamp(24px, 6vmin, 72px);
  border-radius: 32px;
  background: var(--bg);
  color: var(--fg);
  text-align: center;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.7), 0 0 0 6px var(--accent);
  animation: pop .55s cubic-bezier(.2, 1.6, .4, 1);
}
.reveal-kicker { font-weight: 800; font-size: clamp(1rem, 2.6vmin, 1.5rem); color: var(--ui); opacity: .85; }
.reveal-name {
  margin: 1vmin 0 3vmin;
  font-family: var(--clock-font);
  font-size: clamp(3rem, 16vmin, 12rem);
  line-height: 1.05;
  text-shadow: var(--clock-shadow);
  overflow-wrap: anywhere;
}
.reveal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@keyframes pop {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- Full screen: just the wheel ---------- */

body.fs .names-panel { display: none; }
body.fs .picker-main { grid-template-columns: 1fr; padding-top: 48px; }
body.fs .controls {
  position: static; transform: none;
  background: transparent; box-shadow: none; padding: 0;
}
body.fs.idle .controls { transform: translateY(12px); }

/* ---------- Phones / narrow screens: stack and let the page scroll ---------- */

@media (max-width: 820px) {
  #stage.picker-stage { height: auto; min-height: 100svh; overflow: visible; }
  .picker-main { grid-template-columns: 1fr; }
  .wheel-box { flex: none; height: min(92vw, 62svh); }
  .names-panel { overflow: visible; }
  #names { min-height: 180px; }
  body.fs .wheel-box { height: min(92vw, 75svh); }
}