/* ═══════════════════════════════════════════
   PEEL.CSS — Peel multiplayer module styles
   Depends on: base.css (all tokens)
═══════════════════════════════════════════ */


/* ── 1. PEEL ACCENT OVERRIDE ── */

/*
  Peel uses a warm orange/coral tone so it reads as distinct from the
  Editor (gold) and Game (green) modules, while staying within the
  SpicyBanana dark-surface palette.
*/
#peel-app {
  --peel-accent:       #e8824a;
  --peel-accent-light: #f0a070;
  --peel-accent-dim:   rgba(232, 130, 74, 0.08);
  --peel-accent-mid:   rgba(232, 130, 74, 0.16);
  --peel-accent-glow:  rgba(232, 130, 74, 0.30);

  /* Re-alias shared tokens so downstream components pick up peel tones */
  --accent:       var(--peel-accent);
  --accent-light: var(--peel-accent-light);
  --accent-dim:   var(--peel-accent-dim);
  --accent-mid:   var(--peel-accent-mid);
  --acc-glow:     var(--peel-accent-glow);

  /* Avatar sizes (vmin) — defaults, overridden by _applyAvatarSizes() in main.js */
  --peel-sz-lobby:     7vmin;
  --peel-sz-picker:    26vmin;
  --peel-sz-pickspot:  28vmin;
  --peel-sz-pickbadge: 14vmin;
  --peel-sz-waiting:   9vmin;
  --peel-sz-answered:  11vmin;
  --peel-sz-reveal:    30vmin;
  --peel-sz-modal:     48vmin;
  --peel-sz-toast:     20vmin;
}


/* ── 2. LAYOUT — body & root container ── */

body {
  font-family: var(--font-sans);
  overflow: hidden;    /* prevents page-level scrollbar; each screen scrolls internally */
  height: 100dvh;
}

#peel-app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Ambient glow behind all screens */
#peel-app::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 35% at 50% 0%, rgba(232,130,74,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 95%, rgba(201,168,76,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}


/* ── 3. SCREEN SYSTEM ── */

.peel-screen {
  display: none;
  position: relative;
  z-index: 1;
  height: 100dvh;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.peel-screen.peel-screen--active {
  display: flex;
}

/* Screen enter animations */
.peel-screen--active {
  animation: peel-fade-up 0.35s ease both;
}


/* ── 4. ANIMATIONS ── */

@keyframes peel-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes peel-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes peel-slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes peel-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes peel-timer-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

@keyframes peel-card-flash {
  0%, 100% { border-color: var(--border); box-shadow: 0 2px 16px rgba(0,0,0,0.18); }
  50%       { border-color: #f44336;      box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.35); }
}

@keyframes peel-hourglass-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes peel-reveal-name {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.peel-fade-in  { animation: peel-fade-in  0.3s ease both; }
.peel-slide-up { animation: peel-slide-up 0.4s ease both; }


/* ── 5. SHARED COMPONENTS ── */

/* -- Buttons -- */

.peel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
  user-select: none;
  text-decoration: none;
}

.peel-btn:active { transform: scale(0.97); }

/* Primary — peel accent fill */
.peel-btn--primary {
  background: var(--peel-accent);
  color: #0d0d0f;
}
.peel-btn--primary:hover {
  background: var(--peel-accent-light);
  box-shadow: 0 4px 20px var(--peel-accent-glow);
}

/* Secondary — ghost */
.peel-btn--secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}
.peel-btn--secondary:hover {
  background: var(--surface3);
  border-color: var(--peel-accent);
}

/* Ghost — text only */
.peel-btn--ghost {
  background: transparent;
  color: var(--text-dim);
  padding: 10px 16px;
}
.peel-btn--ghost:hover { color: var(--text); }

/* Danger */
.peel-btn--danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-dark);
}
.peel-btn--danger:hover {
  background: var(--danger-dark);
}

/* Size variants */
.peel-btn--sm {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
}
.peel-btn--lg {
  padding: 18px 36px;
  font-size: 17px;
  border-radius: 14px;
}
.peel-btn--full { width: 100%; }

.peel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}


/* -- Inputs & Textareas -- */

.peel-input,
.peel-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 16px;
  transition: border-color 0.18s, box-shadow 0.18s;
  outline: none;
}
.peel-input::placeholder,
.peel-textarea::placeholder { color: var(--text-dim); }

.peel-input:focus,
.peel-textarea:focus {
  border-color: var(--peel-accent);
  box-shadow: 0 0 0 3px var(--peel-accent-dim);
}

.peel-textarea {
  resize: none;
  min-height: 100px;
  line-height: 1.5;
}

.peel-char-count {
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
  margin-top: 4px;
}
.peel-char-count--warn { color: var(--amber); }
.peel-char-count--over { color: var(--danger); }


/* -- Labels & Field Groups -- */

.peel-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.peel-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* -- Room Code Display -- */

.peel-room-code {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: 0.14em;
  color: var(--peel-accent);
  text-shadow: 0 0 32px var(--peel-accent-glow);
  line-height: 1;
  user-select: all;
}

.peel-room-code--sm {
  font-size: 28px;
  letter-spacing: 0.1em;
}

.peel-room-code-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--peel-accent-mid);
  border-radius: 16px;
  box-shadow: 0 0 40px var(--peel-accent-dim);
}

.peel-room-code-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.peel-copy-btn {
  font-size: 12px;
  color: var(--peel-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.peel-copy-btn:hover { background: var(--peel-accent-dim); }


/* -- Player Chip -- */

.peel-player-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.18s;
  position: relative;
}

.peel-player-chip--active { border-color: var(--green); }
.peel-player-chip--host   { border-color: var(--peel-accent-mid); }

.peel-player-avatar {
  width: var(--peel-sz-lobby); height: var(--peel-sz-lobby);
  border-radius: 50%;
  background: var(--surface3);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--peel-sz-lobby) * 0.55);
  flex-shrink: 0;
  overflow: hidden;
}

.peel-player-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.peel-player-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peel-player-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.peel-player-badge--host {
  background: var(--peel-accent-mid);
  color: var(--peel-accent-light);
}
.peel-player-badge--you {
  background: var(--surface3);
  color: var(--text-dim);
}

.peel-online-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.peel-online-dot--offline { background: var(--text-dim); }


/* -- Answer Card -- */

/* Two-column answer card */
.peel-answer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  gap: 0;
  overflow: hidden;
  padding: 0;
  transition: border-color 0.25s;
  cursor: pointer;
}

/* Inner row: avatar left + answer right */
.peel-answer-card__body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1;
}

.peel-answer-card--revealed {
  border-color: var(--peel-accent-mid);
  animation: peel-fade-in 0.4s ease both;
}

