:root{
 --bg:#ffffff;
 --ink:#111;
 --muted:#666;
 --banner:#111;
 --banner-ink:#fff;
 --gap: 15px;          /* 既存 gap の置き換え用 */
 --center-gap: 10vw;   /* センター時に左右へ足すマージン量（調整用） */
 --sky-top: #7fc8ff;   /* デフォルト＝昼の空っぽい色 */
 --sky-mid: #e9f5ff;
}

.stage,
.reel,
.track,
 {
  touch-action: pan-x;
}
.card,
.card *
 {
  touch-action: auto;
}

.stage{
  position: relative; 
  width: 100vw;
  padding: 1rem 0 9rem;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--sky-top) 0%,
    var(--sky-mid) 25%,
    #ffffff 60%,
    #ffffff 100%
  );
}

.stage > canvas.particles-js-canvas-el{
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 と同義 */
  z-index: 1;             /* 背面（reelより下） */
  pointer-events: none;   /* ドラッグやクリックの邪魔をしない */
}
.reel{
 position:relative;
 padding: 24px 0 0px; 
 overflow:visible;
 user-select:none;
 z-index: 2;             /* 背景canvas(1)より前面に固定 */
}

/* ==== Drag/Fling 中は全アニメ＆トランジション停止 ==== */
.reel.dragging * {
  animation-play-state: paused !important;
  transition: none !important;
}

/* 念のため明示停止（ターゲット指定） */
.reel.dragging .card,
.reel.dragging .card.is-center,
.reel.dragging .prop,
.reel.dragging .badge,
.reel.dragging .layer--char,
.reel.dragging .layer--full {
  animation: none !important;
  transition: none !important;
}

.track{
 display:flex;
 gap: var(--gap);
 will-change:transform;
 backface-visibility:hidden;
 transform:translateZ(0);
 overflow: visible; 
}


/* ====== カード（外側は overflow:visible で全身のはみ出しを許可） ====== */
.card{
 position:relative;
 background:transparent;
 flex:0 0 auto;
 width:clamp(220px,18vw,320px);
 aspect-ratio:9/16;
 transform-origin:50% 90%;
 margin-inline: 0;                   /* ふだんは余白ゼロ */
 transition: margin-inline .35s ease;/* スムーズに広がる */
 overflow:visible;
}

.card.is-center{
 filter:none;
 margin-inline: var(--center-gap);
}
.card__link{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* クリップ領域：背景や桜・胸上など通常要素はここに入れて角丸を効かせる */
.card__clip{
 position:absolute;
 inset:0;
 background:rgba(255,255,255,.09);
 overflow:hidden;
 box-shadow:0 2px 4px rgba(0,0,0,.08);
 pointer-events: auto;
}

.card.is-center .card__clip{
 box-shadow:0 6px 12px rgba(0,0,0,.15)
}

.card__media{
 position:absolute;
 inset:0;
}

.card__media img{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
}

.card__media img[src$="goukaku.png"] {
  opacity: 0.9 !important;
}
.card__media img[src$="goukaku2.png"] {
  opacity: 0.9 !important;
}
.card__media img[src$="goukaku3.png"] {
  opacity: 0.9 !important;
}

/* レイヤーの基礎 */
.layer{
 position:absolute;
 inset:0;
 pointer-events:none
}


/* 胸から上（カード内・クリップの中） */
.layer--char {
  display: flex;
  align-items: flex-end;   /* 下揃え */
  justify-content: center; /* 左右中央揃え */
  transform: translateY(8px) scale(.96);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
  transition: opacity .25s ease, transform .45s cubic-bezier(.22,.7,.26,1.1);
  z-index: 2;
}

.char-img {
  width: 90%;
  object-fit: contain;   /* 全体を収める */
  border-radius: 18px;
  object-position: center bottom; /* 中央・下揃え */ 
}

/* 小物（桜＆クラッカー） - クリップ内 */
.layer--props{
 position:absolute;
 inset:0;
 z-index:5;
}

.layer--props-out{
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: visible;   /* 念のため明示 */
}

.prop{
 position:absolute;
 opacity:0;
 transform:translateY(10px) scale(.92);
 transition:opacity .3s ease, transform .45s cubic-bezier(.22,.8,.2,1)
}
.prop img{
 display:block;
 height:auto
}
.sakura img{
 width:100px;
}
.emb img{
 width:120px;
}
/* 位置（カード座標系） */
.sakura-1{
 left:-15%;
 top:25%;
}
.sakura-2{
 right:-8%;
 top:5%;
}
.sakura-3{
 right:-15%;
 top:50%;
}
.sakura-4{
 left:-8%;
 top:60%;
}
.sakura-5{
 left:-10%;
 top:-5%;
}


/* 合格バッジ（最前面に来る） */
.badge {
  position: absolute;
  width:130%;
  left: 50%;
  bottom: -50px; /* 下から少し外に出る位置 */
  transform: translateX(-50%) translateY(0);
  padding: 5px 8px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(184, 137,   0, 0.66) 0%,   /* #B88900 濃金（暗部） */
    rgba(212, 175,  55, 0.55) 32%,  /* #D4AF37 典型の金 */
    rgba(240, 200,  60, 0.45) 60%,  /* #F0C83C 明金 */
    rgba(255, 230, 140, 0.38) 100%  /* #FFE68C 淡金 */
  );
  backdrop-filter: blur(5px) contrast(0.95) brightness(1.02);
  -webkit-backdrop-filter: blur(5px) contrast(0.95) brightness(1.02);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.25);
  opacity: 0;
  animation: badgeRise 1s cubic-bezier(.25,.8,.25,1) 0.2s forwards;
  z-index: 7;
  text-shadow:1px 1px 2px white;
  text-align:center;
}

