/* ─── Pack Editor Host Display ────────────────────────────────────────── */

.pe-host {
  max-width: 800px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.pe-host h1 {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 2.8rem;
  margin-bottom: .3rem;
}
.pe-host h1 .splash {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.back-link {
  color: var(--accent-blue); text-decoration: none; font-weight: 700;
  font-size: .95rem; display: inline-block; margin-bottom: .5rem;
  transition: color .2s, transform .2s;
}
.back-link:hover { color: var(--accent-purple); transform: translateX(-3px); }

.pe-subtitle {
  color: var(--text-dim); font-size: 1.05rem; margin-bottom: 1.5rem;
  font-family: 'Nunito', sans-serif;
}

/* ─── Join block (QR + code side-by-side) ──────────────────────────────── */

.pe-join-block {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; margin-bottom: 2rem;
  flex-wrap: wrap;
}
.pe-qr {
  width: 180px; height: 180px;
  border-radius: 12px;
  display: block;
  animation: fadeIn .6s both;
}
.pe-join-info {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.pe-url {
  color: var(--accent-yellow); font-family: 'Nunito', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  text-shadow: 0 0 12px rgba(255,225,77,.25);
  word-break: break-all;
}

.room-code-wrap {
  display: inline-flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg); padding: .8rem 2rem;
}
.room-code-label {
  font-size: .75rem; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 1.5px; font-weight: 700; margin-bottom: .2rem;
}
.room-code {
  font-family: 'Fredoka', monospace;
  font-size: 3rem; font-weight: 700; letter-spacing: 6px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ─── Stats ────────────────────────────────────────────────────────────── */

.pe-stats {
  display: flex; justify-content: center; gap: 3rem; margin-bottom: 1.5rem;
}
.pe-stat { display: flex; flex-direction: column; align-items: center; }
.pe-stat-num {
  font-family: 'Fredoka', sans-serif; font-size: 3rem; font-weight: 700;
  line-height: 1;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pe-stat-num.bump { transform: scale(1.2); }
.pe-stat-label {
  font-size: .85rem; color: var(--text-dim); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
}

/* ─── Editors ──────────────────────────────────────────────────────────── */

.pe-editors {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin-bottom: 1.5rem; min-height: 2rem;
}
.pe-editor-tag {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; padding: .35rem 1rem; font-size: .9rem; font-weight: 700;
  font-family: 'Nunito', sans-serif;
  animation: popIn .3s cubic-bezier(.34,1.56,.64,1) both;
}
.pe-editor-tag.disconnected { opacity: .35; text-decoration: line-through; }

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.pe-pack-name {
  font-family: 'Fredoka', sans-serif; font-size: 1.3rem; font-weight: 600;
  color: var(--accent-green); margin-bottom: .8rem;
}

.pe-saved {
  font-size: 1.1rem; color: var(--accent-green); font-weight: 700;
  font-family: 'Nunito', sans-serif;
  animation: fadeIn .3s;
}

/* ─── Live prompt feed ─────────────────────────────────────────────────── */

.pe-prompt-feed {
  margin-top: 1rem;
  width: 100%;
}
.pe-feed-title {
  font-family: 'Fredoka', sans-serif; font-size: 1.3rem; font-weight: 600;
  color: var(--text-body); margin-bottom: .8rem;
}
.pe-feed-empty {
  color: var(--text-dim); font-size: 1rem; font-style: italic;
  padding: 2rem 0;
}
.pe-feed-list {
  display: flex; flex-direction: column; gap: .5rem;
  max-height: 50vh; overflow-y: auto;
  padding-right: .3rem;
}
.pe-feed-row {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: .6rem 1rem;
  text-align: left;
  animation: slideUp .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes slideUp {
  0% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.pe-feed-text {
  flex: 1; font-size: .95rem; word-break: break-word;
  font-family: 'Nunito', sans-serif;
}
.pe-feed-author {
  font-size: .75rem; color: var(--text-dim); font-weight: 700;
  white-space: nowrap;
}
.pe-feed-tag {
  font-size: .6rem; padding: .15rem .4rem; border-radius: 6px;
  font-weight: 800; text-transform: uppercase; white-space: nowrap;
}
.pe-feed-tag.family { background: var(--accent-green); color: #0d0b1a; }
.pe-feed-tag.adult { background: var(--accent-pink); color: #fff; }

.hidden { display: none !important; }