.peel-answer-card__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 80px;
  max-width: 96px;
  flex: 0 0 auto;
  padding: 12px 8px;
  background: rgba(0,0,0,0.04);
  border-right: 1px solid rgba(0,0,0,0.07);
  transition: opacity 0.4s ease;
}

.peel-answer-card__left--hidden {
  opacity: 0;
}
.peel-answer-card__right--hidden {
  opacity: 0;
}

.peel-answer-card__player-name {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
}

.peel-answer-card__right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  min-width: 0;
  transition: opacity 0.4s ease;
}

.peel-answer-value {
  font-size: 1.5rem;       /* overridden per-card by JS */
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* -- QR Code container -- */

.peel-qr-wrap {
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  display: inline-flex;
}


/* -- Section dividers & headings -- */

.peel-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.peel-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

/* -- Status pills -- */

.peel-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.peel-status-pill--lobby     { background: var(--surface3); color: var(--text-dim); }
.peel-status-pill--picking   { background: var(--peel-accent-dim); color: var(--peel-accent-light); }
.peel-status-pill--answering { background: rgba(62,200,122,0.1); color: var(--green); }
.peel-status-pill--revealing { background: rgba(96,165,250,0.1); color: var(--blue); }

/* Blinking dot for live states */
.peel-status-pill--answering .peel-dot,
.peel-status-pill--revealing .peel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: peel-pulse 1.4s ease-in-out infinite;
}
.peel-status-pill--answering .peel-dot { background: var(--green); }
.peel-status-pill--revealing .peel-dot { background: var(--blue); }


/* ── 6. LANDING SCREEN (#peel-landing) ── */

.peel-landing {
  justify-content: center;
  gap: 0;
  overflow: hidden;  /* fits in one viewport — no scroll needed */
}

.peel-landing__hero {
  text-align: center;
  margin-bottom: 32px;
  animation: peel-fade-up 0.4s ease both;
}

.peel-landing__logo {
  font-family: var(--font-display);
  font-size: clamp(48px, 12vw, 72px);
  letter-spacing: 0.06em;
  color: var(--peel-accent);
  text-shadow: 0 0 48px var(--peel-accent-glow);
  line-height: 1;
  margin-bottom: 8px;
}

.peel-landing__tagline {
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.peel-landing__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  animation: peel-fade-up 0.4s 0.08s ease both;
}

.peel-landing__divider {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 4px 0;
}

/* Join code input row */
.peel-join-row {
  display: flex;
  gap: 8px;
}

.peel-join-input {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 10px;
}

.peel-join-input::placeholder {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}


.peel-landing__version {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}


/* ── 7. REGISTER SCREEN (#peel-register) ── */

.peel-register {
  justify-content: flex-start;
  padding-top: 40px;
  gap: 0;
}

.peel-register__card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px 32px;
  animation: peel-slide-up 0.35s ease both;
}

.peel-register__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.peel-register__sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 24px;
}

/* Emoji grid */
.peel-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 4px;
}

.peel-emoji-btn {
  aspect-ratio: 1;
  background: var(--surface2);
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 22px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.peel-emoji-btn:hover     { background: var(--surface3); transform: scale(1.1); }
.peel-emoji-btn--selected {
  border-color: var(--peel-accent);
  background: var(--peel-accent-mid);
}

/* Photo upload */
.peel-photo-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.peel-photo-preview {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface3);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  overflow: hidden;
  flex-shrink: 0;
}
.peel-photo-preview img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

.peel-photo-label {
  font-size: 12px;
  color: var(--peel-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.peel-photo-label:hover { color: var(--peel-accent-light); }

/* Room code badge shown at top of register in "join" path */
.peel-register__room-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--peel-accent-dim);
  border: 1px solid var(--peel-accent-mid);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--peel-accent-light);
  margin-bottom: 20px;
}
.peel-register__room-badge span {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.1em;
}


/* ── 8. LOBBY SCREEN (#peel-lobby) ── */

.peel-lobby {
  padding-top: 24px;
  gap: 0;
  align-items: stretch;
}

@media (min-width: 768px) {
  .peel-lobby { flex-direction: row; align-items: flex-start; max-width: 900px; margin: 0 auto; width: 100%; }
}

/* Left panel: room info + player list */
.peel-lobby__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Right panel: settings (host only, tablet+) */
.peel-lobby__sidebar {
  display: none;
}
@media (min-width: 768px) {
  .peel-lobby__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 260px;
    flex-shrink: 0;
    margin-left: 24px;
  }
}

/* Lobby header */
.peel-lobby__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.peel-lobby__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

/* Player grid */
.peel-player-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 500px) {
  .peel-player-grid { grid-template-columns: 1fr 1fr; }
}

/* Waiting slot placeholder */
.peel-player-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 13px;
}

/* Settings panel */
.peel-settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
}

.peel-settings-card__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.peel-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.peel-setting-row:last-child { border-bottom: none; }

.peel-setting-label {
  font-size: 13px;
  color: var(--text);
}
.peel-setting-label span { display: block; font-size: 11px; color: var(--text-dim); }

