/* ---------- Goods gallery (character merch previews) ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{
  border-radius:var(--radius); overflow:hidden; background:var(--panel);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform 220ms ease, box-shadow 220ms ease;
}
.gallery-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.gallery-item img{ width:100%; height:190px; object-fit:cover; display:block; }
.gallery-item .cap{ padding:14px 16px 16px; }
.gallery-item .cap h4{ margin:0 0 6px; font-family:var(--font-display); font-size:var(--fs-lead); }
.gallery-item .cap p{ margin:0; font-size:var(--fs-sm); line-height:1.6; color:var(--ink-soft); }

/* ---------- Additions: live widget, fireflies, footprints, vote, ranking, playground ---------- */
.live-widget{
  max-width:720px; margin:-30px auto 0; padding:0 24px; position:relative; z-index:3;
}
.live-widget .card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 22px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:14px;
}
.live-widget .avatar{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex:0 0 auto; border:3px solid var(--gold); }
.live-widget .avatar img{ width:100%; height:100%; object-fit:cover; }
.live-widget .kicker{ font-family:var(--font-body); font-size:var(--fs-caption); color:var(--faint); letter-spacing:0.04em; }
.live-widget .msg{ font-family:var(--font-display); font-size:var(--fs-sm); color:var(--ink); }
.live-widget .emoji{ margin-left:auto; font-size:var(--fs-h3); }

.firefly{
  position:fixed; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle,#FFF6D0,var(--gold) 60%,transparent 100%);
  box-shadow:0 0 8px 2px rgba(231,179,62,0.55);
  animation:firefly-drift ease-in-out infinite;
}
@keyframes firefly-drift{
  0%{ transform:translate(0,0); opacity:0; } 15%{ opacity:0.9; } 50%{ transform:translate(18px,-26px); }
  85%{ opacity:0.7; } 100%{ transform:translate(-6px,-48px); opacity:0; }
}
.footprint-trail{ display:flex; justify-content:center; gap:26px; padding:8px 0 0; }
.footprint-trail span{ font-size:var(--fs-sm); opacity:0.45; }
.footprint-trail span:nth-child(even){ transform:translateY(9px) rotate(8deg); }
.footprint-trail span:nth-child(odd){ transform:translateY(0) rotate(-8deg); }

