/* =========================================================
   tutorial.spirit.css
   - "精霊の鼓動" 風の中央テキスト表示
   - 文章中は背面クリックを完全ブロック
   - アクション待ちは背面クリックを通す（透過）
   ========================================================= */

.tutoSpirit {
  position: fixed;
  inset: 0;
  z-index: 12000;

  /* ★デフォルトはブロック（背面を押させない） */
  pointer-events: auto;
}

.tutoSpirit[hidden] { display: none; }

/* ★アクション待ち（例：1〜9押す）は背面を押せるように透過 */
.tutoSpirit.is-pass {
  pointer-events: none;
}

.tutoSpirit__backdrop{
  position:absolute;
  inset:0;
  /* ★変更：灰→緑寄り（誰でも分かる“ガイド/安全”の緑暗転） */
  background: radial-gradient(ellipse at center,
    rgba(0,20,10,.34) 0%,
    rgba(0,20,10,.14) 35%,
    rgba(0,20,10,0) 70%);
  opacity: 0;
}

.tutoSpirit__core{
  position:absolute;
  left:50%;
  top:42%;
  transform: translate(-50%,-50%);

  /* ★ここ変更（端末差でも“白パネル想定幅”を絶対に超えない） */
  width: min(560px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  box-sizing: border-box;

  /* 保険：画面外には絶対出さない（黒帯があっても事故らない） */
  left: 16px;
  right: 16px;
  margin-inline: auto;
  transform: translateY(-50%);

  padding: 12px 18px;
  border-radius: 18px;

  /* ★変更：緑反転（濃い緑パネル）→ 白文字がハッキリ見える */
  /* ★統一：枠（#a3d9b1）に合わせた緑系へ寄せる（同系統で揃える） */
  background: rgba(18, 78, 50, .90);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* ★統一：数字ボタン枠と同じ色に揃える */
  border: 1px solid #a3d9b1;

  /* ★統一：影の輪郭も同じ色で揃える */
  box-shadow:
    0 0 0 1px rgba(163,217,177,.22),
    0 12px 44px rgba(0,0,0,.45);

  opacity: 0;

  /* ★追加：矢印位置をボックス基準で安定させる */
  container-type: inline-size;
  overflow: visible;
}


.tutoSpirit__glow{
  position:absolute;
  inset:-10px;
  border-radius: 22px;

  /* ★統一：発光も “枠の緑 (#a3d9b1)” に完全一致させる */
  background: radial-gradient(circle at 50% 40%,
    rgba(163,217,177,.26) 0%,
    rgba(163,217,177,.14) 35%,
    rgba(255,255,255,0) 70%);

  filter: blur(10px);
  opacity: .0;
}

.tutoSpirit__text{
  position: relative;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  text-align: center;
  white-space: normal;
}

/* ===== アニメ：精霊の鼓動 ===== */
@keyframes spiritIn {
  0%   { opacity: 0; transform: translateY(-50%) scale(.96); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(-50%) scale(1);   filter: blur(0px); }
}
@keyframes spiritOut {
  0%   { opacity: 1; transform: translateY(-50%) scale(1);   filter: blur(0px); }
  100% { opacity: 0; transform: translateY(-50%) scale(.98); filter: blur(2px); }
}
@keyframes spiritBeat {
  0%   { transform: translateY(-50%) scale(1);    }
  18%  { transform: translateY(-50%) scale(1.02); }
  34%  { transform: translateY(-50%) scale(1.06); }
  55%  { transform: translateY(-50%) scale(1.01); }
  100% { transform: translateY(-50%) scale(1);    }
}
@keyframes glowBeat {
  0%   { opacity: .05; }
  18%  { opacity: .10; }
  34%  { opacity: .22; }
  55%  { opacity: .12; }
  100% { opacity: .06; }
}
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes backdropOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.tutoSpirit.is-show .tutoSpirit__backdrop{
  animation: backdropIn 260ms ease-out both;
}

/* ★修正：鼓動(spiritBeat)を消す（表示INだけにする） */
.tutoSpirit.is-show .tutoSpirit__core{
  animation: spiritIn 260ms ease-out both;
}

/* ★修正：glowの鼓動(glowBeat)も消す（必要なら表示自体は残す） */
.tutoSpirit.is-show .tutoSpirit__glow{
  animation: none !important;
}

.tutoSpirit.is-hide .tutoSpirit__backdrop{
  animation: backdropOut 220ms ease-in both;
}
.tutoSpirit.is-hide .tutoSpirit__core{
  animation: spiritOut 220ms ease-in both;
}

/* =========================================================
   ★追加：フォーカス演出（文章は消して、暗転だけ残す）
   ========================================================= */

.tutoSpirit.is-focus .tutoSpirit__core{
  opacity: 0 !important;
  animation: none !important;
}

.tutoSpirit.is-focus .tutoSpirit__glow{
  opacity: 0 !important;
  animation: none !important;
}

/* ★ここを“確実に消す”に変更：灰色の靄の正体(backdrop)を描画ごと消す */
.tutoSpirit.is-focus .tutoSpirit__backdrop{
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* =========================================================
   ★追加：左の1〜9を拡大＋強調（transformなのでレイアウト崩れなし）
   ========================================================= */

.tutoFocusTarget{
  position: relative;
  z-index: 10000;              /* overlayより前に出す */
  transform: scale(1.12);
  transform-origin: center;
}

/* ちょい鼓動（控えめ） */
@keyframes tutoFocusBeat{
  0%   { transform: scale(1.12); }
  35%  { transform: scale(1.16); }
  70%  { transform: scale(1.13); }
  100% { transform: scale(1.12); }
}

.tutoFocusTarget.is-beat{
  animation: tutoFocusBeat 1100ms ease-in-out infinite;
}
/* OPEN が解放された瞬間だけ付くクラス */
.tuto-open-pop{
  animation: tutoOpenPop 620ms cubic-bezier(.18,.8,.22,1) both;
  transform-origin: center;
}

@keyframes tutoOpenPop{
  0%{
    transform: scale(1);
  }

  45%{
    transform: scale(1.25);
  }

  70%{
    transform: scale(1.18);
  }

  100%{
    transform: scale(1);
  }
}
/* =========================================================
   tutorial: log unlock pop
   - ログが解放された瞬間だけ軽く拡大して目立たせる
   - JSいじらず、.tuto-unlocked が付いたタイミングで発火
   ========================================================= */

.tuto .log-card h3.tuto-unlocked,
.tuto .log-card #log.tuto-unlocked,
.tuto .log-card .log.tuto-unlocked{
  transform-origin: center center;
  animation: tutoPopOpen 900ms ease-out 1;
  will-change: transform;
}

@keyframes tutoPopOpen{
  0%   { transform: scale(1); }
  55%  { transform: scale(1.10); } /* ← OPEN文字と同じくらいの気持ち */
  100% { transform: scale(1); }
}
/* チュートリアル：フォーカス中のボタンをループで拡大縮小 */
.tuto .tutoFocusTarget.is-beat{
  transform-origin: center center;
  animation: tutoBeatLoop 1.2s ease-in-out infinite;
}

@keyframes tutoBeatLoop{
  0%   { transform: scale(1); }
  55%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}
/* CLOSE が解放された瞬間だけ付くクラス（OPENと同じ動き） */
.tuto-close-pop{
  animation: tutoClosePop 620ms cubic-bezier(.18,.8,.22,1) both;
  transform-origin: center;
}

@keyframes tutoClosePop{
  0%   { transform: scale(1); }
  45%  { transform: scale(1.25); }
  70%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.tuto-important{
  color:#ff6b6b;
  font-weight:700;
  white-space: nowrap;
}
/* =========================
   deck draw animation
========================= */

#deck-left.deck-beat{
  animation: deckBeat 2s ease;
}

@keyframes deckBeat{

  0%{
    transform:scale(1);
  }

  35%{
    transform:scale(0.7);
  }

  70%{
    transform:scale(0.7);
  }

  100%{
    transform:scale(1);
  }

}
.inline-icon{
  height:52px;
  vertical-align:-22px;
  margin:0 6px;
}
/* =========================
   tutorial tap icon
   - 画面基準 fixed をやめて、緑ボックス基準で固定
   - cqw でボックス幅に追従させる
   ========================= */

.tutoSpirit__tapIcon{
  position: absolute;
  right: clamp(-14px, -2.6cqw, -8px);
  bottom: clamp(-13px, -2.0cqw, -8px);

  width: clamp(48px, 11.5cqw, 64px);
  height: auto;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;

  opacity: .95;
  z-index: 12010;

  transform-origin: center;
  will-change: transform;

  animation: tutoTapFloat 2.2s ease-in-out infinite;
}


/* =========================
   subtle float animation
   ========================= */

@keyframes tutoTapFloat{

  0%{
    transform: translateY(0) scale(1);
  }

  40%{
    transform: translateY(-2px) scale(1.01);
  }

  60%{
    transform: translateY(-4px) scale(1.03);
  }

  80%{
    transform: translateY(-2px) scale(1.01);
  }

  100%{
    transform: translateY(0) scale(1);
  }

}