/* Block-style setting row (label + full-width control stacked) */
.peel-setting-row--block {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Theme picker row */
.peel-setting-row--col {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.peel-theme-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.peel-theme-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.peel-theme-chip:hover { border-color: var(--peel-accent); }
.peel-theme-chip--active {
  border-color: var(--peel-accent);
  background: var(--peel-accent-mid);
  color: var(--peel-accent-light);
}

.peel-theme-chip__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.peel-theme-chip__swatch--lagoon   { background: #2ec4b6; }
.peel-theme-chip__swatch--obsidian { background: #1a1a2e; border: 1px solid var(--border); }
.peel-theme-chip__swatch--ivory    { background: #f5f0e8; border: 1px solid var(--border); }
.peel-theme-chip__swatch--sage     { background: #4a7c59; }
.peel-theme-chip__swatch--abyss    { background: #0d1b3e; border: 1px solid var(--border); }

.peel-theme-coming-soon {
  font-size: 12px;
  color: var(--peel-accent-light);
  margin: 0;
  letter-spacing: 0.03em;
}

/* Lobby footer — host start button */
.peel-lobby__footer {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peel-player-count-note {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}


/* ── 9. PICKING SCREEN (#peel-picking) ── */

/* Host view */
.peel-picking {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 20px;
  padding-bottom: 0;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.peel-picking__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.peel-picking__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

@keyframes peelPhraseFlip {
  0%   { opacity: 1; transform: translateY(0); }
  35%  { opacity: 0; transform: translateY(-14px); }
  65%  { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.peel-phrase--animating {
  animation: peelPhraseFlip 0.5s ease both;
}

.peel-picker-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-dim);
}

.peel-picker-badge__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
}

/* Category chips */
.peel-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.peel-category-chip {
  padding: 6px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.peel-category-chip:hover       { border-color: var(--peel-accent); }
.peel-category-chip--active     {
  border-color: var(--peel-accent);
  background: var(--peel-accent-mid);
  color: var(--peel-accent-light);
}

/* Question list scroll wrapper — only the list scrolls, Surprise Me stays fixed */
.peel-question-list-wrap {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 100px;
}

/* Question list */
.peel-question-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peel-question-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.peel-question-row:hover {
  border-color: var(--peel-accent);
  background: var(--surface2);
}

.peel-question-row__text {
  flex: 1;
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
}

.peel-question-type-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.peel-question-type-badge--open   { background: var(--surface3); color: var(--text-dim); }
.peel-question-type-badge--yesno  { background: rgba(82,199,122,0.1); color: var(--green); }
.peel-question-type-badge--choice { background: rgba(96,165,250,0.1); color: var(--blue); }

/* Question list empty state */
.peel-question-list-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  line-height: 1.5;
}

/* Surprise me button */
.peel-surprise-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--surface2);
  border: 1px dashed var(--peel-accent-mid);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--peel-accent);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.peel-surprise-btn:hover {
  background: var(--peel-accent-dim);
  border-color: var(--peel-accent);
}

/* Player "host is picking" view */
.peel-picking__waiting {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.peel-picking__waiting-avatar {
  width: var(--peel-sz-pickspot);
  height: var(--peel-sz-pickspot);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  font-size: calc(var(--peel-sz-pickspot) * 0.5);
  animation: peel-pulse 1.8s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.peel-picking__waiting-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.peel-picking__waiting-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.peel-picking__waiting-sub {
  font-size: 13px;
  color: var(--text-dim);
}

/* Bouncing player avatars in waiting view */
.peel-waiting-avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.peel-waiting-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.peel-waiting-avatar-name {
  font-size: 0.7rem;
  color: var(--text-dim);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

@keyframes peelAvatarJump {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.peel-waiting-avatar {
  width: var(--peel-sz-waiting);
  height: var(--peel-sz-waiting);
  font-size: calc(var(--peel-sz-waiting) * 0.55);
  animation: peelAvatarJump var(--jump-dur, 0.8s) ease-in-out infinite;
}

/* Answered screen — wiggle avatars */
.peel-answered-avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.peel-answered-avatar-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

@keyframes peelAvatarWiggle {
  0%   { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

.peel-answered-avatar--waiting,
.peel-answered-avatar--done {
  width: var(--peel-sz-answered);
  height: var(--peel-sz-answered);
  font-size: calc(var(--peel-sz-answered) * 0.55);
}

.peel-answered-avatar--waiting {
  animation: peelAvatarWiggle 0.45s ease-in-out infinite alternate;
}

.peel-answered-checkmark {
  position: absolute;
  bottom: 18px;
  right: -4px;
  background: var(--peel-accent, #4caf50);
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  pointer-events: none;
}

.peel-answered-avatar-name {
  font-size: 0.7rem;
  color: var(--text-dim);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* Rotating hourglass shown under picker avatar when pick timer is active */
.peel-picking__hourglass {
  font-size: 26px;
  animation: peel-hourglass-spin 2s linear infinite;
  display: inline-block;
}

/* Pick time limit bar — host picking view */
.peel-pick-timer-bar-wrap {
  width: 100%;
  background: var(--surface2);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* Pick time limit bar — player waiting view (narrower, centred) */
.peel-pick-timer-bar-wrap--player {
  width: 220px;
  max-width: 90%;
}


/* ── 10. ANSWERING SCREEN (#peel-answering) ── */

.peel-answering {
  justify-content: flex-start;
  gap: 0;
  padding-top: 20px;
}

.peel-answering__inner {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 100px;  /* space for fixed action bar + HUD */
}

/* Question card — picker avatar row */
.peel-question-card__picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}

.peel-question-card__picker-avatar {
  width: var(--peel-sz-pickbadge);
  height: var(--peel-sz-pickbadge);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  font-size: calc(var(--peel-sz-pickbadge) * 0.5);
  border: 2px solid var(--peel-accent-mid);
}
.peel-question-card__picker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.peel-question-card__picker-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--peel-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Question card */
.peel-question-card {
  background: var(--surface);
  border: 1px solid var(--peel-accent-mid);
  border-radius: 18px;
  padding: 24px 20px;
  box-shadow: 0 0 40px var(--peel-accent-dim);
  animation: peel-slide-up 0.35s ease both;
}

.peel-question-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.peel-question-card__category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--peel-accent);
}

.peel-question-card__text {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  font-family: var(--font-serif);
}

/* Timer bar */
.peel-timer-bar-wrap {
  background: var(--surface3);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 16px;
}
/* Waiting-screen variant — lives outside a card, so constrain width + no top margin */
.peel-timer-bar-wrap--waiting {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
.peel-timer-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.peel-timer-icon { font-size: 14px; }
.peel-timer-bar {
  height: 8px;
  background: #4caf50;
  border-radius: 0 0 10px 10px;
  transition: width 1s linear, background 0.4s;
}
.peel-timer-bar--flash  { animation: peel-timer-flash 0.6s ease infinite; }
.peel-question-card--flash { animation: peel-card-flash 0.5s ease infinite; }

/* Auto-selected question banner */
.peel-auto-selected-banner {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface2);
  border-radius: 6px;
  padding: 5px 10px;
  text-align: center;
  margin-bottom: 6px;
}

/* Answer count indicator */
.peel-answer-tally {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.04em;
}
.peel-answer-tally strong { color: var(--peel-accent); }

/* Yes/No answer buttons */
.peel-yesno-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.peel-yesno-btn {
  padding: 28px 16px 22px;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 700;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.1s;
  background: var(--surface2);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.peel-yesno-btn__icon { font-size: 26px; line-height: 1; }
.peel-yesno-btn:hover    { background: var(--surface3); }
.peel-yesno-btn:active   { transform: scale(0.97); }
.peel-yesno-btn--yes:not(:disabled):hover { border-color: var(--green); }
.peel-yesno-btn--no:not(:disabled):hover  { border-color: var(--danger); }
.peel-yesno-btn--yes.peel-yesno-btn--selected {
  border-color: var(--green);
  background: var(--green-dark);
  color: var(--green-light);
}
.peel-yesno-btn--no.peel-yesno-btn--selected {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger-light);
}

/* Extra custom buttons below Yes/No (host-configured) */
.peel-yesno-extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.peel-yesno-extra-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  border: 1px dashed var(--border);
  cursor: pointer;
  background: transparent;
  color: var(--text-dim);
  text-align: center;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.1s;
}
.peel-yesno-extra-btn:hover {
  border-style: solid;
  border-color: var(--peel-accent);
  background: var(--peel-accent-dim);
  color: var(--peel-accent-light);
}
.peel-yesno-extra-btn:active { transform: scale(0.98); }
.peel-yesno-extra-btn.peel-yesno-extra-btn--selected {
  border-style: solid;
  border-color: var(--peel-accent);
  background: var(--peel-accent-mid);
  color: var(--peel-accent-light);
}

/* This-or-That split layout */
.peel-thisorthat-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}
.peel-thisorthat-btn {
  padding: 32px 12px;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid var(--border);
  cursor: pointer;
  background: var(--surface2);
  color: var(--text);
  transition: border-color 0.18s, background 0.18s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
}
.peel-thisorthat-btn--a {
  border-radius: 16px 0 0 16px;
  border-right: none;
}
.peel-thisorthat-btn--b {
  border-radius: 0 16px 16px 0;
  border-left: none;
}
.peel-thisorthat-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface3);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 30px;
}
.peel-thisorthat-btn:hover { background: var(--surface3); }
.peel-thisorthat-btn:active { transform: scale(0.98); }
.peel-thisorthat-btn--selected {
  border-color: var(--peel-accent);
  background: var(--peel-accent-mid);
  color: var(--peel-accent-light);
}

/* Multiple-choice lettered rows (single column always) */
.peel-choice-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peel-choice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid var(--border);
  cursor: pointer;
  background: var(--surface2);
  color: var(--text);
  transition: border-color 0.18s, background 0.18s, transform 0.1s;
  text-align: left;
  width: 100%;
}
.peel-choice-row:hover {
  background: var(--surface3);
  border-color: rgba(232, 130, 74, 0.35);
}
.peel-choice-row:active { transform: scale(0.98); }
.peel-choice-row--selected {
  border-color: var(--peel-accent);
  background: var(--peel-accent-mid);
  color: var(--peel-accent-light);
}
.peel-choice-row--selected .peel-choice-letter {
  background: var(--peel-accent);
  color: var(--bg);
  border-color: var(--peel-accent);
}
.peel-choice-letter {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--surface3);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-dim);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.peel-choice-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

/* Settings UI — Yes/No extra buttons editor */
.peel-yesno-extra-setting {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.peel-yesno-extra-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}
.peel-yesno-extra-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--peel-accent-mid);
  border: 1px solid var(--peel-accent);
  font-size: 12px;
  font-weight: 500;
  color: var(--peel-accent-light);
}
.peel-yesno-extra-chip__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--peel-accent-light);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.peel-yesno-extra-chip__remove:hover { opacity: 1; }
.peel-yesno-extra-add {
  display: flex;
  gap: 6px;
}
.peel-yesno-extra-add input {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s;
}
.peel-yesno-extra-add input:focus { border-color: var(--peel-accent); }
.peel-yesno-extra-add input::placeholder { color: var(--muted); }
.peel-yesno-extra-add button {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--peel-accent);
  background: var(--peel-accent-dim);
  color: var(--peel-accent-light);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.peel-yesno-extra-add button:hover { background: var(--peel-accent-mid); }
.peel-yesno-extra-add button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Submit button area */
.peel-answering__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* ── 11. WAITING SCREEN (#peel-waiting) ── */

.peel-waiting {
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding-bottom: 100px;
}

.peel-waiting__icon {
  font-size: 64px;
  animation: peel-pulse 1.6s ease-in-out infinite;
}

.peel-waiting__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.peel-waiting__sub {
  font-size: 14px;
  color: var(--text-dim);
  max-width: 260px;
}

.peel-waiting__answered-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.peel-waiting__answered-count {
  font-size: 40px;
  font-weight: 700;
  color: var(--peel-accent);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.peel-waiting__answered-label {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Progress dots — shows which players have answered */
.peel-answer-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 240px;
}
.peel-answer-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid var(--border);
  transition: background 0.3s, border-color 0.3s;
}
.peel-answer-dot--done {
  background: var(--peel-accent);
  border-color: var(--peel-accent);
}



/* ── 12. REVEALING SCREEN (#peel-revealing) ── */

.peel-revealing {
  align-items: stretch;
  padding-top: 20px;
  padding-bottom: 100px;
  gap: 16px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

.peel-revealing__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.peel-revealing__question {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-serif);
  background: var(--surface);
  border: 1px solid var(--peel-accent-mid);
  border-radius: 14px;
  padding: 16px 20px;
  line-height: 1.45;
}

/* Answer cards grid */
.peel-answer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 500px) {
  .peel-answer-grid { grid-template-columns: 1fr 1fr; }
}

/* Locked/blurred card for non-submitters when showAnswersToAll=false */
.peel-answer-card--locked {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  position: relative;
}
.peel-answer-card--locked::after {
  content: '🔒';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  filter: none;
  backdrop-filter: blur(4px);
  border-radius: 14px;
}

/* Small avatar variant for answer cards */
.peel-player-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 14px;
}

/* Picker's own big avatar on the picking screen */
.peel-player-avatar--lg {
  width: var(--peel-sz-picker);
  height: var(--peel-sz-picker);
  font-size: calc(var(--peel-sz-picker) * 0.48);
  margin: 0 auto 6px;
}

/* Reveal card + ended screen avatars */
.peel-player-avatar--reveal {
  width: var(--peel-sz-reveal);
  height: var(--peel-sz-reveal);
  font-size: calc(var(--peel-sz-reveal) * 0.43);
  margin: 0 auto 6px;
}

/* Tap-to-enlarge modal avatar */
.peel-player-avatar--modal {
  width: var(--peel-sz-modal);
  height: var(--peel-sz-modal);
  font-size: calc(var(--peel-sz-modal) * 0.43);
}

/* Gender border on avatar modal */
.peel-avatar-gender--male   { box-shadow: 0 0 0 4px var(--gender-male);   }
.peel-avatar-gender--female { box-shadow: 0 0 0 4px var(--gender-female); }
.peel-avatar-gender--other  { box-shadow: 0 0 0 4px var(--gender-other);  }

/* ── Avatar tap modal ── */
.peel-avatar-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: peelModalFadeIn 0.18s ease both;
}

@keyframes peelModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.peel-avatar-modal__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}