/* 全身レイヤー（カードの外へはみ出す。バッジより奥、胸上より手前） */
.layer--full{
 position:absolute;
 left:50%;
 transform:translate(-50%, 10px) scale(.95);
 width:90%;
 z-index:5;
 user-select: none;
 filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));
 overflow:visible;
 pointer-events: none;
}

.full-img{
 width:100%;
 height:auto;
 object-fit:contain
}

.layer--full{
 opacity:0;
 transition:opacity .25s ease, transform .5s cubic-bezier(.22,.8,.2,1)
}


/* 中央演出：桜はポップ位置にスナップ（上に流れない）、その後ゆらぎだけ */
.card.is-center .layer--char{
opacity:0;
 transform:translateY(0) scale(.98)
}
.card.is-center .prop{
opacity:1;
 transform:translateY(-4px) scale(1);
}

.card.is-center .prop.s-float-a{
animation:prop-float-a 3200ms ease-in-out .4s infinite alternate
}

.card.is-center .prop.s-float-b{
animation:prop-float-b 3500ms ease-in-out .5s infinite alternate
}

.card.is-center .prop.s-float-c{
animation:prop-float-c 3000ms ease-in-out .6s infinite alternate
}

.card.is-center .badge{
opacity:1;
translate:0 0;
 transition:opacity .4s ease .2s, translate .4s ease .2s
}

.card.is-center .layer--full{
opacity:1;
 transform:translate(-50%, 0) scale(1.02)
}


/* バウンス本体（外側のカードに） */
.card.is-center{
animation:card-bounce-enter 700ms cubic-bezier(.25,.85,.2,1.2) both, card-bounce-idle 2200ms ease-in-out 800ms infinite alternate
}

@keyframes card-bounce-enter{
0%{
transform:translateY(14px) scale(.96,.98)
}
38%{
transform:translateY(-12px) scale(1.04,.97)
}
58%{
transform:translateY(5px) scale(.99,1.02)
}
78%{
transform:translateY(-3px) scale(1.02,.99)
}
100%{
transform:translateY(0) scale(1,1)
}

}

@keyframes card-bounce-idle{
0%{
transform:translateY(0) scale(1)
}
100%{
transform:translateY(-5px) scale(1.01,.995)
}

}

/* ふよふよ揺れ（基準は -4px で停留。上に流れ続けない） */
@keyframes prop-float-a{
0%{
transform:translateY(-4px)
}
100%{
transform:translateY(-20px)
}

}

@keyframes prop-float-b{
0%{
transform:translateY(-4px)
}
100%{
transform:translateY(-30px)
}

}

@keyframes prop-float-c{
0%{
transform:translateY(-4px)
}
100%{
transform:translateY(-15px)
}
}

@keyframes prop-float-d{
0%{
transform:translateY(-4px)
}
100%{
transform:translateY(-4px)
}
}

