/* Shared styles for the name pickers: name-picker, popsicle-stick-picker, lucky-envelope-picker, sticker-jar-picker, spin-globe-picker */
textarea{ width:100%; min-height: 150px; resize: vertical; background: #0f1522; color: var(--cream);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-family:'Work Sans', sans-serif;
  font-size:14px; line-height:1.6; outline: none; }
textarea:focus{ border-color: var(--gold); }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top: 14px; }
.count{ color: var(--cream-dim); font-size:13px; }

.picker-display{ text-align:center; padding: 50px 20px; }
.picked-name{ font-family:'Archivo Black', sans-serif; font-size: clamp(40px, 9vw, 90px); color: var(--gold); min-height: 1.2em; }

.remaining-chip{ display:inline-flex; align-items:center; gap:6px; background: rgba(255,255,255,0.03);
  border:1px solid var(--line); border-radius: 20px; padding: 4px 12px; margin: 3px; font-size: 13px; }
.remaining-chip.used{ opacity: 0.3; text-decoration: line-through; }
.pool{ margin-top: 20px; text-align:center; }

.related-skins{ margin-top: 40px; }
.related-skins h3{ font-size:12px; letter-spacing:2px; color: var(--cream-dim); text-transform:uppercase; margin: 0 0 12px; text-align:center; }
.skin-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.skin-links a{ text-decoration:none; background: var(--panel-bg); border:1px solid var(--line); border-radius:10px;
  padding: 10px 16px; font-size:13px; font-weight:700; }
.skin-links a:hover{ border-color: var(--gold); }

/* ---------- Shared reveal overlay (js/picker-reveal.js) ---------- */
.cc-reveal{
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(28,39,64,.94) 0%, rgba(8,12,20,.96) 70%);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
  padding: 24px; text-align: center;
}
.cc-reveal.open{ opacity: 1; visibility: visible; transition: opacity .25s ease; }
.cc-reveal-inner{ max-width: 94vw; }
.cc-reveal-label{
  font-size: clamp(14px, 2.2vw, 22px); letter-spacing: 4px; font-weight: 800;
  text-transform: uppercase; color: var(--cream-dim);
}
.cc-reveal-name{
  font-family: 'Archivo Black', sans-serif; color: var(--gold);
  font-size: clamp(56px, 13vw, 180px); line-height: 1.05; margin: 14px 0 18px;
  overflow-wrap: anywhere; text-shadow: 0 6px 30px rgba(255,182,39,.35);
}
.cc-reveal.open .cc-reveal-name{ animation: ccPop .6s cubic-bezier(.34,1.56,.64,1) both; }
.cc-reveal.open .cc-reveal-label{ animation: ccFade .4s ease both; }
.cc-reveal.open .cc-reveal-sub,
.cc-reveal.open .cc-reveal-actions{ animation: ccFade .4s ease .35s both; }
@keyframes ccPop{ 0%{ transform: scale(.3) rotate(-6deg); opacity: 0; } 100%{ transform: scale(1) rotate(0); opacity: 1; } }
@keyframes ccFade{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
.cc-reveal-sub{ color: var(--cream); font-size: clamp(14px, 2vw, 20px); min-height: 1.4em; }
.cc-reveal-actions{ display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.cc-reveal-actions button{ font-size: 16px; padding: 14px 26px; }
.cc-reveal-keys{ margin-top: 14px; font-size: 12px; color: var(--cream-dim); }
.cc-confetti{ position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 310; }

@media (prefers-reduced-motion: reduce){
  .cc-reveal.open .cc-reveal-name,
  .cc-reveal.open .cc-reveal-label,
  .cc-reveal.open .cc-reveal-sub,
  .cc-reveal.open .cc-reveal-actions{ animation: none; }
}
.picked-name.shuffling{ color: var(--cream-dim); }

/* Sound button sits over the logo on small screens; move it to the bottom corner on picker pages */
@media (max-width: 640px){
  .sound-toggle-btn{ top: auto; bottom: 16px; }
}