/* =============================================
   解放演出オーバーレイ
   ============================================= */

#unlock-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
#unlock-overlay.active {
  opacity: 1;
  pointer-events: all;
}

#unlock-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: unlock-flash-in .7s ease forwards;
}
@keyframes unlock-flash-in {
  0%   { opacity: 1; }
  15%  { opacity: .88; }
  100% { opacity: .60; }
}
.flash-normal  {
  background:
    radial-gradient(ellipse at center, rgba(120,200,255,0.50) 0%, rgba(60,120,200,0.25) 40%, rgba(10,25,50,0.92) 100%);
}
.flash-rare    {
  background:
    radial-gradient(ellipse at center, rgba(200,100,255,0.55) 0%, rgba(120,40,200,0.28) 40%, rgba(20,0,52,0.94) 100%);
}
.flash-secret  {
  background:
    radial-gradient(ellipse at center, rgba(255,180,50,0.55) 0%, rgba(200,80,0,0.30) 40%, rgba(40,15,0,0.95) 100%);
}
.flash-mystery {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,245,80,0.65) 0%, rgba(255,180,0,0.35) 35%, rgba(30,20,0,0.96) 100%);
  animation: unlock-flash-in .7s ease forwards, mystery-flash-pulse 1.2s .7s ease-in-out infinite;
}
@keyframes mystery-flash-pulse {
  0%,100% { opacity: .60; }
  50%      { opacity: .75; }
}

#unlock-card {
  position: relative;
  z-index: 2;
  padding: 44px 40px 36px;
  border-radius: 20px;
  text-align: center;
  width: min(440px, 90vw);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transform: scale(.65) translateY(50px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.18,.89,.32,1.30), opacity .45s ease;
  box-shadow: 0 28px 90px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.10);
}
#unlock-card.show {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.card-normal  {
  background: rgba(16,38,72,0.92);
  border: 1px solid rgba(100,185,255,.40);
  box-shadow: 0 28px 90px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08), 0 0 40px rgba(100,180,255,0.15);
}
.card-rare    {
  background: rgba(22,8,52,0.94);
  border: 1px solid rgba(185,82,255,.55);
  box-shadow: 0 28px 90px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08), 0 0 50px rgba(180,60,255,0.22);
}
.card-secret  {
  background: rgba(42,18,4,0.95);
  border: 1px solid rgba(255,155,42,.62);
  box-shadow: 0 28px 90px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08), 0 0 60px rgba(255,120,20,0.28);
}
.card-mystery {
  background: rgba(28,22,4,0.96);
  border: 1px solid rgba(255,225,62,.68);
  box-shadow: 0 28px 90px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.10), 0 0 80px rgba(255,215,0,0.35);
  animation: mystery-card-glow 2s 0.6s ease-in-out infinite;
}
@keyframes mystery-card-glow {
  0%,100% { box-shadow: 0 28px 90px rgba(0,0,0,.60), 0 0 60px rgba(255,215,0,0.28); }
  50%      { box-shadow: 0 28px 90px rgba(0,0,0,.60), 0 0 100px rgba(255,215,0,0.55); }
}

#unlock-rings {
  position: absolute;
  inset: -50px;
  pointer-events: none;
}
.unlock-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,225,62,.62);
  animation: ring-expand 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes ring-expand {
  0%   { transform: scale(.2); opacity: .9; }
  60%  { opacity: .6; }
  100% { transform: scale(2.2); opacity: 0; }
}

#unlock-label {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 4px 16px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 700;
}
.label-normal  { color: rgba(160,220,255,.9);  background: rgba(100,180,255,.15); border: 1px solid rgba(100,180,255,.3); }
.label-rare    { color: rgba(220,140,255,.95); background: rgba(160,60,255,.18);  border: 1px solid rgba(180,80,255,.4); }
.label-secret  { color: rgba(255,190,80,.95);  background: rgba(200,100,0,.22);   border: 1px solid rgba(255,150,40,.45); }
.label-mystery { color: rgba(255,235,80,.98);  background: rgba(180,140,0,.25);   border: 1px solid rgba(255,220,60,.55); }

#unlock-icon {
  font-size: 64px;
  margin: 4px 0 14px;
  animation: icon-bounce .65s .25s cubic-bezier(.18,.89,.32,1.35) both;
  display: block;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.5));
}
@keyframes icon-bounce {
  0%   { transform: scale(0) rotate(-20deg); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 20px rgba(255,255,255,.5)); }
}
.card-mystery #unlock-icon {
  animation: icon-bounce .65s .25s cubic-bezier(.18,.89,.32,1.35) both, icon-mystery-glow 1.5s 1s ease-in-out infinite;
}
@keyframes icon-mystery-glow {
  0%,100% { filter: drop-shadow(0 0 16px rgba(255,215,0,.6)); }
  50%      { filter: drop-shadow(0 0 36px rgba(255,215,0,1)) drop-shadow(0 0 60px rgba(255,200,0,.5)); }
}