.moon{
  position:absolute;
  top:2%;
  right:10%;
  width:140px;
  height:140px;
  background-image:url('../img/2026goukaku/moon.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.6s ease, transform 0.6s ease;
  pointer-events:none;
  z-index: 2;
  animation: moonFloat 5s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes moonFloat {
  0% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(8px) rotate(4deg);
  }
  100% {
    transform: translateY(0) rotate(-4deg);
  }
}

/* ★ 昼間用：太陽（左寄り） */
.sun{
  position:absolute;
  top:2%;
  right:10%;
  width:140px;
  height:140px;
  background-image:url('../img/2026goukaku/sun.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.6s ease, transform 0.6s ease;
  pointer-events:none;
  z-index: 2;
  animation: sunFloat 6s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes sunFloat {
  0%   { transform: translateY(0)  rotate(3deg); }
  50%  { transform: translateY(6px) rotate(-3deg); }
  100% { transform: translateY(0)  rotate(3deg); }
}

/* ★ 夕方用：星 */
.star{
  position:absolute;
  top:8%;
  right:10%;
  width:120px;
  height:120px;
  transform:translate(-50%, 10px);
  background-image:url('../img/2026goukaku/star.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0;
  transition:opacity 0.6s ease, transform 0.6s ease;
  pointer-events:none;
  z-index: 2;
  animation: starTwinkle 3s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes starTwinkle {
  from {transform: translateY(0);}
  to {transform: translateY(-10px);}
}


.ufo{
  position:absolute;
  top:10%;
  left:8%;
  width:120px;
  height:80px;
  background-image:url('../img/2026goukaku/ufo.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  z-index:2;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  animation:ufoFloat 10s ease-in-out infinite;
  animation-play-state:paused;
}

.ufo.is-visible{
  opacity:1;
  transform:translateY(0);
  animation-play-state:running;
}

@keyframes ufoFloat{
  0%   { transform:translate(0, 0) rotate(-10deg); }
  25%  { transform:translate(10px, -8px) rotate(10deg); }
  50%  { transform:translate(0, -12px) rotate(0deg); }
  75%  { transform:translate(-10px, -8px) rotate(10deg); }
  100% { transform:translate(0, 0) rotate(-10deg); }
}

/* もぐら */
.mogura{
  position:absolute;
  bottom:-80px;
  width:80px;
  height:80px;
  left:80%;
  transform:translateX(-50%);
  background-image:url('../img/2026goukaku/mogura.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center bottom;
  opacity:1;
  z-index:15;
  pointer-events:none;
  transition:
    bottom 0.35s ease,
    opacity 0s ease;
}

/* 吹き出し本体 */
.mogura-bubble{
  position:absolute;
  bottom:10px;             /* モグラ高さ80pxなので、少し上にかぶる */
  right:80px;              /* モグラの箱の右端から左に60pxぶんずらす */
  min-width:220px;
  max-width:320px;
  min-height:3.2rem;      /* 高さの基準だけ軽くつける */
  padding:8px 14px;
  border-radius:6px;

  background:#fff3d1;
  box-shadow:0 3px 8px rgba(0,0,0,0.2);

  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;

  font-family:'Yomogi', 'Zen Maru Gothic', sans-serif;
  font-size:1.15rem;
  font-weight:800;
  line-height:1.25;

  opacity:0;
  pointer-events:none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* 吹き出しの三角 */
.mogura-bubble::after{
  content:"";
  position:absolute;
  right:-10px;              /* 吹き出しの外側、右に突き出す */
  top:50%;
  transform:translateY(-50%);
  border-width:12px 0 10px 12px;
  border-style:solid;
  border-color:
    transparent
    transparent
    transparent
    #fff3d1; /* 左側に白い三角を出す */
}

/* モグラが可視状態のとき表示 */
.mogura.is-visible .mogura-bubble{
  opacity:1;
  transform:translateY(0);
}

/* もぐっている間や非表示時は消しておく（任意だけど推奨） */
.mogura.is-underground .mogura-bubble{
  opacity:0;
  transform:translateY(10px);
}

/* 地面に出ている状態 */
.mogura.is-visible{
  bottom:0;
  opacity:1;
}

/* ぴょこっと一瞬だけ上に */
.mogura.is-pop{
  bottom:0px;
  opacity:1;
}

/* 完全にもぐって消える状態 */
.mogura.is-underground{
  bottom:-80px;
  opacity:0;
}



/* スマホ調整 */
@media (max-width:640px){
  :root{
   --gap: 5px;          /* 既存 gap の置き換え用 */
   --center-gap: 15vw;   /* センター時に左右へ足すマージン量（調整用） */
  }
.stage{
  padding: 0.5rem 0 8rem;
}
 .track{
 gap:0.5rem;
}
.card{
 margin:0 0.3rem;
 width:clamp(180px,18vw,300px);
 transform-origin:50% 90%;
}
.sakura img{
 width:90px;
}

.badge {
  width:130%;
  left: 50%;
  bottom: -30px;
  padding: 2px 4px;
  border-radius: 10px;
}

.moon{
  top:2%;
  right:5%;
  width:120px;
  height:120px;
}
.sun{
  top:2%;
  right:5%;
  width:120px;
  height:120px;
}
.star{
  top:2%;
  right:5%;
  width:100px;
  height:100px;
}
.mogura{
  width:70px;
  height:70px;
}


/* 吹き出し本体 */
.mogura-bubble{
  min-width:180px;
  max-width:280px;
  padding:4px 8px;
  border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
  min-height:2.6rem;
  font-size:0.9rem;     
  font-weight:800;
  line-height:1.2;
}

.mogura-bubble::after{
  border-width:12px 0 10px 12px;
}

.ufo{
  width: 80px;
  height:80px;
}

}