.peel-avatar-modal__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  text-align: center;
}

/* Name label inside an answer card attribution row */
.peel-answer-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

/* Attribution layout: avatar + name stacked & centred */
.peel-answer-card__attribution-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Badge strip — always visible at bottom-right of card */
.peel-answer-card__badges,
.peel-question-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  padding: 0 10px 8px;
  min-height: 0;
}
.peel-answer-card__badges:empty,
.peel-question-card__badges:empty { padding: 0; }

.peel-question-card__badges {
  padding: 8px 0 0;
}

/* Reaction badge pill */
.peel-reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px 3px 7px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
  position: relative;
}
.peel-reaction-badge:hover { background: var(--surface3); border-color: var(--peel-accent-mid); }
/* My own reaction — outline only, no fill */
.peel-reaction-badge--mine {
  background: transparent;
  border-color: var(--peel-accent);
}
.peel-reaction-badge__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* Who-reacted tooltip */
.peel-who-tooltip {
  position: absolute;
  bottom: calc(100% + 7px);
  right: 0;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s;
}
.peel-who-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.peel-who-tooltip__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
  color: var(--text);
}
.peel-who-tooltip__avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--peel-accent-mid);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.peel-who-tooltip__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Tap-to-react hint — removed, no longer needed */
.peel-answer-card__reaction-hint { display: none; }

