/* ============================================================
   es Village VFX (Visual Effects) — v1 への注入用スタイル
   中世RPG絵本テーマ「ススキノ村」のゲーミフィケーション演出。
   v1 (index.html) には一切変更を加えず、本 CSS を <link> で読み込むだけ。
   ============================================================ */

/* ----- 共通変数（v1 と衝突しないよう --esvfx- prefix） ----- */
:root {
  --esvfx-color-night: #1B2440;
  --esvfx-color-night-deep: #0F1530;
  --esvfx-color-lantern: #FFA351;
  --esvfx-color-parchment: #F4E4BC;
  --esvfx-color-wood: #5C3D2E;
  --esvfx-color-coral: #E07B4F;
  --esvfx-color-coral-bright: #FC7734;
  --esvfx-color-gold: #D4A455;
  --esvfx-rank-bronze: #B08355;
  --esvfx-rank-silver: #C0C8D0;
  --esvfx-rank-gold: #D4A455;
  --esvfx-rank-diamond: #6FC9D6;
  --esvfx-success: #84A518;
  --esvfx-danger: #B83C2A;

  --esvfx-font-mincho: "Shippori Mincho", "Yu Mincho", serif;
  --esvfx-font-pixel: "DotGothic16", "Yu Gothic", system-ui, sans-serif;
  --esvfx-font-en: "Press Start 2P", monospace;
}

/* ============================================================
   LevelUp 演出 (ランクアップ全画面オーバーレイ)
   ============================================================ */
.esvfx-levelup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 21, 48, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 24px;
  opacity: 0;
  cursor: pointer;
}

.esvfx-levelup-ray {
  position: absolute;
  width: 200vmax;
  height: 200vmax;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 163, 81, 0.30) 0deg,
      transparent 30deg 60deg,
      rgba(255, 163, 81, 0.25) 90deg,
      transparent 120deg 150deg,
      rgba(212, 164, 85, 0.25) 180deg,
      transparent 210deg 240deg,
      rgba(255, 163, 81, 0.30) 270deg,
      transparent 300deg 330deg
    );
  filter: blur(40px);
  pointer-events: none;
}

.esvfx-levelup-card {
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 163, 81, 0.15), transparent 60%),
    linear-gradient(135deg, var(--esvfx-color-night-deep) 0%, var(--esvfx-color-night) 100%);
  color: var(--esvfx-color-parchment);
  border: 3px solid var(--esvfx-color-gold);
  border-radius: 18px;
  padding: 32px 24px;
  box-shadow:
    0 0 60px rgba(255, 163, 81, 0.6),
    0 12px 36px rgba(0, 0, 0, 0.5);
  text-align: center;
  max-width: 360px;
  font-family: var(--esvfx-font-pixel);
}

.esvfx-levelup-banner {
  font-family: var(--esvfx-font-mincho);
  font-size: 22px;
  color: var(--esvfx-color-lantern);
  text-shadow: 0 0 18px rgba(255, 163, 81, 0.7);
  margin: 0 0 24px;
  letter-spacing: 0.1em;
}

.esvfx-levelup-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.esvfx-levelup-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}

.esvfx-levelup-icon {
  font-size: 35px;
  opacity: 0.6;
  line-height: 1;
}

.esvfx-levelup-icon-big {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(255, 163, 81, 0.6));
}

.esvfx-levelup-name {
  font-size: 12px;
  color: #b0b0b0;
}

.esvfx-levelup-name-big {
  font-family: var(--esvfx-font-mincho);
  font-size: 16px;
  font-weight: 700;
  color: var(--esvfx-color-gold);
}

.esvfx-levelup-arrow {
  font-family: var(--esvfx-font-mincho);
  font-size: 22px;
  color: var(--esvfx-color-lantern);
}

.esvfx-levelup-cta {
  font-size: 14px;
  color: var(--esvfx-color-parchment);
  opacity: 0.85;
  margin: 0;
}

/* ============================================================
   ExpFly 演出 (+N P が飛んでいく)
   ============================================================ */
.esvfx-expfly {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 100001;
  font-family: var(--esvfx-font-mincho);
  font-size: 28px;
  font-weight: 700;
  color: var(--esvfx-color-lantern);
  text-shadow:
    0 0 12px rgba(255, 163, 81, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.4);
  padding: 4px 12px;
  background: rgba(15, 21, 48, 0.45);
  border: 1px solid rgba(212, 164, 85, 0.5);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  will-change: transform, opacity;
}

/* ============================================================
   BadgeUnlock 演出 (バッジ獲得オーバーレイ)
   ============================================================ */
.esvfx-badge-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 21, 48, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 24px;
  opacity: 0;
  cursor: pointer;
}

.esvfx-badge-seal {
  background: var(--esvfx-color-parchment);
  color: #2A1F14;
  border: 3px solid var(--esvfx-color-wood);
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
  max-width: 320px;
  box-shadow:
    0 0 40px rgba(212, 164, 85, 0.5),
    0 12px 36px rgba(0, 0, 0, 0.5),
    0 0 0 6px rgba(244, 228, 188, 0.5) inset;
  position: relative;
  font-family: var(--esvfx-font-pixel);
}

.esvfx-badge-seal::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background: var(--esvfx-color-coral);
  border: 2px solid var(--esvfx-color-wood);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(224, 123, 79, 0.5);
}

.esvfx-badge-title {
  font-family: var(--esvfx-font-en);
  font-size: 12px;
  color: #6E5A3E;
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}

.esvfx-badge-icon {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(212, 164, 85, 0.6));
  margin-bottom: 8px;
  display: block;
}

.esvfx-badge-name {
  font-family: var(--esvfx-font-mincho);
  font-size: 22px;
  font-weight: 700;
  color: var(--esvfx-color-wood);
  margin: 0 0 8px;
}

.esvfx-badge-desc {
  font-size: 14px;
  color: #6E5A3E;
  margin: 0 0 16px;
  line-height: 1.5;
}

.esvfx-badge-cta {
  font-size: 12px;
  color: #6E5A3E;
  margin: 0;
}

/* ============================================================
   Toast (右下・スタック表示)
   ============================================================ */
.esvfx-toast-tray {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  right: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100002;
  pointer-events: none;
}
@media (min-width: 640px) {
  .esvfx-toast-tray {
    left: auto;
    max-width: 380px;
  }
}

.esvfx-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--esvfx-color-parchment);
  color: #2A1F14;
  border-radius: 8px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(92, 61, 46, 0.2) inset;
  font-family: var(--esvfx-font-pixel);
  font-size: 14px;
  cursor: pointer;
  border-left: 4px solid #168796;
  animation: esvfx-slidein 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.esvfx-toast .esvfx-toast-icon { font-size: 18px; line-height: 1; }
.esvfx-toast .esvfx-toast-msg { flex: 1; }
.esvfx-toast .esvfx-toast-dismiss {
  font-family: var(--esvfx-font-en);
  color: #6E5A3E;
  font-size: 16px;
}

.esvfx-toast.tone-info     { border-left-color: #168796; }
.esvfx-toast.tone-success  { border-left-color: var(--esvfx-success); }
.esvfx-toast.tone-warning  { border-left-color: var(--esvfx-color-coral-bright); }
.esvfx-toast.tone-error    { border-left-color: var(--esvfx-danger); background: #f6d8d2; }

@keyframes esvfx-slidein {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* prefers-reduced-motion: アニメーション抑制 */
@media (prefers-reduced-motion: reduce) {
  .esvfx-toast { animation: none; }
}