#unlock-name {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .12em;
  margin-bottom: 12px;
  text-shadow: 0 0 28px rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.5);
}

#unlock-flavor {
  font-size: 13px;
  color: rgba(200,230,255,.75);
  line-height: 1.8;
  margin-bottom: 24px;
  letter-spacing: .04em;
}

#unlock-close {
  padding: 10px 28px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .08em;
  transition: background .2s, border-color .2s, transform .15s;
}
#unlock-close:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-1px);
}

.unlock-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  animation: particle-fly var(--dur, .9s) cubic-bezier(.22,.61,.36,1) forwards;
  box-shadow: 0 0 6px 2px currentColor;
}
@keyframes particle-fly {
  0%   { transform: translate(0,0) scale(1.2); opacity: 1; }
  30%  { opacity: .9; }
  100% { transform: translate(var(--tx,60px), var(--ty,-80px)) scale(0); opacity: 0; }
}

@keyframes screen-shake {
  0%,100% { transform: translateX(0) rotate(0); }
  15%      { transform: translateX(-8px) rotate(-.4deg); }
  30%      { transform: translateX(8px) rotate(.4deg); }
  45%      { transform: translateX(-5px) rotate(-.2deg); }
  60%      { transform: translateX(5px) rotate(.2deg); }
  75%      { transform: translateX(-2px); }
  90%      { transform: translateX(2px); }
}
body.shake { animation: screen-shake .5s ease; }

/* =============================================
   テーマ別エフェクト用パーツ
   ============================================= */

.petal {
  position: fixed;
  top: -40px;
  pointer-events: none;
  z-index: 9000;
  animation: petal-fall linear forwards;
  user-select: none;
}
@keyframes petal-fall {
  0%   { top: -40px; transform: rotate(0) translateX(0); opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 110vh; transform: rotate(520deg) translateX(60px); opacity: 0; }
}

.star-dot {
  position: fixed;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 1;
  animation: star-twinkle ease-in-out infinite;
}
@keyframes star-twinkle {
  0%,100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); }
}

.meteor-streak {
  position: fixed;
  width: 2px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff, rgba(200,230,255,.9));
  border-radius: 0 0 2px 2px;
  transform-origin: top center;
  transform: rotate(var(--angle, 30deg));
  animation: meteor-drop linear forwards;
  opacity: .9;
}
@keyframes meteor-drop {
  0%   { transform: rotate(var(--angle,30deg)) translateY(0); opacity: .9; }
  80%  { opacity: .8; }
  100% { transform: rotate(var(--angle,30deg)) translateY(110vh); opacity: 0; }
}

.neon-spark {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  animation: neon-float linear forwards;
}
@keyframes neon-float {
  0%   { transform: translateY(0) scale(1); opacity: .9; }
  100% { transform: translateY(-120px) scale(0); opacity: 0; }
}

.aurora-band {
  position: fixed;
  top: 0;
  width: 200px;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: aurora-wave ease-in-out infinite;
  filter: blur(40px);
}
@keyframes aurora-wave {
  0%,100% { opacity: 0; transform: skewX(-5deg) scaleX(.8); }
  50%      { opacity: .18; transform: skewX(5deg) scaleX(1.1); }
}

.bubble {
  position: fixed;
  border-radius: 50%;
  border: 1px solid rgba(100,180,255,.4);
  background: rgba(100,180,255,.08);
  pointer-events: none;
  z-index: 2;
  animation: bubble-rise linear forwards;
}
@keyframes bubble-rise {
  0%   { transform: translateY(0) scale(1); opacity: .7; }
  100% { transform: translateY(-110vh) scale(1.3); opacity: 0; }
}

.firefly {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #aaff66;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 6px 2px rgba(150,255,80,.6);
  animation: firefly-drift ease-in-out infinite;
}
@keyframes firefly-drift {
  0%,100% { transform: translate(0,0); opacity: .2; }
  25%      { transform: translate(15px,-20px); opacity: .9; }
  50%      { transform: translate(-10px,-35px); opacity: .5; }
  75%      { transform: translate(20px,-50px); opacity: .85; }
}