/* Selected state when a card is tapped */
.peel-answer-card--selected {
  border-color: var(--peel-accent);
  box-shadow: 0 0 0 2px var(--peel-accent-mid);
}

/* Floating picker — pops up on card/question tap, closes after selection */
.peel-floating-reaction-bar {
  position: fixed;
  z-index: 200;
  display: flex;
  gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) translateX(-50%);
  transition: opacity 0.13s, transform 0.13s;
}
.peel-floating-reaction-bar--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) translateX(-50%);
}
/* Picker buttons show no count — just emoji + active state */
.peel-floating-reaction-bar .peel-reaction-count { display: none; }

/* Question card — tappable to open picker (same UX as answer cards) */
.peel-question-card { cursor: pointer; }
.peel-question-card--selected {
  border-color: var(--peel-accent);
  box-shadow: 0 0 0 2px var(--peel-accent-mid);
}

/* Reaction bar */
.peel-reaction-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.peel-reaction-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  user-select: none;
}
.peel-reaction-btn:hover  { background: var(--surface3); border-color: var(--peel-accent-mid); }
.peel-reaction-btn:active { transform: scale(0.92); }
.peel-reaction-btn--active {
  background: var(--peel-accent-mid);
  border-color: var(--peel-accent);
}
.peel-reaction-btn--active .peel-reaction-count { color: var(--peel-accent-light); }

.peel-reaction-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.peel-round-counter {
  font-size: 13px;
  color: var(--text-dim);
}
.peel-round-counter strong { color: var(--text); }


/* ── 13. HOST DASHBOARD OVERLAY ── */

/*
  On tablet/desktop the host sees a side panel (dashboard) while players
  are on a full-screen mobile view. This is shown as a fixed panel on
  wider screens during answering/waiting phases.
*/

.peel-host-dash {
  display: none;
}
@media (min-width: 768px) {
  .peel-host-dash {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 260px;
    flex-shrink: 0;
  }
}

.peel-host-dash__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.peel-host-dash__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}


/* ── 14. TOAST / ERROR NOTICE ── */

/* Uses shared ui-primitives.js toast — no extra styles needed.
   But we add a peel-scoped override for peel-notice (inline errors). */

.peel-notice {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid;
}
.peel-notice--error {
  background: var(--danger-bg);
  border-color: var(--danger-dark);
  color: var(--danger-light);
}
.peel-notice--info {
  background: var(--peel-accent-dim);
  border-color: var(--peel-accent-mid);
  color: var(--peel-accent-light);
}
.peel-notice--success {
  background: var(--green-dark);
  border-color: rgba(82,199,122,0.3);
  color: var(--green-light);
}


/* ── 15. DISCONNECTED BANNER ── */

.peel-disconnected-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--amber);
  color: #0d0d0f;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  display: none;
  animation: peel-fade-in 0.25s ease both;
}
.peel-disconnected-banner.peel-disconnected-banner--visible {
  display: block;
}


/* ── 16. RESPONSIVE LAYOUT HELPERS ── */

/* Tablet / desktop: two-column layout during answering/revealing */
@media (min-width: 768px) {
  .peel-two-col {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
  }
  .peel-two-col__main { flex: 1; }
  .peel-two-col__side { width: 260px; flex-shrink: 0; }
}

/* Mobile-only visibility */
.peel-mobile-only {
  display: block;
}
@media (min-width: 768px) {
  .peel-mobile-only { display: none; }
}

/* Desktop-only visibility */
.peel-desktop-only {
  display: none;
}
@media (min-width: 768px) {
  .peel-desktop-only { display: block; }
}


/* ── 17. FILTER CHECKBOXES (Category / Question Type) ── */

.peel-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
}
.peel-check-label input[type=checkbox] {
  cursor: pointer;
}
.peel-setting-dim {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
}


/* ── 18. SCROLLBAR ── */

#peel-app ::-webkit-scrollbar       { width: 6px; }
#peel-app ::-webkit-scrollbar-track { background: transparent; }
#peel-app ::-webkit-scrollbar-thumb {
  background: var(--surface3);
  border-radius: 3px;
}


/* ── 19. GENDER PILLS ── */

.peel-gender-pills {
  display: flex;
  gap: 10px;
}

.peel-gender-pill {
  flex: 1;
  padding: 10px 8px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.peel-gender-pill[data-gender="male"].peel-gender-pill--selected {
  border-color: var(--gender-male);
  color: var(--gender-male);
  background: rgba(79, 163, 224, 0.12);
}

.peel-gender-pill[data-gender="female"].peel-gender-pill--selected {
  border-color: var(--gender-female);
  color: var(--gender-female);
  background: rgba(224, 122, 163, 0.12);
}

.peel-gender-pill[data-gender="other"].peel-gender-pill--selected {
  border-color: var(--gender-other);
  color: var(--gender-other);
  background: rgba(155, 122, 224, 0.12);
}


/* ── 20. PHOTO GRID ── */

.peel-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 2px;
}

.peel-photo-grid-item {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface3);
  position: relative;
  transition: border-color 0.15s, opacity 0.15s;
  padding: 0;
}

.peel-photo-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.peel-photo-grid-item--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--acc-glow);
}

.peel-photo-grid-item--claimed {
  opacity: 0.35;
  cursor: not-allowed;
}

.peel-photo-grid-item__claimed-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(0,0,0,0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.peel-photo-grid-item--upload,
.peel-photo-grid-item--emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-dim);
  border: 2px dashed var(--border);
  background: var(--surface2);
}

.peel-photo-grid-item__upload-icon {
  font-size: 1.4rem;
}

.peel-photo-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 20px 0;
}

.peel-photo-grid-empty__online-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  color: var(--sky, #38bdf8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.peel-photo-grid-empty__online-link:hover {
  color: #7dd3fc;
}

.peel-picker-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding-top: 6px;
}