.vote-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.vote-btn{
  font-family:var(--font-display); font-size:var(--fs-sm); border:2px solid var(--accent,var(--teal)); border-radius:999px;
  padding:11px 18px; cursor:pointer; background:#fff; color:var(--accent,var(--teal)); transition:background 150ms,color 150ms;
}
.vote-btn.voted{ background:var(--accent,var(--teal)); color:#fff; }
.vote-link{ font-family:var(--font-display); font-size:var(--fs-caption); color:var(--ink-soft); text-decoration:none; }

.video-dots{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.video-dot{
  font-family:var(--font-display); font-size:var(--fs-caption); padding:7px 14px; border-radius:999px; cursor:pointer;
  border:2px solid var(--accent,var(--teal)); background:#fff; color:var(--accent,var(--teal));
}
.video-dot.active{ background:var(--accent-dark,var(--teal)); color:#fff !important; }

.ranking-list{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px; max-width:680px; margin:0 auto; }
.ranking-row{ display:grid; grid-template-columns:30px 56px 1fr 50px; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.ranking-rank{ font-family:var(--font-display); font-size:var(--fs-sm); }
.ranking-name{ font-family:var(--font-display); font-size:var(--fs-sm); color:var(--ink); }
.ranking-track{ border-radius:999px; height:16px; overflow:hidden; }
.ranking-fill{ height:100%; border-radius:999px; transition:width 400ms ease; }
.ranking-count{ font-size:var(--fs-caption); color:var(--ink-soft); text-align:right; font-weight:700; }

/* ---------- Playground ---------- */
.pg-hero{ text-align:center; padding:12px 0 4px; }
.pg-hero .wiggle{ font-size:56px; display:inline-block; animation:pg-wiggle 1.8s ease-in-out infinite; }
@keyframes pg-wiggle{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } }
.pg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:26px; }
.pg-card{
  display:block; background:var(--panel); border-radius:var(--radius); padding:34px 28px; text-align:center;
  box-shadow:var(--shadow-sm); border:2px solid var(--line); text-decoration:none; color:inherit; transition:transform 180ms ease, box-shadow 180ms ease;
}
.pg-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pg-card .icon{ font-size:58px; margin-bottom:14px; }
.pg-card h3{ font-family:var(--font-display); font-size:var(--fs-h4); margin:0 0 10px; color:var(--ink); }
.pg-card p{ margin:0; font-size:var(--fs-body); color:var(--ink-soft); }
.pg-back{ font-family:var(--font-display); font-size:var(--fs-sm); color:var(--ink); text-decoration:none; }

.pg-stage{ max-width:720px; margin:0 auto; padding:24px; text-align:center; }
.pg-stat{ display:inline-flex; flex-direction:column; background:#fff; border-radius:18px; padding:14px 26px; box-shadow:var(--shadow-sm); margin:0 8px 24px; }
.pg-stat b{ font-family:var(--font-display); font-size:var(--fs-h3); }
.pg-stat span{ font-family:var(--font-body); font-size:var(--fs-caption); color:var(--faint); }

.pg-orb{ width:340px; height:340px; border-radius:50%; border:10px solid #fff; box-shadow:var(--shadow-lg); background:radial-gradient(circle at 40% 30%,#fff,var(--paper-alt) 70%); position:relative; margin:0 auto; cursor:pointer; overflow:hidden; }
.pg-orb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pg-charge-track{ max-width:300px; margin:0 auto 24px; background:#fff; border-radius:999px; height:18px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,0.1); }
.pg-charge-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold),#7ED0C4,var(--teal)); transition:width 200ms ease; }
.pg-fx-ring{ position:fixed; width:16px; height:16px; border-radius:50%; border:6px solid var(--gold); z-index:999; pointer-events:none; animation:pg-ring-pop 800ms ease-out forwards; }
@keyframes pg-ring-pop{ 0%{ transform:translate(-50%,-50%) scale(0.15); opacity:1; } 100%{ transform:translate(-50%,-50%) scale(9); opacity:0; } }
.pg-fx-particle{ position:fixed; font-size:var(--fs-h4); z-index:999; pointer-events:none; animation:pg-particle-fly 800ms ease-out forwards; }
@keyframes pg-particle-fly{ 0%{ transform:translate(-50%,-50%) translate(0,0) scale(0.6); opacity:1; } 100%{ transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1); opacity:0; } }
@keyframes pg-stomp{ 0%{ transform:scale(1,1); } 30%{ transform:scale(1.16,0.8) translateY(6%); } 60%{ transform:scale(0.93,1.08); } 100%{ transform:scale(1,1); } }
@keyframes pg-shake{ 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(-6px,3px); } 50%{ transform:translate(6px,-3px); } 75%{ transform:translate(-4px,2px); } }
.pg-shaking{ animation:pg-shake 350ms ease; }

.pg-memory-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; max-width:520px; margin:0 auto; }
.pg-memory-card{ aspect-ratio:1; border-radius:16px; border:0; cursor:pointer; padding:0; overflow:hidden; position:relative; background:var(--gold); box-shadow:var(--shadow-sm); }
.pg-memory-card img{ position:absolute; max-width:none; }
.pg-memory-card .back{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:34px; }

.pg-mood-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:34px; }
.pg-mood-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; border:3px solid var(--line); background:#fff; padding:20px 22px; border-radius:22px; cursor:pointer; box-shadow:var(--shadow-sm); }
.pg-mood-btn span.emoji{ font-size:40px; }
.pg-mood-btn span.label{ font-family:var(--font-display); font-size:var(--fs-sm); }
.pg-mood-result{ animation:pg-bounce-in 500ms cubic-bezier(.3,1.4,.4,1); }
@keyframes pg-bounce-in{ 0%{ transform:scale(0.6) translateY(20px); opacity:0; } 60%{ transform:scale(1.08) translateY(-4px); opacity:1; } 100%{ transform:scale(1) translateY(0); opacity:1; } }
.pg-mood-avatar{ position:relative; width:210px; height:210px; margin:0 auto 20px; border-radius:50%; overflow:hidden; border:7px solid #fff; box-shadow:var(--shadow-lg); }
.pg-mood-avatar img{ position:absolute; max-width:none; }
.pg-mood-bubble{ background:#fff; display:inline-block; border-radius:22px 22px 22px 4px; padding:19px 26px; box-shadow:var(--shadow-sm); font-family:var(--font-display); font-size:var(--fs-body); max-width:400px; }

.pg-breathe-circle{ position:relative; width:340px; height:340px; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; }
.pg-breathe-glow{ position:absolute; border-radius:50%; background:radial-gradient(circle at 40% 30%, rgba(30,156,139,0.28), rgba(30,156,139,0.04)); transition:width 3.6s ease-in-out, height 3.6s ease-in-out; }
.pg-breathe-mascot{ position:relative; width:185px; height:185px; border-radius:50%; overflow:hidden; border:7px solid #fff; box-shadow:var(--shadow-lg); transition:transform 3.6s ease-in-out; }
.pg-breathe-mascot img{ width:100%; height:100%; object-fit:cover; }
.pg-breathe-phase{ font-family:var(--font-display); font-size:var(--fs-h4); color:var(--teal-deep); min-height:32px; margin-bottom:24px; }

.pg-dress-frame{ position:relative; width:300px; height:300px; margin:0 auto 24px; border-radius:50%; border:7px solid #fff; box-shadow:var(--shadow-lg); background:var(--paper-alt); overflow:visible; }
.pg-dress-frame .base{ position:absolute; inset:0; border-radius:50%; overflow:hidden; }
.pg-dress-frame .base img{ width:100%; height:100%; object-fit:cover; }
.pg-sticker{ position:absolute; font-size:56px; animation:pg-sticker-in 300ms cubic-bezier(.3,1.5,.4,1); }
@keyframes pg-sticker-in{ 0%{ transform:scale(0) rotate(-30deg); opacity:0; } 100%{ transform:scale(1) rotate(0deg); opacity:1; } }
.pg-toggle-row{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.pg-toggle{ font-family:var(--font-display); font-size:var(--fs-sm); padding:13px 19px; border-radius:16px; border:2px solid var(--line); background:#fff; cursor:pointer; }
.pg-toggle.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Character page: video frame overlays the hero avatar ---------- */
.char-hero-art{
  display:inline-grid; grid-template-areas:"stack" "dots"; justify-items:center; row-gap:14px;
}
.char-video-frame{
  grid-area:stack; position:relative; z-index:3;
  width:240px; height:240px; border-radius:50%; overflow:hidden; cursor:pointer; background:#000;
  border:6px solid var(--panel);
  box-shadow:var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.power-hero-wrap{ grid-area:stack; z-index:1; }
.char-hero-ring{ grid-area:stack; z-index:2; }
.video-dots{ grid-area:dots; }
.video-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.92);
  box-shadow:0 6px 16px rgba(0,0,0,0.35); transition:transform 160ms ease;
}
.video-play-btn:hover{ transform:translate(-50%,-50%) scale(1.08); }
.video-play-btn svg{ width:22px; height:22px; fill:var(--ink); margin-left:3px; }