.candy-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 2;
  font-size: 14px;
  animation: candy-twirl linear forwards;
}
@keyframes candy-twinkle {
  0%,100% { opacity: 0; transform: scale(.5) rotate(0); }
  50%      { opacity: 1; transform: scale(1) rotate(30deg); }
}

.raindrop {
  position: fixed;
  width: 1px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom, transparent, rgba(160,210,255,.7));
  animation: raindrop-fall linear forwards;
  border-radius: 0 0 2px 2px;
}
@keyframes raindrop-fall {
  0%   { opacity: .8; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(110vh); }
}

.snowflake {
  position: fixed;
  pointer-events: none;
  z-index: 2;
  color: rgba(200,240,255,.9);
  animation: snow-drift linear forwards;
  font-size: 12px;
  text-shadow: 0 0 6px rgba(180,230,255,.8);
}
@keyframes snow-drift {
  0%   { top: -20px; transform: translateX(0) rotate(0); opacity: 1; }
  100% { top: 110vh; transform: translateX(40px) rotate(360deg); opacity: 0; }
}

.lantern {
  position: fixed;
  pointer-events: none;
  z-index: 2;
  font-size: 28px;
  animation: lantern-sway ease-in-out infinite;
  transform-origin: top center;
  filter: drop-shadow(0 0 8px rgba(255,120,40,.6));
}
@keyframes lantern-sway {
  0%,100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.sun-ray {
  position: fixed;
  top: -60px;
  width: 3px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255,240,100,.5), transparent);
  border-radius: 3px;
  transform-origin: top center;
  animation: sun-ray-sweep ease-in-out infinite;
  filter: blur(2px);
}
@keyframes sun-ray-sweep {
  0%,100% { opacity: .2; transform: rotate(var(--angle,0deg)) scaleY(.9); }
  50%      { opacity: .55; transform: rotate(calc(var(--angle,0deg) + 3deg)) scaleY(1.05); }
}

.cyber-particle {
  position: fixed;
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
  animation: cyber-drift linear forwards;
}
@keyframes cyber-drift {
  0%   { transform: translateY(0) scale(1); opacity: .8; }
  100% { transform: translateY(-100px) scale(0); opacity: 0; }
}

.shutter-panel {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  background: rgba(20,20,20,.15);
  border: 1px solid rgba(80,80,80,.2);
  animation: shutter-close ease-in forwards;
  transform-origin: top center;
}
@keyframes shutter-close {
  0%   { transform: scaleY(0); opacity: .8; }
  60%  { transform: scaleY(1); opacity: .5; }
  100% { transform: scaleY(1); opacity: 0; }
}

.firework-burst {
  position: fixed;
  pointer-events: none;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: fw-burst ease-out forwards;
}
@keyframes fw-burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx,0px), var(--ty,-80px)) scale(0); opacity: 0; }
}

.mist-cloud {
  position: fixed;
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,0,120,.25), transparent 70%);
  animation: mist-drift ease-in-out infinite;
  filter: blur(20px);
}
@keyframes mist-drift {
  0%,100% { transform: translateX(0) scale(1); opacity: .3; }
  50%      { transform: translateX(30px) scale(1.2); opacity: .6; }
}

/* 虹（天気晴れ） */
.rainbow-arc {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  pointer-events: none;
  z-index: 0;
  border-radius: 200px 200px 0 0;
  background: conic-gradient(
    from 180deg at 50% 100%,
    rgba(255,0,0,.18) 0deg,
    rgba(255,160,0,.16) 30deg,
    rgba(255,240,0,.15) 60deg,
    rgba(0,200,80,.14) 90deg,
    rgba(0,120,255,.15) 120deg,
    rgba(120,0,200,.14) 150deg,
    transparent 180deg
  );
  filter: blur(8px);
  opacity: 0;
  animation: rainbow-appear 1.5s ease forwards;
}
.rainbow-arc.rainbow-persistent {
  animation: rainbow-appear 1.5s ease forwards, rainbow-pulse 6s 1.5s ease-in-out infinite;
}
@keyframes rainbow-appear {
  from { opacity: 0; transform: translateX(-50%) scaleX(.6); }
  to   { opacity: 1; transform: translateX(-50%) scaleX(1); }
}
@keyframes rainbow-pulse {
  0%,100% { opacity: .7; }
  50%      { opacity: 1; }
}

/* 図鑑ロックトースト */
#zukan-locked-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,40,70,.92);
  color: rgba(200,230,255,.95);
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  border: 1px solid rgba(100,180,255,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  z-index: 8888;
  transition: opacity .3s ease, transform .3s ease;
  white-space: nowrap;
}
#zukan-locked-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}