.peel-picker-link {
  font-size: 0.72rem;
  color: var(--peel-muted, #9ca3af);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.peel-picker-link:hover { color: var(--peel-accent, #a78bfa); }

.peel-picker-link--back {
  color: var(--peel-text-secondary, #d1d5db);
}
.peel-picker-link--back:hover { color: var(--peel-accent, #a78bfa); }

#peel-picker-emoji-wrap {
  padding-top: 4px;
}


/* ── 21. PHOTO CATEGORY TABS ── */

.peel-category-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.peel-category-tab {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.peel-category-tab--active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* ── PHOTO BADGES + OFFLINE STATE ── */

.peel-photo-grid-item__badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1.4;
  pointer-events: none;
}

.peel-photo-grid-item__badge--online {
  background: rgba(56, 189, 248, 0.18);
  color: var(--sky, #38bdf8);
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.peel-photo-grid-item--offline-unavailable {
  opacity: 0.3;
  cursor: not-allowed;
}

.peel-photo-grid-item__offline-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ── 22. PHOTO SELECTED PREVIEW (renumbered from 21) ── */

.peel-photo-selected-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.peel-photo-selected {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--accent);
}

.peel-photo-selected img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── 22. GENDER BADGE ── */

.peel-gender-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.peel-gender-badge--male   { background: rgba(79,163,224,0.18);  color: var(--gender-male);   }
.peel-gender-badge--female { background: rgba(224,122,163,0.18); color: var(--gender-female); }
.peel-gender-badge--other  { background: rgba(155,122,224,0.18); color: var(--gender-other);  }


/* ── 23. GENDER ICON ── */

.peel-gender-icon {
  font-size: 0.85rem;
  font-weight: 700;
}

.peel-gender-icon--male   { color: var(--gender-male);   }
.peel-gender-icon--female { color: var(--gender-female); }
.peel-gender-icon--other  { color: var(--gender-other);  }


/* ── 24. GENDER OUTLINE (player chip + answer card) ── */

.peel-player-chip--gender-male   { border: 2px solid var(--gender-male);   }
.peel-player-chip--gender-female { border: 2px solid var(--gender-female); }
.peel-player-chip--gender-other  { border: 2px solid var(--gender-other);  }

.peel-answer-card--gender-male   { border: 2px solid var(--gender-male);   }
.peel-answer-card--gender-female { border: 2px solid var(--gender-female); }
.peel-answer-card--gender-other  { border: 2px solid var(--gender-other);  }


/* ── 25. ADVANCED SETTINGS PANEL ── */

.peel-settings-advanced-toggle {
  width: 100%;
  background: none;
  border: none;
  color: var(--peel-accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  padding: 8px 0 4px;
  cursor: pointer;
  letter-spacing: 0.03em;
}

.peel-settings-advanced {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 4px;
}


/* ── 26. EMOJI FALLBACK ── */

.peel-emoji-fallback-wrap {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
#peel-app ::-webkit-scrollbar-thumb:hover { background: var(--border); }


/* ── Photo source choice ───────────────────────────── */

.peel-photo-source-hint {
  font-size: 13px;
  color: var(--peel-muted, #9ca3af);
  margin: 4px 0 12px;
  text-align: center;
}

.peel-photo-source-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}


.peel-emoji-fallback-hint {
  font-size: 12px;
  color: var(--peel-muted, #9ca3af);
  text-align: center;
  margin: 10px 0 6px;
}


/* ── Ended screen ── */

.peel-ended {
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  gap: var(--space-4);
}

.peel-ended__history {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}

.peel-ended-round {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.peel-ended-round__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.peel-ended-round__question {
  font-size: 1rem;
  font-style: italic;
  color: var(--text-dim);
}

.peel-ended__host-nav {
  display: flex;
  gap: var(--space-2);
}

.peel-ended__player-nav {
  padding: var(--space-3);
}

.peel-status-pill--ended {
  background: var(--surface-2, #f0ede8);
  color: var(--text-dim);
}
.peel-status-pill--ended .peel-dot {
  background: #999;
}


/* ── Mid-game settings overlay ── */

.peel-midgame-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
}

.peel-midgame-settings-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.peel-midgame-settings-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface, #fff);
  border-radius: 16px 16px 0 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 80vh;
  overflow-y: auto;
}

.peel-midgame-settings-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.peel-midgame-settings-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-dim);
  padding: 4px 8px;
}

.peel-midgame-settings-note {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0;
}

.peel-midgame-settings-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-dim);
}

.peel-midgame-settings-btn:hover {
  background: var(--surface-2, #f5f2ee);
}


/* ── Browse Rooms modal ── */

.peel-browse-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 480px) {
  .peel-browse-modal {
    align-items: center;
  }
}

.peel-browse-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.peel-browse-modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px 24px 0 0;
  padding: 20px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 480px) {
  .peel-browse-modal__panel {
    border-radius: 24px;
    padding: 24px;
  }
}

.peel-browse-modal__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.peel-browse-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  flex: 1;
}

.peel-browse-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.peel-browse-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.peel-browse-card:hover {
  background: var(--surface3);
}

.peel-browse-card--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.peel-browse-card--disabled:hover {
  background: var(--surface2);
}

.peel-browse-card__info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.peel-browse-card__code {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--peel-accent-mid);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.peel-browse-card__host {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.peel-browse-card__players {
  font-size: 0.85rem;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.peel-browse-status {
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.peel-browse-status--waiting {
  background: rgba(82, 199, 122, 0.18);
  color: var(--green);
}

.peel-browse-status--playing {
  background: rgba(96, 165, 250, 0.18);
  color: var(--blue);
}

.peel-browse-status--ingame {
  background: var(--border);
  color: var(--text-dim);
}

.peel-browse-status--ended {
  background: var(--border);
  color: var(--text-dim);
}

.peel-browse-empty,
.peel-browse-loading {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
  padding: 24px 0;
}


/* ── Host-left overlay ── */

.peel-host-left-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 7, 3, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.peel-host-left-overlay__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 32px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.peel-host-left-overlay__icon {
  font-size: 52px;
  line-height: 1;
}
.peel-host-left-overlay__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
.peel-host-left-overlay__msg {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.peel-host-left-overlay__btn {
  margin-top: 8px;
  padding: 12px 32px;
  border-radius: 50px;
  background: var(--peel-accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.peel-host-left-overlay__btn:hover {
  background: var(--peel-accent-light);
  transform: translateY(-1px);
}


/* ── Unified action bar ── */

.peel-action-bar {
  position: fixed;
  bottom: 32px;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(20, 14, 6, 0.82);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.peel-action-bar__spacer {
  flex: 1;
}

.peel-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
  letter-spacing: 0.01em;
}
.peel-bar-btn:active { transform: scale(0.96); }

.peel-bar-btn--leave {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.peel-bar-btn--leave:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.4);
}

.peel-bar-btn--primary {
  background: var(--peel-accent);
  color: #fff;
}
.peel-bar-btn--primary:hover {
  background: var(--peel-accent-light);
  transform: translateY(-1px);
}

.peel-bar-btn--icon {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.peel-bar-btn--icon:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

.peel-bar-btn--end {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.peel-bar-btn--end:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}

@media (min-width: 768px) {
  .peel-action-bar {
    max-width: 640px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 50px 50px 0 0;
    padding: 8px 20px;
  }
}


/* ── HUD picker span ── */

.peel-hud-picker {
  font-style: italic;
  color: var(--peel-accent-light);
  font-size: 0.75rem;
}


/* ── Player-left toast ── */

.peel-toast-container {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.peel-toast {
  background: rgba(25, 18, 8, 0.88);
  color: #fff;
  padding: 7px 18px;
  border-radius: 20px;
  font-size: 0.82rem;
  white-space: nowrap;
  animation: peel-toast-in 0.2s ease, peel-toast-out 0.3s ease 2.7s forwards;
}

@keyframes peel-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes peel-toast-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-4px); }
}


/* ── Game status HUD ── */

.peel-game-hud {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(20, 20, 24, 0.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-dim);
  flex-wrap: wrap;
  pointer-events: none;  /* allow clicks through except on toggle btn */
}

.peel-game-hud--collapsed {
  padding: 4px 12px;
}

.peel-game-hud--collapsed .peel-hud-sep,
.peel-game-hud--collapsed #peel-hud-players,
.peel-game-hud--collapsed #peel-hud-answered {
  display: none;
}

.peel-game-hud--collapsed #peel-hud-round {
  font-size: 0.72rem;
}

.peel-hud-sep {
  opacity: 0.4;
}

#peel-hud-round {
  font-weight: 600;
  color: var(--text);
}

#peel-hud-answered {
  color: var(--accent, #e8824a);
  font-weight: 500;
}

.peel-hud-toggle {
  pointer-events: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.9rem;
  padding: 2px 4px;
  line-height: 1;
  opacity: 0.6;
  margin-left: 4px;
}

.peel-hud-toggle:hover {
  opacity: 1;
}

/* Clickable player count in HUD */
#peel-hud-players {
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

#peel-hud-players:hover {
  color: var(--accent, #e8824a);
}

/* Players popup */
.peel-players-popup {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.peel-players-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.peel-players-popup__panel {
  position: relative;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.peel-players-popup__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.peel-players-popup__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.peel-players-popup__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.peel-players-popup__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.peel-players-popup__badge {
  font-size: 0.7rem;
  background: var(--accent, #e8824a);
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
}

/* Clickable player count in HUD */
#peel-hud-players {
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

#peel-hud-players:hover {
  color: var(--accent, #e8824a);
}

/* Players popup */
.peel-players-popup {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.peel-players-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.peel-players-popup__panel {
  position: relative;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.peel-players-popup__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.peel-players-popup__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.peel-players-popup__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.peel-players-popup__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.peel-players-popup__badge {
  font-size: 0.7rem;
  background: var(--accent, #e8824a);
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
}


/* ── Language selector (register screen + player settings modal) ── */

.peel-lang-optional {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
}

.peel-lang-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.peel-lang-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.peel-lang-sublabel {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}
.peel-lang-sublabel span {
  font-weight: 400;
}

.peel-lang-select {
  font-size: 13px;
  padding: 5px 8px;
  width: 100%;
}

.peel-lang-field {
  margin-top: 4px;
}


/* ── Question text — bilingual display ── */

.peel-question-card__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.peel-q-lang-primary {
  font-size: inherit;
  line-height: inherit;
}

.peel-q-lang-secondary {
  display: block;
  font-size: 0.72em;
  color: var(--text-dim);
  line-height: 1.4;
  opacity: 0.85;
}


/* ══════════════════════════════════════════════════════════════
   GET READY COUNTDOWN OVERLAY
══════════════════════════════════════════════════════════════ */

.peel-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #080f18;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.peel-countdown__spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 55% at 50% 42%,
    rgba(255,220,40,.10) 0%, rgba(255,180,0,.04) 45%, transparent 70%);
  pointer-events: none;
  animation: peel-cd-spot 1.6s ease-in-out infinite alternate;
}
@keyframes peel-cd-spot {
  from { opacity: .7; transform: scale(.96); }
  to   { opacity: 1;  transform: scale(1.04); }
}

.peel-countdown__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 24px;
  z-index: 1;
}

.peel-countdown__title {
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ffe135;
  text-shadow: 0 0 30px rgba(255,225,53,.6), 0 2px 0 rgba(0,0,0,.4);
  margin: 0;
}

/* Stage holds halo + pile */
.peel-countdown__stage {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.peel-countdown__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,225,53,.18) 0%, transparent 65%);
  animation: peel-cd-halo 1.2s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes peel-cd-halo {
  from { transform: scale(.85); opacity: .7; }
  to   { transform: scale(1.12); opacity: 1; }
}

/* Banana pile */
.peel-countdown__pile {
  position: relative;
  width: 190px;
  height: 190px;
}

.peel-cd-banana {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 8rem;
  line-height: 1;
  user-select: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.55));
  transform: translate(-50%, -50%) rotate(-15deg);
}

/* Devil composite */
.peel-cd-devil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  transform: scale(0.1) rotate(-15deg);
  pointer-events: none;
}
.peel-cd-face {
  font-size: 7rem;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(180,0,255,.9)) drop-shadow(0 0 40px rgba(180,0,255,.5));
}
.peel-cd-spike {
  font-size: 2.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(180,0,255,.7));
  align-self: flex-end;
  margin-bottom: 8px;
}
.peel-cd-spike--left  { transform: rotate(-30deg) scaleX(-1); }
.peel-cd-spike--right { transform: rotate( 30deg); }

/* Countdown number */
.peel-countdown__num {
  font-size: clamp(5rem, 18vw, 7rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 40px rgba(255,255,255,.1), 0 4px 0 rgba(0,0,0,.4);
  transition: transform .1s ease, color .1s ease, text-shadow .1s;
  min-height: 1.1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.peel-cd-num--pop {
  transform: scale(1.5);
  color: #ffe135;
  text-shadow: 0 0 80px rgba(255,225,53,1), 0 4px 0 rgba(0,0,0,.4);
}

/* GO text */
.peel-countdown__go {
  font-size: clamp(2.5rem, 10vw, 4.5rem);
  font-weight: 900;
  color: #d966ff;
  text-shadow: 0 0 50px rgba(180,0,255,.9), 0 0 100px rgba(180,0,255,.4), 0 5px 0 rgba(0,0,0,.4);
  letter-spacing: .05em;
  animation: peel-cd-go .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes peel-cd-go {
  from { transform: scale(.05) rotate(-10deg); opacity: 0; }
  65%  { transform: scale(1.18) rotate(3deg); }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}


/* ── Scale answer UI ── */

.peel-scale-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tile grid (scalePoints 2–5) */
.peel-scale-tiles {
  display: grid;
  gap: 8px;
  /* grid-template-columns set inline by host.js based on scalePoints */
}

.peel-scale-tile {
  aspect-ratio: 1;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.13s, background 0.13s;
  user-select: none;
}
.peel-scale-tile:hover { border-color: var(--peel-accent); background: var(--peel-accent-dim); }

.peel-scale-tile--selected {
  border-color: var(--peel-accent);
  background: var(--peel-accent-mid);
  color: var(--peel-accent-light);
}
.peel-scale-tile--submitted {
  border-color: var(--green);
  background: rgba(74,170,114,0.12);
  color: var(--green);
}
.peel-scale-tile--disabled {
  opacity: 0.28;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tile image (emoji set with image slots) */
.peel-scale-tile-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
}

/* End labels row */
.peel-scale-ends {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  padding: 0 2px;
}

/* Slider layout (scalePoints 6–10) */
.peel-scale-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.peel-scale-slider-display {
  text-align: center;
  font-size: 52px;
  font-weight: 700;
  color: var(--peel-accent-light);
  line-height: 1;
  background: var(--surface2);
  border: 2px solid var(--peel-accent);
  border-radius: 18px;
  padding: 18px;
}
.peel-scale-slider-sub {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}
.peel-scale-slider-track {
  padding: 0 4px;
}
.peel-scale-slider-track input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--peel-accent) 50%, var(--surface3) 50%);
  outline: none;
  cursor: pointer;
}
.peel-scale-slider-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--peel-accent);
  border: 3px solid var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  cursor: grab;
}
.peel-scale-submit-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: var(--peel-accent);
  color: var(--bg);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.peel-scale-submit-btn:hover { opacity: 0.88; }
.peel-scale-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }


/* ── Confirmation delay (lock-in bar) — applies to all clickable answer types ── */

.peel-lock-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.peel-lock-bar-track {
  height: 3px;
  border-radius: 2px;
  background: var(--surface3);
  overflow: hidden;
}
.peel-lock-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--peel-accent);
  transition: width 0.08s linear;
}
.peel-lock-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--peel-accent-light);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Pending pulse — applied to whichever button/tile the player last tapped */
@keyframes peelTilePulse {
  from { box-shadow: 0 0 0   rgba(232,130,74,0); }
  to   { box-shadow: 0 0 16px rgba(232,130,74,0.5); }
}
.peel-tile-pending {
  animation: peelTilePulse 0.65s ease-in-out infinite alternate;
}


/* ══════════════════════════════════════════
   OWN-AVATAR ACTION POPUP  (View | Change)
══════════════════════════════════════════ */

.peel-own-avatar-popup {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.peel-own-avatar-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  animation: peelModalFadeIn 0.15s ease both;
}

.peel-own-avatar-popup__menu {
  position: relative;
  background: var(--surface, #fff);
  border-radius: 14px;
  overflow: hidden;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  animation: peelModalFadeIn 0.15s ease both;
}

.peel-own-avatar-popup__btn {
  padding: 18px 28px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-sans);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text, #111);
  text-align: center;
  transition: background 0.1s;
}

.peel-own-avatar-popup__btn:active,
.peel-own-avatar-popup__btn:focus-visible {
  background: var(--surface2, #f0f0f0);
}

.peel-own-avatar-popup__btn--change {
  color: var(--peel-accent, #e8824a);
}

.peel-own-avatar-popup__divider {
  height: 1px;
  background: var(--border, #e0e0e0);
  margin: 0;
}


/* ══════════════════════════════════════════
   FOCUSED AVATAR PICKER SHEET
══════════════════════════════════════════ */

.peel-avatar-picker-sheet {
  position: fixed;
  inset: 0;
  z-index: 600;
}

.peel-avatar-picker-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: peelModalFadeIn 0.2s ease both;
}

.peel-avatar-picker-sheet__panel {
  /* Absolute bottom sheet — bypasses parent flex entirely.
     CSS grid with explicit row tracks guarantees all three regions fit:
       row 1 → header  (auto = natural height, never squished)
       row 2 → body    (1fr  = remaining space, content scrolls)
       row 3 → footer  (auto = natural height, always visible)
     overflow:hidden only clips content within rows, not the rows themselves. */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  height: auto;
  max-height: 72svh;
  background: var(--surface, #141418);
  border-radius: 20px 20px 0 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  animation: peelSheetSlideUp 0.28s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}

@keyframes peelSheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.peel-avatar-picker-sheet__header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border, #e0e0e0);
}

.peel-avatar-picker-sheet__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text, #111);
}

.peel-avatar-picker-sheet__body {
  min-height: 0;  /* grid items also default min-height:auto — override so row can shrink */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}

.peel-avatar-picker-sheet__footer {
  padding: 12px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  border-top: 1px solid var(--border, #e0e0e0);
}

/* Sheet is rendered outside #peel-app, so peel-accent tokens don't cascade.
   Provide explicit fallback so the Done button is visible. */
.peel-avatar-picker-sheet .peel-btn--primary {
  background: var(--peel-accent, #e8824a);
  color: #0d0d0f;
}
.peel-avatar-picker-sheet .peel-btn--primary:hover {
  background: var(--peel-accent-light, #f0a070);
}


/* ══════════════════════════════════════════
   AVATAR CHANGED BROADCAST TOAST
══════════════════════════════════════════ */

.peel-avatar-changed-toast {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-130%);
  z-index: 9100;
  background: var(--surface, #141418);
  border: 1px solid var(--border, #2a2a33);
  border-radius: 20px;
  padding: 20px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(232,130,74,0.12);
  min-width: min(280px, 80vw);
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1);
  margin-top: 16px;
}

.peel-avatar-changed-toast--visible {
  transform: translateX(-50%) translateY(0);
}

.peel-avatar-changed-toast__text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #e8e6e0);
  text-align: center;
  max-width: 240px;
  line-height: 1.3;
}


/* ── Card flip ── */

.peel-avatar-flip-card {
  width: var(--peel-sz-toast, 20vmin);
  height: var(--peel-sz-toast, 20vmin);
  perspective: 600px;
  flex-shrink: 0;
}

.peel-avatar-flip-card__inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.peel-avatar-flip-card--flipped .peel-avatar-flip-card__inner {
  transform: rotateY(180deg);
}

.peel-avatar-flip-card__front,
.peel-avatar-flip-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.peel-avatar-flip-card__back {
  transform: rotateY(180deg);
}

.peel-avatar-flip-card .peel-player-avatar {
  width: 100%;
  height: 100%;
  font-size: calc(var(--peel-sz-toast, 20vmin) * 0.5);
  line-height: 1;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}