:root {
  --bg-dark: #121212;
  --card-dark: #1e1e1e;
  --neon-green: #00E676;
  --text-white: #ffffff;
  --text-gray: #aaaaaa;
}

/* ↓一番上の方にある body に overflow-x: hidden; を追記します */
html, body { 
  font-family: sans-serif; 
  background: var(--bg-dark); 
  color: var(--text-white); 
  margin: 0; 
  padding: 0; 
  overflow-x: hidden; /* 画面全体の横スクロールを絶対に禁止 */
  width: 100%;
}
body { padding-bottom: 85px; }

header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: #000; border-bottom: 2px solid var(--neon-green); }
.logo { height: 35px; }

/* SVG SNSアイコンリンク */
.header-icons { display: flex; align-items: center; gap: 15px; margin-right: 15px; margin-left: auto; }
.sns-link { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: 0.2s; color: #fff; text-decoration: none; }
.sns-link svg { width: 100%; height: 100%; fill: currentColor; }
.sns-link:hover { color: var(--neon-green); transform: scale(1.1); }

.btn-mypage { background: transparent; color: var(--neon-green); border: 1px solid var(--neon-green); padding: 6px 12px; border-radius: 4px; font-weight: bold; cursor: pointer; }
.btn-logbo { background: #333; color: var(--text-white); border: 1px solid #555; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; position: absolute; top: 15px; right: 15px; cursor: pointer; }

/* お知らせの+1ptボタン (極小・目立たない) */
.btn-tiny { background: transparent; color: #666; border: 1px solid #444; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; cursor: pointer; white-space: nowrap; margin-left: 10px; }
.btn-tiny:hover:not(:disabled) { color: var(--neon-green); border-color: var(--neon-green); }
.btn-tiny:disabled { color: #333; border-color: #222; cursor: not-allowed; }

.info-marquee { background: #000; padding: 8px 15px; font-size: 0.8rem; color: #aaa; white-space: nowrap; overflow-x: auto; border-bottom: 1px solid #333; text-align: center; }

.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: #000; display: flex; border-top: 1px solid #333; z-index: 100; height: 70px; }
.nav-btn { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px; background: none; border: none; border-top: 3px solid transparent; color: #777; font-size: 0.85rem; font-weight: bold; cursor: pointer; transition: 0.2s; }
.nav-btn.active { color: var(--neon-green); border-top-color: var(--neon-green); }

main { padding: 15px; }
.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }

.rank-card { border-radius: 12px; padding: 25px 20px; margin-bottom: 20px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
/* 重厚感のあるダークメタリック仕様 */
.card-bronze { background: linear-gradient(135deg, #4e342e 0%, #2e1a14 50%, #4e342e 100%); color: #fff; border: 1px solid #8d6e63; }
.card-silver { background: linear-gradient(135deg, #455a64 0%, #263238 50%, #455a64 100%); color: #fff; border: 1px solid #b0bec5; }
.card-gold { background: linear-gradient(135deg, #5c4d11 0%, #2e2402 50%, #5c4d11 100%); color: #fff; border: 1px solid #d4af37; box-shadow: 0 4px 15px rgba(212,175,55,0.15); }
.card-platinum { background: linear-gradient(135deg, #283593 0%, #101842 50%, #283593 100%); color: #fff; border: 1px solid #7986cb; box-shadow: 0 4px 15px rgba(121,134,203,0.15); }
.card-ultimate { background: linear-gradient(135deg, #6a1b9a 0%, #31084d 50%, #6a1b9a 100%); color: #fff; border: 1px solid #ea80fc; box-shadow: 0 4px 15px rgba(234,128,252,0.15); }

.card-name { margin-top: 0; margin-bottom: 15px; font-size: 1.3rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.qr-container { background: #fff; padding: 10px; border-radius: 12px; display: inline-block; border: 4px solid #fff; }
.qr-container img { width: 140px; height: 140px; display: block; border-radius: 8px; }
.card-id { font-size: 0.75rem; opacity: 0.8; margin-top: 5px; margin-bottom: 20px; }

.card-bottom { display: flex; justify-content: space-between; padding: 0 20px; }
.rank-block, .point-block { display: flex; flex-direction: column; }
.label { font-size: 0.7rem; opacity: 0.9; margin-bottom: 2px; text-align: center; }
.value { font-size: 1.8rem; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }

/* 会員証の英字ランク専用スタイル（洗練されたセリフ体・文字間隔・金属光沢） */
#user-rank {
  font-family: 'Times New Roman', 'Georgia', 'Garamond', serif;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 0 10px rgba(255,255,255,0.2);
}

.card { border-radius: 8px; margin-bottom: 15px; }
.dark-card { background: var(--card-dark); padding: 15px; border: 1px solid #333; }
.green-title { color: var(--neon-green); margin-top: 0; font-size: 1.1rem; }

.btn { width: 100%; padding: 12px; border-radius: 6px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: 0.2s; border: none; }
.btn:active { transform: scale(0.98); }
.green-btn { background: var(--neon-green); color: #000; }
.outline-green { background: transparent; color: var(--neon-green); border: 1px solid var(--neon-green); }
.btn:disabled { background: #333; color: #666; cursor: not-allowed; border: 1px solid #444; }

input, textarea { width: 100%; padding: 12px; margin: 8px 0; box-sizing: border-box; background: #111; border: 1px solid #444; color: #fff; border-radius: 6px; font-size: 1rem; }
input:focus, textarea:focus { outline: none; border-color: var(--neon-green); }

.toggle-btns { display: flex; margin-bottom: 15px; border-radius: 6px; overflow: hidden; border: 1px solid #444; }
.toggle-btns button { flex: 1; padding: 12px; background: #111; border: none; color: #888; cursor: pointer; font-size: 0.95rem; }
.toggle-btns button.active { background: #333; color: var(--neon-green); font-weight: bold; }

.item-list { display: flex; flex-direction: column; gap: 10px; }
.item-card { background: var(--card-dark); border-left: 4px solid var(--neon-green); padding: 12px; border-radius: 4px 8px 8px 4px; }
.item-title { font-weight: bold; font-size: 1.05rem; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
.item-desc { font-size: 0.85rem; color: var(--text-gray); line-height: 1.4; margin-bottom: 8px; white-space: pre-wrap; }

.progress-container { background: #111; height: 6px; border-radius: 3px; overflow: hidden; margin: 8px 0; }
.progress-fill { background: var(--neon-green); height: 100%; transition: width 0.5s ease; }

.badge { background: #ff0000; color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 0.75rem; font-weight: bold; }
.trophy { display: inline-block; background: #111; padding: 8px 12px; margin: 5px; border-radius: 20px; border: 1px solid var(--neon-green); font-size: 0.85rem; color: var(--neon-green); }

.screen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-dark); z-index: 500; display: flex; flex-direction: column; overflow-x: hidden; } /* ここにはみ出し禁止を追加 */
.overlay-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #000; border-bottom: 1px solid #333; }
.overlay-header h2 { margin: 0; color: var(--neon-green); font-size: 1.2rem; }
.btn-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 0 10px; }
.overlay-content { flex: 1; padding: 15px; overflow-y: auto; overflow-x: hidden; } /* ここにも追加 */

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,230,118,0.5); } 70% { box-shadow: 0 0 0 10px rgba(0,230,118,0); } 100% { box-shadow: 0 0 0 0 rgba(0,230,118,0); } }


/* =========================================
   着せ替えフレーム用CSS (HTML完全非破壊・サイズ変動ゼロ版)
========================================= */

/* 1. カード本体がエフェクトを裏側に隠さないための絶対設定 */
.rank-card {
  position: relative;
  z-index: 1; 
}

/* -----------------------------------------
   N レア：材質や基本装飾（内側に描画してサイズを保つ）
----------------------------------------- */
/* (N) マットブラック */
.frame-matte-black {
  box-shadow: inset 0 0 0 8px #0a0a0a, 0 0 10px #000;
}
/* (N) ウッド（木目風） */
.frame-wood::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
  padding: 8px; /* 枠の太さ（カードの内側に8px） */
  background-image: repeating-radial-gradient(ellipse at 50% 150%, #8b5a2b 0px, #6b4423 6px, #523116 12px, #8b5a2b 18px);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; /* タップ操作を邪魔しない */
}

/* -----------------------------------------
   SSR レア：動画完全再現アニメーション
----------------------------------------- */
/* (SSR) レインボーブレス（背面の虹色発光・回転） */
.frame-rainbow::after {
  content: ''; position: absolute;
  inset: -4px; /* カードの外側に4pxはみ出させる */
  border-radius: 14px; /* はみ出した分の丸みを調整 */
  padding: 4px; /* 光る枠の太さ（はみ出した分だけ描画） */
  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  background-size: 400%; 
  animation: rainbow-anim 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* -----------------------------------------
   1. フレイム (修正版: 明暗スピードを1/3にし、じんわりと)
----------------------------------------- */
/* 既存の .frame-anim-flame を削除し、以下に差し替えてください */
.frame-anim-flame { box-shadow: inset 0 0 0 16px rgba(255,69,0,0.1); animation: none; }
.frame-anim-flame::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px);
  /* SVGのアニメーション時間を18s（3倍）、CSSアニメーションを12s（3倍）に延長してゆっくりに */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='fire'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.05' numOctaves='3'%3E%3Canimate attributeName='baseFrequency' values='0.02 0.05; 0.02 0.06; 0.02 0.05' dur='18s' repeatCount='indefinite'/%3E%3C/feTurbulence%3E%3CfeDisplacementMap in='SourceGraphic' scale='15'/%3E%3C/filter%3E%3Crect x='0' y='0' width='100' height='100' fill='none' stroke='%23ff4500' stroke-width='20' filter='url(%23fire)' opacity='0.3'/%3E%3Crect x='0' y='0' width='100' height='100' fill='none' stroke='%23ff0000' stroke-width='6' filter='url(%23fire)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: cover; box-shadow: inset 0 0 20px rgba(255,140,0,0.3);
  animation: flame-breathe 12s ease-in-out infinite alternate;
}
@keyframes flame-breathe { 0% { opacity: 0.7; } 100% { opacity: 1; } }

/* -----------------------------------------
   2. スキャンライン (変更案: サイバー感の強いレーザーと走査線)
----------------------------------------- */
/* 既存の .frame-anim-scanline を削除し、以下に差し替えてください */
.frame-anim-scanline { box-shadow: inset 0 0 0 16px rgba(0,255,255,0.1), inset 0 0 15px #0ff; }
.frame-anim-scanline::before {
  content: ''; position: absolute; top: -20%; left: 0; width: 100%; height: 30px;
  /* レーザーの中心に超高輝度な「白いコア」を持たせ、上下にシアンのグラデーション */
  background: linear-gradient(to bottom, rgba(0,255,255,0) 0%, rgba(0,255,255,0.8) 45%, rgba(255,255,255,1) 50%, rgba(0,255,255,0.8) 55%, rgba(0,255,255,0) 100%);
  box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
  animation: scan-move 2.5s linear infinite;
  z-index: 10; pointer-events: none; clip-path: inset(0 round 12px);
}
/* さらに背景に薄いサイバー走査線(固定グリッド)を追加 */
.frame-anim-scanline::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; clip-path: inset(0 round 12px);
  background: repeating-linear-gradient(transparent, transparent 2px, rgba(0,255,255,0.1) 2px, rgba(0,255,255,0.1) 4px);
}

/* =========================================
   PKチップ＆ガチャ用CSS
========================================= */
.pk-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; /* 14pxの文字と5pxの枠が収まるサイズ */
  background: radial-gradient(circle, #ffe599 40%, #ffcc00 100%); /* 黄色地 */
  border: 5px dashed #b8860b;
  border-radius: 50%;
  color: #cc0000;
  font-weight: 900;
  font-size: 14px;
  text-shadow: 1px 1px 0px #fff;
  vertical-align: middle; 
  margin: 0 4px;
  box-sizing: border-box;
}
.gacha-item { background: #111; border: 1px solid #333; padding: 10px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; }
.gacha-item.dupe { opacity: 0.6; }
.gacha-rarity { font-weight: bold; font-size: 1.2rem; margin-right: 10px; }
.rarity-N { color: #aaa; } .rarity-R { color: #4fc3f7; } .rarity-SR { color: #ba68c8; } .rarity-SSR { color: #ffeb3b; text-shadow: 0 0 5px #ffeb3b; } .rarity-UR { color: #ff5252; text-shadow: 0 0 5px #ff5252; }

/* =========================================
   Bar PsydeKick - 全90種着せ替えフレーム 完全版
========================================= */

/* --- 共通マスク（くり抜き）設定：枠を倍の太さ（16px）に拡張 --- */
[class*="frame-mask-"]::after, [class*="frame-anim-"]::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  padding: 16px; /* 枠の太さを倍増 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;
}

/* -----------------------------------------
   【N】 ノーマル 30種 (材質・基本装飾) - 極厚・高画質版
----------------------------------------- */
/* ソリッド系（ベタ塗り・内枠）も16px基準へ変更 */
.frame-solid-matte-black { box-shadow: inset 0 0 0 16px #1a1a1a, inset 0 0 20px #000; }
.frame-solid-snow-white { box-shadow: inset 0 0 0 16px #fcfcfc, inset 0 0 20px #ccc; }
.frame-solid-wine-red { box-shadow: inset 0 0 0 16px #5b1e31, inset 0 0 20px #000; }
.frame-solid-navy-blue { box-shadow: inset 0 0 0 16px #0f172a, inset 0 0 20px #000; }

/* マスク系（テクスチャ） */
.frame-mask-copper::after { background: linear-gradient(135deg, #8a3324 0%, #ffb6c1 50%, #8a3324 100%); }
.frame-mask-brass::after { background: linear-gradient(135deg, #8b7d3a 0%, #ffff99 50%, #8b7d3a 100%); }
.frame-mask-tungsten::after { background: linear-gradient(135deg, #333 0%, #999 50%, #333 100%); }
.frame-mask-cork::after { background: repeating-radial-gradient(ellipse at center, #d2b48c 1px, #a0522d 4px); }
.frame-mask-wood::after { background: repeating-radial-gradient(ellipse at 50% 150%, #8b5a2b 0px, #6b4423 8px, #523116 16px, #8b5a2b 24px); }
.frame-mask-dark-oak::after { background: repeating-linear-gradient(90deg, #3e2723 0px, #1a0f0c 8px, #4e342e 16px); }
.frame-mask-leather-black::after { background: repeating-radial-gradient(#111 0px, #2a2a2a 3px); }
.frame-mask-leather-red::after { background: repeating-radial-gradient(#5a0000 0px, #800000 3px); }
.frame-mask-denim::after { background: #1560bd; border: 3px dashed #fff; padding: 13px; } /* デニムのステッチ感を調整 */
.frame-mask-stripe::after { background: repeating-linear-gradient(45deg, #fff 0px, #fff 15px, #333 15px, #333 30px); }
.frame-mask-polkadot::after { background-image: radial-gradient(#fff 30%, transparent 30%), radial-gradient(#fff 30%, transparent 30%); background-size: 30px 30px; background-position: 0 0, 15px 15px; background-color: #ff66b2; }
.frame-mask-tartan::after { background: repeating-linear-gradient(transparent, transparent 30px, rgba(255,0,0,0.5) 30px, rgba(255,0,0,0.5) 60px), repeating-linear-gradient(90deg, #00f, #00f 30px, transparent 30px, transparent 60px); background-color: #0f0; }
.frame-mask-checker::after { background: conic-gradient(#fff 90deg, #000 90deg 180deg, #fff 180deg 270deg, #000 270deg); background-size: 32px 32px; }
.frame-mask-yagasuri::after { background: repeating-linear-gradient(45deg, #800080 0, #800080 15px, transparent 15px, transparent 30px), repeating-linear-gradient(-45deg, #800080 0, #800080 15px, transparent 15px, transparent 30px); background-color: #fff; }

/* 🌟 切手風ギザギザ（暴走しない確実なくり抜き処理へ変更） */
.frame-solid-stamp { box-shadow: inset 0 0 0 16px #fff; }
.frame-solid-stamp::after {
  content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none;
  /* アプリの背景色(#121212)の丸を並べて、物理的に切手の穴を擬似表現する */
  background:
    radial-gradient(circle at 0px 8px, #121212 6px, transparent 6.5px) repeat-y left top / 16px 16px,
    radial-gradient(circle at 100% 8px, #121212 6px, transparent 6.5px) repeat-y right top / 16px 16px,
    radial-gradient(circle at 8px 0px, #121212 6px, transparent 6.5px) repeat-x left top / 16px 16px,
    radial-gradient(circle at 8px 100%, #121212 6px, transparent 6.5px) repeat-x left bottom / 16px 16px;
}

.frame-solid-polaroid { box-shadow: inset 0 16px 0 16px #fff, inset 0 -60px 0 16px #fff, inset 16px 0 0 16px #fff, inset -16px 0 0 16px #fff; }
.frame-solid-chalkboard { box-shadow: inset 0 0 0 16px #2e4c3b, inset 0 0 0 22px #8b5a2b; }
.frame-mask-note::after { background: #fff; border-left: 6px dashed #ccc; }
.frame-mask-craft::after { background: repeating-radial-gradient(#c19a6b 0px, #8b5a2b 3px); }
.frame-mask-brick::after { background: linear-gradient(335deg, rgba(255,255,255,0.4) 15%, transparent 15%), linear-gradient(155deg, rgba(255,255,255,0.4) 15%, transparent 15%), linear-gradient(335deg, rgba(255,255,255,0.4) 15%, transparent 15%), linear-gradient(155deg, rgba(255,255,255,0.4) 15%, transparent 15%); background-size: 32px 32px; background-color: #b22222; }
.frame-mask-concrete::after { background: repeating-radial-gradient(#7f8c8d 0px, #606b6b 3px); }
.frame-mask-marble::after { background: repeating-linear-gradient(45deg, #fff 0px, #f0f0f0 16px, #ccc 18px, #fff 20px); }
.frame-mask-classic-gold::after { background: linear-gradient(45deg, #d4af37, #fff8dc, #d4af37); padding: 20px; }
.frame-mask-pure-silver::after { background: linear-gradient(45deg, #e0e0e0, #fff, #e0e0e0); }
.frame-mask-bronze::after { background: linear-gradient(45deg, #cd7f32, #f5deb3, #cd7f32); }
.frame-solid-clear-glass { box-shadow: inset 0 0 0 16px rgba(255,255,255,0.3); backdrop-filter: blur(8px); }

/* -----------------------------------------
   【R】 レア 20種 (極厚16px枠 ＋ 高精細テクスチャ・オーバーレイ完全版)
----------------------------------------- */

/* 元のXORマスクを無効化し、ベース枠とオーバーレイの基盤を作る */
[class^="frame-mask-"] { position: relative; }
.frame-mask-black-onyx::after, .frame-mask-amber::after, .frame-mask-emerald::after, .frame-mask-sapphire::after, .frame-mask-ruby::after,
.frame-mask-black-rose::after, .frame-mask-silver-chain::after, .frame-mask-night-sky::after, .frame-mask-deep-sea::after, .frame-mask-sunset::after,
.frame-mask-damask::after, .frame-mask-paisley::after, .frame-mask-geometric::after, .frame-mask-cyber-grid::after, .frame-mask-stained-glass::after,
.frame-mask-velvet::after, .frame-mask-camo::after, .frame-mask-carbon::after, .frame-mask-washi::after, .frame-mask-parchment::after {
  display: none;
}

/* 共通オーバーレイレイアウト：中央のQRと文字を避けるマスク設定 */
.frame-mask-black-onyx::before, .frame-mask-amber::before, .frame-mask-emerald::before, .frame-mask-sapphire::before, .frame-mask-ruby::before,
.frame-mask-black-rose::before, .frame-mask-silver-chain::before, .frame-mask-night-sky::before, .frame-mask-deep-sea::before, .frame-mask-sunset::before,
.frame-mask-damask::before, .frame-mask-paisley::before, .frame-mask-geometric::before, .frame-mask-cyber-grid::before, .frame-mask-stained-glass::before,
.frame-mask-velvet::before, .frame-mask-camo::before, .frame-mask-carbon::before, .frame-mask-washi::before, .frame-mask-parchment::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; clip-path: inset(0 round 12px);
  -webkit-mask: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 75%, #000 100%);
  mask: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 75%, #000 100%);
}

/* 31. ブラックオニキス: 16px漆黒枠 + 鏡面反射と鉱石ノイズ */
.frame-mask-black-onyx { box-shadow: inset 0 0 0 16px #050505, inset 0 0 20px #222; }
.frame-mask-black-onyx::before {
  background-image: 
    linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.05) 50%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  background-size: cover; opacity: 0.9; mix-blend-mode: overlay;
}

/* 32. アンバー(琥珀): 16px黄金枠 + 樹液の有機的な層、深いクラック、内部の光の屈折 */
.frame-mask-amber { box-shadow: inset 0 0 0 16px #8b5a2b, inset 0 0 40px #d2691e; }
.frame-mask-amber::before {
  /* 内部の不規則な発光と琥珀特有の濃淡 */
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 200, 0, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255, 140, 0, 0.7) 0%, transparent 60%),
    /* 樹液の流動層(flow)と、内部のクラック/不純物(crack)を高精細SVGで表現 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='flow'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.08' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0.9 0 1 0 0 0.5 0 0 1 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Cfilter id='crack'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.3 0 0 0 0 0.1 0 0 0 0 0 0 0 0 7 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23flow)' opacity='0.5'/%3E%3Crect width='100%25' height='100%25' filter='url(%23crack)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: cover; 
  opacity: 0.9; 
  mix-blend-mode: hard-light;
}

/* 33. エメラルド: 16px深緑枠 + エメラルドカット(ステップカット)の八角形ファセット */
.frame-mask-emerald { box-shadow: inset 0 0 0 16px #046307, inset 0 0 20px #003300; }
.frame-mask-emerald::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpolygon points='10,0 40,0 50,10 50,40 40,50 10,50 0,40 0,10' fill='rgba(80,200,120,0.1)' stroke='rgba(80,200,120,0.5)' stroke-width='1'/%3E%3Cpolygon points='15,5 35,5 45,15 45,35 35,45 15,45 5,35 5,15' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='0.5'/%3E%3Cpolygon points='20,10 30,10 40,20 40,30 30,40 20,40 10,30 10,20' fill='rgba(0,50,0,0.2)' stroke='rgba(0,0,0,0.3)' stroke-width='1'/%3E%3Cpath d='M10 0 L15 5 M40 0 L35 5 M50 10 L45 15 M50 40 L45 35 M40 50 L35 45 M10 50 L15 45 M0 40 L5 35 M0 10 L5 15' stroke='rgba(255,255,255,0.3)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 50px 50px; opacity: 0.9;
}

/* 34. サファイア: 16px濃紺枠 + ブリリアントカットの鋭い放射状ファセット */
.frame-mask-sapphire { box-shadow: inset 0 0 0 16px #0f52ba, inset 0 0 20px #000066; }
.frame-mask-sapphire::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='20,0 40,20 20,40 0,20' fill='rgba(100,149,237,0.1)' stroke='rgba(100,149,237,0.4)' stroke-width='1'/%3E%3Cpolygon points='20,5 35,20 20,35 5,20' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='0.5'/%3E%3Cpath d='M20 0 L20 40 M0 20 L40 20 M5 5 L35 35 M5 35 L35 5' stroke='rgba(255,255,255,0.2)' stroke-width='0.5'/%3E%3Cpolygon points='20,15 25,20 20,25 15,20' fill='rgba(0,0,50,0.3)'/%3E%3C/svg%3E");
  background-size: 40px 40px; opacity: 0.9;
}

/* 35. ルビー: 16px深紅枠 + クッションカットの複雑な三角形ファセット */
.frame-mask-ruby { box-shadow: inset 0 0 0 16px #9b111e, inset 0 0 20px #4a0000; }
.frame-mask-ruby::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='0,0 20,20 40,0' fill='rgba(255,100,100,0.15)' stroke='rgba(255,99,71,0.5)' stroke-width='0.5'/%3E%3Cpolygon points='40,0 20,20 40,40' fill='rgba(100,0,0,0.3)' stroke='rgba(255,99,71,0.5)' stroke-width='0.5'/%3E%3Cpolygon points='40,40 20,20 0,40' fill='rgba(255,50,50,0.1)' stroke='rgba(255,99,71,0.5)' stroke-width='0.5'/%3E%3Cpolygon points='0,40 20,20 0,0' fill='rgba(50,0,0,0.4)' stroke='rgba(255,99,71,0.5)' stroke-width='0.5'/%3E%3Cpolygon points='10,10 30,10 30,30 10,30' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='1' transform='rotate(45 20 20)'/%3E%3C/svg%3E");
  background-size: 40px 40px; opacity: 0.9;
}

/* 36. 黒薔薇: 16px赤黒枠 + 5層パスの退廃的な薔薇の重なり */
.frame-mask-black-rose { box-shadow: inset 0 0 0 16px #0a0002, inset 0 0 30px rgba(61, 0, 17, 0.8); }
.frame-mask-black-rose::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 C30 5 15 20 20 45 C10 50 5 70 20 85 C35 95 65 95 80 85 C95 70 90 50 80 45 C85 20 70 5 50 5 Z' fill='%230a0002'/%3E%3Cpath d='M50 10 C35 10 25 25 30 40 C15 50 15 70 30 80 C50 90 70 80 85 65 C85 45 70 30 50 10 Z' fill='%23140005' stroke='%233d0011' stroke-width='2'/%3E%3Cpath d='M50 20 C40 20 30 35 40 50 C25 60 35 75 50 75 C65 75 75 60 65 45 C75 35 60 20 50 20 Z' fill='%2324000a' stroke='%2366001a' stroke-width='2'/%3E%3Cpath d='M50 30 C45 30 35 40 45 55 C40 65 55 65 60 55 C65 45 55 30 50 30 Z' fill='%2333000f' stroke='%23990026' stroke-width='1.5'/%3E%3Cpath d='M50 40 C45 40 42 45 45 50 C48 53 55 52 55 48 C55 44 48 42 47 46' fill='none' stroke='%23cc0033' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 45px 45px; opacity: 0.95;
}

/* 37. シルバーチェーン: 16px銀枠 + リアルに交差する喜平チェーン */
.frame-mask-silver-chain { box-shadow: inset 0 0 0 16px #333, inset 0 0 10px #000; }
.frame-mask-silver-chain::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='5' y='-5' width='10' height='25' rx='5' fill='none' stroke='rgba(200,200,200,0.5)' stroke-width='2.5'/%3E%3Crect x='15' y='10' width='10' height='25' rx='5' fill='none' stroke='rgba(150,150,150,0.6)' stroke-width='2.5'/%3E%3Cpath d='M5 10 L15 10 M15 25 L25 25' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 30px 30px; opacity: 0.85;
}

/* 38. ナイトスカイ: 16px濃紺枠 + 星雲のガスと輝く四芒星 */
.frame-mask-night-sky { box-shadow: inset 0 0 0 16px #0b0d17; }
.frame-mask-night-sky::before {
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M25 15 L26.5 23.5 L35 25 L26.5 26.5 L25 35 L23.5 26.5 L15 25 L23.5 23.5 Z' fill='rgba(255,255,255,0.8)'/%3E%3Ccircle cx='10' cy='10' r='1' fill='rgba(255,255,255,0.5)'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='rgba(255,255,255,0.3)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0.1  0 0.5 0 0 0.2  0 0 1 0 0.4  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 50px 50px, cover; opacity: 0.9;
}

/* 39. ディープシー: 16px深海枠 + 縦に差し込む光の筋（コースティクス） */
.frame-mask-deep-sea { box-shadow: inset 0 0 0 16px #000022; }
.frame-mask-deep-sea::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.005' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0.5 1 0 0 0  1 1 1 0 0  0 0 0 1.5 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.3'/%3E%3C/svg%3E");
  background-size: cover; mix-blend-mode: screen; opacity: 0.8;
}

/* 40. サンセット: 16px夕焼け枠 + 横にたなびく夕暮れの雲海 */
.frame-mask-sunset { box-shadow: inset 0 0 0 16px #ff4500, inset 0 0 40px #9400d3; }
.frame-mask-sunset::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.1' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0.5  0 0 0 0 0  0 0 0 0 0.2  0 0 0 1 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: cover; mix-blend-mode: screen; opacity: 0.8;
}

/* 41. ダマスク柄: 16px紫枠 + アカンサスの葉を模した優美な植物文様 */
.frame-mask-damask { box-shadow: inset 0 0 0 16px #2e0854; }
.frame-mask-damask::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 5 C20 15, 10 20, 20 30 C30 40, 20 45, 30 55 C40 45, 30 40, 40 30 C50 20, 40 15, 30 5 Z' fill='rgba(216,180,254,0.1)' stroke='rgba(216,180,254,0.3)' stroke-width='1.5'/%3E%3Cpath d='M30 15 C25 25, 25 35, 30 45 C35 35, 35 25, 30 15 Z' fill='none' stroke='rgba(216,180,254,0.2)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 50px 50px; opacity: 0.9;
}

/* 42. ペイズリー柄: 16px青緑枠 + 装飾が施された繊細な勾玉模様 */
.frame-mask-paisley { box-shadow: inset 0 0 0 16px #004d40; }
.frame-mask-paisley::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M25 10 C10 10, 5 25, 15 35 C25 45, 40 40, 35 25 C30 10, 40 15, 25 10 Z' fill='rgba(128,222,234,0.05)' stroke='rgba(128,222,234,0.4)' stroke-width='1.5'/%3E%3Cpath d='M22 18 C15 20, 15 30, 22 30 C28 30, 28 20, 22 18 Z' fill='none' stroke='rgba(128,222,234,0.3)' stroke-width='1'/%3E%3Ccircle cx='32' cy='32' r='2' fill='rgba(128,222,234,0.4)'/%3E%3Ccircle cx='12' cy='20' r='1.5' fill='rgba(128,222,234,0.3)'/%3E%3C/svg%3E");
  background-size: 45px 45px; opacity: 0.9;
}

/* 43. 幾何学模様: 16px黒枠 + 3D錯視を生むアイソメトリックなキューブ群 */
.frame-mask-geometric { box-shadow: inset 0 0 0 16px #111; }
.frame-mask-geometric::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34.64'%3E%3Cpolygon points='30,0 60,17.32 30,34.64 0,17.32' fill='rgba(255,255,255,0.02)' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cpath d='M30,17.32 L30,34.64 M0,17.32 L30,17.32 L60,0' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 23.09px; opacity: 0.85;
}

/* 44. サイバーグリッド: 16px黒枠 + 発光ノード(交点)を持つ精密な電子基板網 */
.frame-mask-cyber-grid { box-shadow: inset 0 0 0 16px #000, inset 0 0 15px rgba(0,255,255,0.2); }
.frame-mask-cyber-grid::before {
  background-image: 
    radial-gradient(circle at 20px 20px, rgba(0,255,255,0.8) 1.5px, transparent 2.5px),
    linear-gradient(rgba(0,255,255,0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,0.25) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: -1.5px -1.5px, 0 0, 0 0; opacity: 0.9;
}

/* 45. ステンドグラス: 16px黒枠 + 堅牢な鉛線と不規則なガラスのモザイク配置 */
.frame-mask-stained-glass { box-shadow: inset 0 0 0 16px #1a1a1a; }
.frame-mask-stained-glass::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpolygon points='0,0 25,10 15,30 0,20' fill='rgba(180,0,0,0.3)' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='25,10 50,0 45,25 15,30' fill='rgba(0,0,180,0.3)' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='50,0 50,50 35,45 45,25' fill='rgba(218,165,32,0.3)' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='15,30 45,25 35,45 20,50 5,45' fill='rgba(0,120,0,0.3)' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='0,20 15,30 5,45 0,35' fill='rgba(75,0,130,0.3)' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='0,35 5,45 20,50 0,50' fill='rgba(184,134,11,0.3)' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='35,45 50,50 20,50' fill='rgba(180,0,0,0.3)' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 60px 60px; opacity: 0.95;
}

/* 46. ベルベット(深紅): 16px深紅枠 + 布の起毛と光沢を生む高周波ノイズ */
.frame-mask-velvet { box-shadow: inset 0 0 0 16px #4a0000; }
.frame-mask-velvet::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='0.3'/%3E%3C/svg%3E");
  background-size: cover; mix-blend-mode: overlay; opacity: 0.8;
}

/* 47. モノクロ迷彩: 16px濃灰枠 + 閾値処理で生成したアメーバ状の都市迷彩柄 */
.frame-mask-camo { box-shadow: inset 0 0 0 16px #222; }
.frame-mask-camo::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.025' numOctaves='4'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 12 -5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.25'/%3E%3C/svg%3E");
  background-size: cover; mix-blend-mode: overlay; opacity: 0.9;
}

/* 48. カーボンファイバー: 16px黒枠 + 炭素繊維の規則正しい綾織り(斜め格子) */
.frame-mask-carbon { box-shadow: inset 0 0 0 16px #111; }
.frame-mask-carbon::before {
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.08) 75%, rgba(255,255,255,0.08)),
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.08) 75%, rgba(255,255,255,0.08));
  background-size: 12px 12px; background-position: 0 0, 6px 6px; opacity: 0.85;
}

/* 49. 漆黒の和紙: 16px黒枠 + 和紙特有の縦横に絡み合う長い漉き繊維 */
.frame-mask-washi { box-shadow: inset 0 0 0 16px #111; }
.frame-mask-washi::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.1 0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.3'/%3E%3C/svg%3E");
  background-size: cover; opacity: 0.8;
}

/* 50. 古い羊皮紙: 画像素材レベルの完全再現 */
.frame-mask-parchment {
  /* デフォルトの平坦な枠を完全に無効化 */
  box-shadow: none !important;
  position: relative;
}

/* 1層目：羊皮紙のベースカラーと縁の強烈な黒焦げ */
.frame-mask-parchment::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px);
  /* 中央は透明に保ち、外側に向かって明るい黄褐色に染める */
  background: radial-gradient(ellipse at center, transparent 40%, rgba(220, 179, 123, 0.8) 75%, #dcb37b 100%);
  /* 縁に深く濃い焼け跡のベースを敷く */
  box-shadow: inset 0 0 20px 8px rgba(45, 15, 0, 0.9), inset 0 0 5px 2px rgba(25, 5, 0, 1);
}

/* 2層目：皮の質感とシミ（乗算による焼け焦げの有機的歪み） */
.frame-mask-parchment::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; clip-path: inset(0 round 12px);
  /* フラクタルノイズで動物皮のザラつきとムラを生成 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='dirt'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='5' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.4  0 0 0 0 0.25  0 0 0 0 0.1  1 0 0 0 0' in='noise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dirt)' opacity='0.9'/%3E%3C/svg%3E");
  
  /* 中央のQRとランクカラーをノイズから完全に保護するマスク */
  -webkit-mask: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 75%, #000 100%);
  mask: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 75%, #000 100%);
  
  /* オーバーレイで乗算。これにより下層のシャドウがギザギザの焼け焦げに変化する */
  mix-blend-mode: multiply;
  display: block !important;
}
/* -----------------------------------------
   【SR】 Sレア 20種 (極厚16pxベース＋発光オーラへ完全改修)
----------------------------------------- */
/* 共通：2pxの物理ライン + 14pxの内側シャドウ = 16pxの確かな太さを確保 */
[class*="frame-glow-"] { border-radius: 12px; }
/* -----------------------------------------
   ネオングリーン (修正案: ゆっくりとした呼吸)
----------------------------------------- */
/* 既存の .frame-glow-neon-green を削除し、以下に差し替えてください */
.frame-glow-neon-green { 
  animation: neon-green-breathe 3s infinite alternate ease-in-out;
}
@keyframes neon-green-breathe {
  0% { border-color: #00b359; box-shadow: inset 0 0 0 14px rgba(0,230,118,0.1), 0 0 5px #00b359, inset 0 0 10px #00b359; }
  100% { border-color: #00E676; box-shadow: inset 0 0 0 14px rgba(0,230,118,0.3), 0 0 25px #00E676, inset 0 0 25px #00E676; }
}
/* -----------------------------------------
   1. サイバーピンク (修正案: ネオン管の接触不良フリッカー)
----------------------------------------- */
/* 既存の .frame-glow-cyber-pink を削除し、以下に差し替えてください */
.frame-glow-cyber-pink { 
  animation: cyber-neon-flicker 3s infinite;
}
@keyframes cyber-neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    /* 通常点灯時 */
    border: 2px solid #ff1493;
    box-shadow: inset 0 0 0 14px rgba(255,20,147,0.2), 0 0 15px #ff1493, inset 0 0 20px #ff1493;
  }
  20%, 24%, 55% {
    /* 一瞬だけ電力が落ちて暗くなる（接触不良） */
    border: 2px solid #a00;
    box-shadow: inset 0 0 0 14px rgba(100,0,0,0.05), 0 0 2px #a00, inset 0 0 2px #a00;
  }
}
/* -----------------------------------------
   エレクトリックブルー (修正案: 電流のような小刻みな震え)
----------------------------------------- */
/* 既存の .frame-glow-electric-blue を削除し、以下に差し替えてください */
.frame-glow-electric-blue { 
  animation: electric-blue-shiver 0.15s infinite alternate;
}
@keyframes electric-blue-shiver {
  0% { border-color: #009acd; box-shadow: inset 0 0 0 14px rgba(0,191,255,0.15), 0 0 10px #009acd, inset 0 0 15px #009acd; }
  100% { border-color: #00bfff; box-shadow: inset 0 0 0 14px rgba(0,191,255,0.25), 0 0 20px #00bfff, inset 0 0 25px #00bfff; }
}

/* -----------------------------------------
   バックライトホワイト (修正案: 背後から後光が広がるような膨張)
----------------------------------------- */
/* 既存の .frame-glow-backlight-white を削除し、以下に差し替えてください */
.frame-glow-backlight-white { 
  animation: backlight-white-expand 4s infinite alternate ease-in-out;
}
@keyframes backlight-white-expand {
  0% { box-shadow: inset 0 0 0 14px rgba(255,255,255,0.1), 0 0 10px #fff, inset 0 0 10px #fff; }
  100% { box-shadow: inset 0 0 0 14px rgba(255,255,255,0.2), 0 0 35px #fff, inset 0 0 20px #fff; }
}
/* -----------------------------------------
   1. シャドウパープル (修正案: 影が不規則に蠢くアニメーション)
----------------------------------------- */
/* 既存の .frame-glow-shadow-purple を削除し、以下に差し替えてください */
.frame-glow-shadow-purple { 
  /* 影の広がりや位置（X/Y軸）をずらし、アメーバのように蠢く動きを作る */
  animation: shadow-creep 4s infinite alternate ease-in-out;
}
@keyframes shadow-creep {
  0% { 
    box-shadow: inset 0 0 0 14px rgba(138,43,226,0.1), 2px 2px 15px #8a2be2, inset -2px -2px 15px #8a2be2; 
  }
  50% { 
    box-shadow: inset 0 0 0 14px rgba(138,43,226,0.2), -4px -2px 25px #8a2be2, inset 4px 2px 25px #8a2be2; 
  }
  100% { 
    box-shadow: inset 0 0 0 14px rgba(138,43,226,0.15), 2px -4px 20px #8a2be2, inset -2px 4px 20px #8a2be2; 
  }
}

/* -----------------------------------------
   2. インナーゴールド (修正案: 金のオーラが内部で満ち引きする)
----------------------------------------- */
/* 既存の .frame-glow-inner-gold を削除し、以下に差し替えてください */
.frame-glow-inner-gold { 
  /* 外側の発光は抑え、内側のシャドウだけが深く呼吸するように変化する */
  animation: gold-ebb-flow 3s infinite alternate ease-in-out;
}
@keyframes gold-ebb-flow {
  0% { 
    box-shadow: inset 0 0 0 14px rgba(255,215,0,0.1), inset 0 0 10px #ffd700; 
  }
  100% { 
    /* 満ちる瞬間は、白みがかった強い光を内側へ深く放つ */
    box-shadow: inset 0 0 0 14px rgba(255,215,0,0.3), inset 0 0 50px #ffd700, inset 0 0 20px #fff; 
  }
}

/* -----------------------------------------
   3. サンセットグロウ (修正案: 夕日のようにオレンジと赤が交替する)
----------------------------------------- */
/* 既存の .frame-glow-sunset-glow を削除し、以下に差し替えてください */
.frame-glow-sunset-glow { 
  /* 色味（オレンジ⇔赤）と光の強さがゆっくりと移り変わる */
  animation: sunset-shift 5s infinite alternate ease-in-out;
}
@keyframes sunset-shift {
  0% {
    border-color: #ff8c00;
    box-shadow: inset 0 0 0 14px rgba(255,140,0,0.15), 0 0 15px #ff8c00, inset 0 0 20px #ff8c00;
  }
  100% {
    border-color: #ff4500;
    box-shadow: inset 0 0 0 14px rgba(255,69,0,0.25), 0 0 25px #ff0000, inset 0 0 25px #ff0000;
  }
}
/* -----------------------------------------
   1. オーロラヴェール (修正案: 中央をくり抜き、ランクカラーを見せる)
----------------------------------------- */
/* 既存の .frame-glow-aurora-veil を削除し、以下に差し替えてください */
.frame-glow-aurora-veil { 
  border: 2px solid #0ff; 
  box-shadow: inset 0 0 0 14px rgba(0,255,255,0.15), 0 0 20px #0ff, inset 0 0 30px rgba(255,0,255,0.4); 
  position: relative;
}
.frame-glow-aurora-veil::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px);
  background: 
    linear-gradient(60deg, transparent 20%, rgba(0,255,255,0.5) 45%, rgba(255,0,255,0.5) 55%, transparent 80%),
    linear-gradient(-60deg, transparent 10%, rgba(255,0,255,0.3) 40%, rgba(0,255,255,0.3) 60%, transparent 90%);
  background-size: 300% 300%;
  filter: blur(10px);
  mix-blend-mode: screen;
  /* 💡ここがポイント：中央(QR付近)を透明にし、外枠に向けてヴェールをフェードインさせる */
  -webkit-mask: radial-gradient(ellipse at center, transparent 40%, #000 75%);
  mask: radial-gradient(ellipse at center, transparent 40%, #000 75%);
  animation: aurora-wave 6s ease-in-out infinite alternate;
}
@keyframes aurora-wave {
  0% { background-position: 0% 50%, 100% 50%; opacity: 0.5; }
  100% { background-position: 100% 50%, 0% 50%; opacity: 1; }
}
/* -----------------------------------------
   3. ツートーンRB (修正案: 赤と青のパトランプ風交互フラッシュ)
----------------------------------------- */
/* 既存の .frame-glow-twotone-rb を削除し、以下に差し替えてください */
.frame-glow-twotone-rb { 
  /* 左右の影の強さをシーソーのように交互に強めるアニメーション */
  animation: twotone-rb-siren 0.8s infinite alternate ease-in-out;
}
@keyframes twotone-rb-siren {
  0% {
    /* 赤(左)が強く、青(右)が弱い状態 */
    border: 2px solid #f00;
    box-shadow: inset 0 0 0 14px rgba(255,0,0,0.1), -20px 0 30px #f00, 0px 0 5px rgba(0,0,255,0.2), inset -20px 0 30px #f00, inset 0px 0 5px rgba(0,0,255,0.2);
  }
  100% {
    /* 青(右)が強く、赤(左)が弱い状態 */
    border: 2px solid #00f;
    box-shadow: inset 0 0 0 14px rgba(0,0,255,0.1), 0px 0 5px rgba(255,0,0,0.2), 20px 0 30px #00f, inset 0px 0 5px rgba(255,0,0,0.2), inset 20px 0 30px #00f;
  }
}
/* -----------------------------------------
   追加ご要望: ツートーンPG (紫と緑の毒々しい交互フラッシュ)
----------------------------------------- */
/* 既存の .frame-glow-twotone-pg を削除し、以下に差し替えてください */
.frame-glow-twotone-pg { 
  animation: twotone-pg-pulse 0.8s infinite alternate ease-in-out;
}
@keyframes twotone-pg-pulse {
  0% {
    border: 2px solid #800080;
    box-shadow: inset 0 0 0 14px rgba(128,0,128,0.1), -20px 0 30px #800080, 0px 0 5px rgba(0,128,0,0.2), inset -20px 0 30px #800080, inset 0px 0 5px rgba(0,128,0,0.2);
  }
  100% {
    border: 2px solid #008000;
    box-shadow: inset 0 0 0 14px rgba(0,128,0,0.1), 0px 0 5px rgba(128,0,128,0.2), 20px 0 30px #008000, inset 0px 0 5px rgba(128,0,128,0.2), inset 20px 0 30px #008000;
  }
}
/* -----------------------------------------
   2. ラスティネイル (修正案: 電球が切れかかっているような不安定な明滅)
----------------------------------------- */
/* 既存の .frame-glow-rusty-nail を削除し、以下に差し替えてください */
.frame-glow-rusty-nail { 
  /* 4秒周期で、一瞬だけバチバチッと消えかかる接触不良アニメーション */
  animation: rusty-flicker 4s infinite;
}
@keyframes rusty-flicker {
  0%, 89%, 91%, 95%, 100% { 
    /* 通常時（点灯） */
    border: 2px solid #b7410e;
    box-shadow: inset 0 0 0 14px rgba(139,69,19,0.2), 0 0 15px #b7410e, inset 0 0 20px #8b4513; 
  }
  90% { 
    /* 電力が弱まる瞬間 */
    border: 2px solid #8b4513;
    box-shadow: inset 0 0 0 14px rgba(139,69,19,0.05), 0 0 5px #8b4513, inset 0 0 5px #8b4513; 
  }
  92%, 94% { 
    /* 完全に消灯する瞬間 */
    border: 2px solid #333;
    box-shadow: inset 0 0 0 14px rgba(0,0,0,0), 0 0 0 transparent, inset 0 0 0 transparent; 
  }
}
/* -----------------------------------------
   ピンクスパイダー (修正案: 心音ネオン ＋ 極薄の静的な蜘蛛の巣)
----------------------------------------- */
.frame-glow-pink-spider { 
  position: relative; /* ::beforeの基準位置として追加 */
  animation: spider-heartbeat 1.5s infinite;
}
.frame-glow-pink-spider::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; clip-path: inset(0 round 12px);
  /* 極薄色(opacity: 0.2)の蜘蛛の巣模様をCSSで描画 */
  background:
    repeating-radial-gradient(transparent 0, transparent 15px, rgba(255,20,147,0.2) 16px, transparent 17px),
    repeating-conic-gradient(at 50% 50%, transparent 0, transparent 15deg, rgba(255,20,147,0.2) 15.5deg, transparent 16deg);
  /* 💡QRコードや文字を避けるため、中央を透明にくり抜き、フチに向かって濃くするマスク */
  -webkit-mask: radial-gradient(ellipse at center, transparent 45%, #000 75%);
  mask: radial-gradient(ellipse at center, transparent 45%, #000 75%);
}
@keyframes spider-heartbeat {
  0%, 100% { border: 2px solid #ff007f; box-shadow: inset 0 0 0 14px rgba(255,0,127,0.1), 0 0 10px #ff007f, inset 0 0 10px #ff007f; }
  15% { border: 2px solid #ff1493; box-shadow: inset 0 0 0 14px rgba(255,0,127,0.3), 0 0 25px #ff1493, inset 0 0 25px #ff1493; }
  30% { border: 2px solid #ff007f; box-shadow: inset 0 0 0 14px rgba(255,0,127,0.1), 0 0 10px #ff007f, inset 0 0 10px #ff007f; }
  45% { border: 2px solid #ff1493; box-shadow: inset 0 0 0 14px rgba(255,0,127,0.4), 0 0 35px #ff1493, inset 0 0 35px #ff1493; }
  60% { border: 2px solid #ff007f; box-shadow: inset 0 0 0 14px rgba(255,0,127,0.1), 0 0 10px #ff007f, inset 0 0 10px #ff007f; }
}
/* -----------------------------------------
   3. スターライト (修正案: 星の鋭い瞬き)
----------------------------------------- */
/* 既存の .frame-glow-starlight を削除し、以下に差し替えてください */
.frame-glow-starlight { 
  animation: starlight-twinkle 2s infinite ease-in-out;
}
@keyframes starlight-twinkle {
  0%, 100% { /* 通常時：おとなしい白 */
    border: 2px solid #aaa;
    box-shadow: inset 0 0 0 14px rgba(255,255,255,0.05), 0 0 5px #fff, inset 0 0 5px #fff;
  }
  50% { /* キラッと強く光る瞬間 */
    border: 2px solid #fff;
    box-shadow: inset 0 0 0 14px rgba(255,255,255,0.2), 0 0 25px #fff, inset 0 0 25px #fff;
  }
}
/* -----------------------------------------
   1. ブルーブラッド (修正案: 深海の波紋のようなゆっくりとした広がり)
----------------------------------------- */
/* 既存の .frame-glow-blue-blood を削除し、以下に差し替えてください */
.frame-glow-blue-blood { 
  /* 重く冷たい水のような、ゆったりとした呼吸 */
  animation: blue-blood-ripple 4s infinite alternate ease-in-out;
}
@keyframes blue-blood-ripple {
  0% { 
    box-shadow: inset 0 0 0 14px rgba(0,0,139,0.1), 0 0 10px #00008b, inset 0 0 10px #00008b; 
  }
  100% { 
    /* 外側へ向かって波紋のように光が広がる */
    box-shadow: inset 0 0 0 14px rgba(0,0,139,0.3), 0 0 30px #00008b, inset 0 0 25px #00008b; 
  }
}

/* -----------------------------------------
   2. ムーンライト (修正案: 雲に隠れる月のような静かで遅い変化)
----------------------------------------- */
/* 既存の .frame-glow-moonlight を削除し、以下に差し替えてください */
.frame-glow-moonlight { 
  /* 全体の中で最も周期が遅く(6秒)、静かな明滅 */
  animation: moonlight-fade 6s infinite alternate ease-in-out;
}
@keyframes moonlight-fade {
  0% { 
    border-color: #f0e68c; 
    box-shadow: inset 0 0 0 14px rgba(240,230,140,0.05), 0 0 5px #f0e68c, inset 0 0 5px #f0e68c; 
    opacity: 0.85; /* 少しだけ影を薄くして「雲に隠れた」感を出す */
  }
  100% { 
    border-color: #fffacd; 
    box-shadow: inset 0 0 0 14px rgba(255,250,205,0.2), 0 0 25px #fffacd, inset 0 0 20px #fffacd; 
    opacity: 1; 
  }
}

/* -----------------------------------------
   3. アンバーグロウ (修正案: 琥珀の中で揺れるような光)
----------------------------------------- */
/* 既存の .frame-glow-amber-glow を削除し、以下に差し替えてください */
.frame-glow-amber-glow { 
  /* 粘度の高い液体（琥珀）のように、影が重たげに移動する */
  animation: amber-viscous 5s infinite alternate ease-in-out;
}
@keyframes amber-viscous {
  0% { 
    box-shadow: inset 0 0 0 14px rgba(255,191,0,0.1), 2px 2px 10px #ffbf00, inset -2px -2px 15px #ffbf00; 
  }
  100% { 
    box-shadow: inset 0 0 0 14px rgba(255,191,0,0.25), -4px -2px 25px #ffbf00, inset 4px 2px 25px #ffbf00; 
  }
}
/* -----------------------------------------
   2. ポイズン (紫と濃紫の漂う瘴気)
----------------------------------------- */
/* 既存の .frame-glow-poison を削除し、以下に差し替えてください */
.frame-glow-poison { 
  border: 2px solid #4b0082; 
  box-shadow: inset 0 0 0 14px rgba(138,43,226,0.1), 0 0 25px #4b0082; 
  position: relative;
}
.frame-glow-poison::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 10px);
  /* ドロドロとした紫の瘴気を生成し、ゆっくりと揺らめかせる */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3'%3E%3Canimate attributeName='baseFrequency' values='0.04; 0.05; 0.04' dur='6s' repeatCount='indefinite'/%3E%3C/feTurbulence%3E%3CfeDisplacementMap in='SourceGraphic' scale='12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%238a2be2' stroke-width='30' filter='url(%23p)' opacity='0.3'/%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%234b0082' stroke-width='12' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: cover; mix-blend-mode: screen;
}
/* -----------------------------------------
   4. ホーリー (修正案: 神々しい白と黄色のオーラ)
----------------------------------------- */
/* 既存の .frame-glow-holy を削除し、以下に差し替えてください */
.frame-glow-holy { 
  animation: holy-aura 4s infinite alternate ease-in-out;
}
@keyframes holy-aura {
  0% { 
    /* ベースは清らかな白 */
    border-color: #fff; 
    box-shadow: inset 0 0 0 14px rgba(255,255,0,0.05), 0 0 15px #fff, inset 0 0 10px rgba(255,255,0,0.1); 
  }
  100% { 
    /* 満ちる時は黄金(黄色)のオーラが内側に強く光る */
    border-color: #ffffdd; 
    box-shadow: inset 0 0 0 14px rgba(255,255,0,0.2), 0 0 35px #fff, inset 0 0 35px rgba(255,215,0,0.6); 
  }
}
/* -----------------------------------------
   3. ダークマター (黒い光を吸い込むようなノイズ)
----------------------------------------- */
/* 既存の .frame-glow-dark-matter を削除し、以下に差し替えてください */
.frame-glow-dark-matter { 
  border: 2px solid #111; 
  box-shadow: inset 0 0 0 14px rgba(0,0,0,0.3), 0 0 30px #000; 
  position: relative;
}
.frame-glow-dark-matter::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 10px);
  /* 漆黒のノイズを発生させ、mix-blend-mode: multiply(乗算)で背景を暗く吸い込むような表現に */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='2'%3E%3Canimate attributeName='baseFrequency' values='0.03; 0.04; 0.03' dur='8s' repeatCount='indefinite'/%3E%3C/feTurbulence%3E%3CfeDisplacementMap in='SourceGraphic' scale='20'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23000' stroke-width='40' filter='url(%23d)' opacity='0.5'/%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23111' stroke-width='15' filter='url(%23d)' opacity='0.7'/%3E%3C/svg%3E");
  background-size: cover; mix-blend-mode: multiply; 
}
/* -----------------------------------------
   1. ファントム (修正案: 幽霊のようにフッと消えかかる呼吸)
----------------------------------------- */
/* 既存の .frame-glow-phantom を削除し、以下に差し替えてください */
.frame-glow-phantom { 
  /* アニメーションでborderとbox-shadowの強さを変化させます */
  animation: phantom-breath 4s ease-in-out infinite alternate;
}
@keyframes phantom-breath {
  0% { /* 消えかかる瞬間（極めて薄い状態） */
    border: 2px solid rgba(72,61,139,0.2);
    box-shadow: inset 0 0 0 14px rgba(72,61,139,0.05), 0 0 2px rgba(72,61,139,0.1), inset 0 0 5px rgba(72,61,139,0.1);
  }
  100% { /* 濃く現れる瞬間 */
    border: 2px solid #483d8b;
    box-shadow: inset 0 0 0 14px rgba(72,61,139,0.3), 0 0 25px #483d8b, inset 0 0 35px #483d8b;
  }
}

/* -----------------------------------------
   【SSR】 SSレア 20種 (極厚16px対応・アニメーション修正版)
----------------------------------------- */
@keyframes bg-rotate { 100% { background-position: 200% center; transform: rotate(360deg); } }
@keyframes bg-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; filter: brightness(1.3); } }
@keyframes scan-move { 0% { top: -20%; opacity: 0; } 10%, 90% { opacity: 1; } 100% { top: 120%; opacity: 0; } }
@keyframes flicker-fast { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* QRコードや文字をアニメーションより「手前」に出す */
.rank-card { position: relative; } /* overflow: hidden; を削除 */
#qr-code { position: relative; z-index: 10; box-shadow: 0 0 15px rgba(0,0,0,0.8); border-radius: 8px; }
#user-nickname, #user-id-text, #user-equipped-title { position: relative; z-index: 10; text-shadow: 0 0 5px #000; }

.frame-anim-flame { box-shadow: inset 0 0 0 16px rgba(255,69,0,0.3), 0 0 15px #ff4500, 0 0 30px #ff0000, inset 0 0 20px #ff8c00; animation: flicker-fast 0.3s infinite alternate; }
/* -----------------------------------------
   3. ライトニング (変更案: 10本の落雷・同時落ち演出)
----------------------------------------- */
.frame-anim-lightning { box-shadow: inset 0 0 0 16px rgba(224,255,255,0.1), inset 0 0 10px rgba(224,255,255,0.3); }
.frame-anim-lightning::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px);
  /* f1, f2, f3の異なる速度を用意。delayを被らせて同時落ちを実現 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Epath%7Bfill:none;stroke:%230ff;stroke-width:0.5;filter:drop-shadow(0 0 2px %230ff)%7D.f1%7Banimation:f 2.5s infinite%7D.f2%7Banimation:f 2s infinite%7D.f3%7Banimation:f 3s infinite%7D@keyframes f%7B0%25,92%25,100%25%7Bopacity:0%7D94%25,98%25%7Bopacity:0.8%7D96%25%7Bopacity:0.2%7D%7D%3C/style%3E%3Cpath d='M10,0 L15,20 L5,50 L20,80 L10,100' class='f1' style='animation-delay:0s'/%3E%3Cpath d='M80,0 L90,30 L75,60 L85,100' class='f1' style='animation-delay:0.4s'/%3E%3Cpath d='M30,0 L40,15 L25,40 L35,60' class='f1' style='animation-delay:1.2s'/%3E%3Cpath d='M70,20 L60,40 L80,70 L65,100' class='f1' style='animation-delay:0.8s'/%3E%3Cpath d='M50,0 L60,25 L45,55 L55,100' class='f1' style='animation-delay:1.8s; stroke-width:0.3'/%3E%3Cpath d='M85,0 L70,30 L80,60 L75,100' class='f1' style='animation-delay:0s'/%3E%3Cpath d='M20,0 L35,25 L15,50 L25,100' class='f1' style='animation-delay:0.8s'/%3E%3Cpath d='M40,0 L50,20 L30,55 L45,100' class='f2' style='animation-delay:1.5s'/%3E%3Cpath d='M60,0 L55,30 L65,70 L50,100' class='f2' style='animation-delay:0.2s'/%3E%3Cpath d='M95,0 L85,40 L95,65 L80,100' class='f3' style='animation-delay:2.2s'/%3E%3C/svg%3E");
  background-size: cover;
}
.frame-anim-rainbow::after { padding: 16px; inset: -16px; background: linear-gradient(45deg, #f00, #ff7f00, #ff0, #0f0, #00f, #4b0082, #9400d3); background-size: 400%; animation: bg-rotate 3s linear infinite; }
/* -----------------------------------------
   パルスグリーン (追加案: 空間が歪むショックウェーブ)
----------------------------------------- */
/* 既存の .frame-anim-pulse-green を削除し、以下に差し替えてください */
.frame-anim-pulse-green { box-shadow: inset 0 0 0 16px rgba(0,230,118,0.1); }
.frame-anim-pulse-green::before,
.frame-anim-pulse-green::after {
  content: ''; position: absolute; z-index: 5;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 2px solid #00E676; 
  border-radius: 12px;
  filter: drop-shadow(0 0 10px #00E676);
  /* 💡ここがポイント：波紋の範囲内を通る景色をぼかし＆強調して「歪み（蜃気楼）」を再現 */
  backdrop-filter: blur(4px) contrast(1.5);
  -webkit-backdrop-filter: blur(4px) contrast(1.5);
  pointer-events: none;
  animation: pulse-shockwave-distort 2.5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}
.frame-anim-pulse-green::after { animation-delay: 1.25s; }
@keyframes pulse-shockwave-distort {
  0% { width: 150px; height: 150px; opacity: 1; border-width: 10px; }
  100% { width: 450px; height: 450px; opacity: 0; border-width: 1px; }
}
/* -----------------------------------------
   グリッチ (別案: 線を細くし、激しく横揺れするバグ)
----------------------------------------- */
/* 既存の .frame-anim-glitch を削除し、以下に差し替えてください */
.frame-anim-glitch { box-shadow: inset 0 0 0 16px rgba(255,0,0,0.1); }
.frame-anim-glitch::before {
  content: ''; position: absolute; inset: -4px; z-index: 1; pointer-events: none; clip-path: inset(0 round 12px);
  /* SVG内の線の太さ(stroke-width)を 6 → 2 に細く変更し、ノイズの周波数を鋭く設定 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 1.5' numOctaves='2'%3E%3Canimate attributeName='baseFrequency' values='0.01 1.5; 0.05 2.5; 0.01 1.5' dur='0.1s' repeatCount='indefinite'/%3E%3C/feTurbulence%3E%3CfeDisplacementMap in='SourceGraphic' scale='20' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%230ff' stroke-width='2' filter='url(%23g)' opacity='0.9' transform='translate(1,0)'/%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23f00' stroke-width='2' filter='url(%23g)' opacity='0.9' transform='translate(-1,0)'/%3E%3C/svg%3E");
  background-size: cover;
  /* CSSアニメーションで「画面自体が物理的に横へ振動する」激しいジャンプを追加 */
  animation: glitch-jump 0.3s steps(5) infinite;
}
@keyframes glitch-jump {
  0% { transform: translateX(0); }
  20% { transform: translateX(-4px) scaleY(1.01); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px) scaleY(0.99); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
/* -----------------------------------------
   2. スパーク (変更案: QRフチから外へ放電する極細プラズマ)
----------------------------------------- */
.frame-anim-spark { box-shadow: inset 0 0 0 16px rgba(255,255,0,0.1); }
.frame-anim-spark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px);
  /* 中央を避け、28本の放射状の線を外側に向けて描画し、激しいノイズと点滅を付与 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='plasma'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.1 0.4' numOctaves='2'%3E%3Canimate attributeName='baseFrequency' values='0.1 0.4; 0.15 0.5; 0.1 0.4' dur='0.08s' repeatCount='indefinite'/%3E%3C/feTurbulence%3E%3CfeDisplacementMap in='SourceGraphic' scale='10'/%3E%3C/filter%3E%3Cstyle%3E.p1%7Bfill:none;stroke:%23ffff00;stroke-width:0.6;animation:p 0.15s infinite alternate%7D.p2%7Bfill:none;stroke:%23ffffff;stroke-width:0.3;animation:p 0.1s infinite alternate-reverse%7D@keyframes p%7B0%25%7Bopacity:0.4%7D100%25%7Bopacity:1%7D%7D%3C/style%3E%3Cg filter='url(%23plasma)'%3E%3Cpath d='M50,25 L45,0 M50,75 L55,100 M25,50 L0,45 M75,50 L100,55 M32,32 L10,0 M68,68 L90,100 M32,68 L10,100 M68,32 L90,0 M40,26 L20,-10 M60,26 L80,-10 M40,74 L20,110 M60,74 L80,110 M26,40 L-10,20 M26,60 L-10,80 M74,40 L110,20 M74,60 L110,80 M45,25 L55,-5 M55,75 L45,105 M25,45 L-5,55 M75,45 L105,55 M35,28 L30,-5 M65,72 L70,105 M35,72 L30,105 M65,28 L70,-5 M28,35 L-5,30 M72,65 L105,70 M28,65 L-5,70 M72,35 L105,30' class='p1'/%3E%3Cpath d='M50,25 L45,0 M50,75 L55,100 M25,50 L0,45 M75,50 L100,55 M32,32 L10,0 M68,68 L90,100 M32,68 L10,100 M68,32 L90,0 M40,26 L20,-10 M60,26 L80,-10 M40,74 L20,110 M60,74 L80,110 M26,40 L-10,20 M26,60 L-10,80 M74,40 L110,20 M74,60 L110,80 M45,25 L55,-5 M55,75 L45,105 M25,45 L-5,55 M75,45 L105,55 M35,28 L30,-5 M65,72 L70,105 M35,72 L30,105 M65,28 L70,-5 M28,35 L-5,30 M72,65 L105,70 M28,65 L-5,70 M72,35 L105,30' class='p2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; box-shadow: inset 0 0 15px rgba(255,255,0,0.2);
}

/* -----------------------------------------
   1. マトリックス (変更案: 文字量増大、垂直落下、フリッカー)
----------------------------------------- */
/* 既存の .frame-anim-matrix を削除し、以下に差し替えてください */
.frame-anim-matrix { box-shadow: inset 0 0 0 16px rgba(0,255,0,0.1), inset 0 0 10px #0f0; }
.frame-anim-matrix::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px); 
  /* 120個の文字がランダムに点滅・落下する超高密度SVGデータ */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%'%20height='100%'%3E%3Cstyle%3Etext{fill:%230f0;font-family:monospace;font-size:18px;font-weight:bold;text-shadow:0%200%205px%20%230f0}@keyframes%20f{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}@keyframes%20b{0%,100%{opacity:1}50%{opacity:0}}.c{animation:f%20linear%20infinite}.b1{animation:b%20.1s%20steps(2)%20infinite}.b2{animation:b%20.2s%20steps(2)%20infinite}.b3{animation:b%20.4s%20steps(2)%20infinite}%3C/style%3E%3Cg%3E%3Ctext%20x='5.0%'%20class='c'%20style='animation-duration:2.6s;animation-delay:-4.0s'%3E%3Ctspan%20x='5.0%'%20dy='0'%20class='b2'%3ES%3C/tspan%3E%3Ctspan%20x='5.0%'%20dy='18'%20class='b3'%3EC%3C/tspan%3E%3Ctspan%20x='5.0%'%20dy='18'%20class='b2'%3EK%3C/tspan%3E%3Ctspan%20x='5.0%'%20dy='18'%20class='b2'%3E1%3C/tspan%3E%3Ctspan%20x='5.0%'%20dy='18'%3EX%3C/tspan%3E%3Ctspan%20x='5.0%'%20dy='18'%20class='b1'%3EK%3C/tspan%3E%3Ctspan%20x='5.0%'%20dy='18'%20class='b3'%3E2%3C/tspan%3E%3Ctspan%20x='5.0%'%20dy='18'%20class='b1'%3EQ%3C/tspan%3E%3Ctspan%20x='5.0%'%20dy='18'%3E0%3C/tspan%3E%3Ctspan%20x='5.0%'%20dy='18'%3EW%3C/tspan%3E%3C/text%3E%3Ctext%20x='13.2%'%20class='c'%20style='animation-duration:3.4s;animation-delay:-1.4s'%3E%3Ctspan%20x='13.2%'%20dy='0'%3E2%3C/tspan%3E%3Ctspan%20x='13.2%'%20dy='18'%3E5%3C/tspan%3E%3Ctspan%20x='13.2%'%20dy='18'%20class='b2'%3EJ%3C/tspan%3E%3Ctspan%20x='13.2%'%20dy='18'%3EK%3C/tspan%3E%3Ctspan%20x='13.2%'%20dy='18'%3E3%3C/tspan%3E%3Ctspan%20x='13.2%'%20dy='18'%20class='b3'%3E9%3C/tspan%3E%3Ctspan%20x='13.2%'%20dy='18'%20class='b3'%3EX%3C/tspan%3E%3Ctspan%20x='13.2%'%20dy='18'%20class='b1'%3EZ%3C/tspan%3E%3Ctspan%20x='13.2%'%20dy='18'%20class='b2'%3ER%3C/tspan%3E%3Ctspan%20x='13.2%'%20dy='18'%20class='b3'%3E3%3C/tspan%3E%3C/text%3E%3Ctext%20x='21.4%'%20class='c'%20style='animation-duration:3.7s;animation-delay:-3.3s'%3E%3Ctspan%20x='21.4%'%20dy='0'%3E8%3C/tspan%3E%3Ctspan%20x='21.4%'%20dy='18'%20class='b3'%3EJ%3C/tspan%3E%3Ctspan%20x='21.4%'%20dy='18'%3EA%3C/tspan%3E%3Ctspan%20x='21.4%'%20dy='18'%3EO%3C/tspan%3E%3Ctspan%20x='21.4%'%20dy='18'%3E1%3C/tspan%3E%3Ctspan%20x='21.4%'%20dy='18'%20class='b1'%3EU%3C/tspan%3E%3Ctspan%20x='21.4%'%20dy='18'%3EO%3C/tspan%3E%3Ctspan%20x='21.4%'%20dy='18'%20class='b2'%3EQ%3C/tspan%3E%3Ctspan%20x='21.4%'%20dy='18'%20class='b1'%3EF%3C/tspan%3E%3Ctspan%20x='21.4%'%20dy='18'%20class='b3'%3EM%3C/tspan%3E%3C/text%3E%3Ctext%20x='29.5%'%20class='c'%20style='animation-duration:2.3s;animation-delay:-3.9s'%3E%3Ctspan%20x='29.5%'%20dy='0'%20class='b1'%3E8%3C/tspan%3E%3Ctspan%20x='29.5%'%20dy='18'%3EV%3C/tspan%3E%3Ctspan%20x='29.5%'%20dy='18'%20class='b2'%3ES%3C/tspan%3E%3Ctspan%20x='29.5%'%20dy='18'%20class='b1'%3EM%3C/tspan%3E%3Ctspan%20x='29.5%'%20dy='18'%3EL%3C/tspan%3E%3Ctspan%20x='29.5%'%20dy='18'%20class='b2'%3E3%3C/tspan%3E%3Ctspan%20x='29.5%'%20dy='18'%3ER%3C/tspan%3E%3Ctspan%20x='29.5%'%20dy='18'%3E8%3C/tspan%3E%3Ctspan%20x='29.5%'%20dy='18'%20class='b3'%3EU%3C/tspan%3E%3Ctspan%20x='29.5%'%20dy='18'%3EI%3C/tspan%3E%3C/text%3E%3Ctext%20x='37.7%'%20class='c'%20style='animation-duration:2.1s;animation-delay:-3.8s'%3E%3Ctspan%20x='37.7%'%20dy='0'%20class='b2'%3EO%3C/tspan%3E%3Ctspan%20x='37.7%'%20dy='18'%20class='b1'%3E8%3C/tspan%3E%3Ctspan%20x='37.7%'%20dy='18'%3EG%3C/tspan%3E%3Ctspan%20x='37.7%'%20dy='18'%20class='b1'%3EI%3C/tspan%3E%3Ctspan%20x='37.7%'%20dy='18'%20class='b2'%3ER%3C/tspan%3E%3Ctspan%20x='37.7%'%20dy='18'%3EW%3C/tspan%3E%3Ctspan%20x='37.7%'%20dy='18'%20class='b1'%3E0%3C/tspan%3E%3Ctspan%20x='37.7%'%20dy='18'%20class='b2'%3E0%3C/tspan%3E%3Ctspan%20x='37.7%'%20dy='18'%3EC%3C/tspan%3E%3Ctspan%20x='37.7%'%20dy='18'%3EJ%3C/tspan%3E%3C/text%3E%3Ctext%20x='45.9%'%20class='c'%20style='animation-duration:3.5s;animation-delay:-0.8s'%3E%3Ctspan%20x='45.9%'%20dy='0'%3EV%3C/tspan%3E%3Ctspan%20x='45.9%'%20dy='18'%20class='b1'%3EQ%3C/tspan%3E%3Ctspan%20x='45.9%'%20dy='18'%20class='b1'%3E7%3C/tspan%3E%3Ctspan%20x='45.9%'%20dy='18'%20class='b2'%3EI%3C/tspan%3E%3Ctspan%20x='45.9%'%20dy='18'%20class='b1'%3E3%3C/tspan%3E%3Ctspan%20x='45.9%'%20dy='18'%20class='b3'%3EL%3C/tspan%3E%3Ctspan%20x='45.9%'%20dy='18'%3EJ%3C/tspan%3E%3Ctspan%20x='45.9%'%20dy='18'%20class='b3'%3EZ%3C/tspan%3E%3Ctspan%20x='45.9%'%20dy='18'%20class='b3'%3EG%3C/tspan%3E%3Ctspan%20x='45.9%'%20dy='18'%3E5%3C/tspan%3E%3C/text%3E%3Ctext%20x='54.1%'%20class='c'%20style='animation-duration:2.6s;animation-delay:-1.5s'%3E%3Ctspan%20x='54.1%'%20dy='0'%20class='b1'%3EG%3C/tspan%3E%3Ctspan%20x='54.1%'%20dy='18'%3E1%3C/tspan%3E%3Ctspan%20x='54.1%'%20dy='18'%3E0%3C/tspan%3E%3Ctspan%20x='54.1%'%20dy='18'%3EF%3C/tspan%3E%3Ctspan%20x='54.1%'%20dy='18'%3E0%3C/tspan%3E%3Ctspan%20x='54.1%'%20dy='18'%20class='b2'%3EC%3C/tspan%3E%3Ctspan%20x='54.1%'%20dy='18'%20class='b2'%3EN%3C/tspan%3E%3Ctspan%20x='54.1%'%20dy='18'%20class='b1'%3EM%3C/tspan%3E%3Ctspan%20x='54.1%'%20dy='18'%20class='b2'%3E9%3C/tspan%3E%3Ctspan%20x='54.1%'%20dy='18'%3EO%3C/tspan%3E%3C/text%3E%3Ctext%20x='62.3%'%20class='c'%20style='animation-duration:3.6s;animation-delay:-0.2s'%3E%3Ctspan%20x='62.3%'%20dy='0'%20class='b1'%3EB%3C/tspan%3E%3Ctspan%20x='62.3%'%20dy='18'%20class='b1'%3E2%3C/tspan%3E%3Ctspan%20x='62.3%'%20dy='18'%20class='b1'%3EX%3C/tspan%3E%3Ctspan%20x='62.3%'%20dy='18'%20class='b1'%3EP%3C/tspan%3E%3Ctspan%20x='62.3%'%20dy='18'%20class='b3'%3EQ%3C/tspan%3E%3Ctspan%20x='62.3%'%20dy='18'%20class='b2'%3ER%3C/tspan%3E%3Ctspan%20x='62.3%'%20dy='18'%20class='b2'%3EL%3C/tspan%3E%3Ctspan%20x='62.3%'%20dy='18'%3E8%3C/tspan%3E%3Ctspan%20x='62.3%'%20dy='18'%3ET%3C/tspan%3E%3Ctspan%20x='62.3%'%20dy='18'%3EE%3C/tspan%3E%3C/text%3E%3Ctext%20x='70.5%'%20class='c'%20style='animation-duration:2.7s;animation-delay:-1.2s'%3E%3Ctspan%20x='70.5%'%20dy='0'%20class='b3'%3EW%3C/tspan%3E%3Ctspan%20x='70.5%'%20dy='18'%20class='b3'%3EQ%3C/tspan%3E%3Ctspan%20x='70.5%'%20dy='18'%20class='b2'%3EV%3C/tspan%3E%3Ctspan%20x='70.5%'%20dy='18'%20class='b1'%3E2%3C/tspan%3E%3Ctspan%20x='70.5%'%20dy='18'%3EQ%3C/tspan%3E%3Ctspan%20x='70.5%'%20dy='18'%20class='b3'%3E7%3C/tspan%3E%3Ctspan%20x='70.5%'%20dy='18'%20class='b1'%3E6%3C/tspan%3E%3Ctspan%20x='70.5%'%20dy='18'%3EP%3C/tspan%3E%3Ctspan%20x='70.5%'%20dy='18'%3E7%3C/tspan%3E%3Ctspan%20x='70.5%'%20dy='18'%3EK%3C/tspan%3E%3C/text%3E%3Ctext%20x='78.6%'%20class='c'%20style='animation-duration:2.2s;animation-delay:-3.2s'%3E%3Ctspan%20x='78.6%'%20dy='0'%3E0%3C/tspan%3E%3Ctspan%20x='78.6%'%20dy='18'%20class='b3'%3EY%3C/tspan%3E%3Ctspan%20x='78.6%'%20dy='18'%3EK%3C/tspan%3E%3Ctspan%20x='78.6%'%20dy='18'%3EL%3C/tspan%3E%3Ctspan%20x='78.6%'%20dy='18'%20class='b1'%3E4%3C/tspan%3E%3Ctspan%20x='78.6%'%20dy='18'%20class='b1'%3EF%3C/tspan%3E%3Ctspan%20x='78.6%'%20dy='18'%20class='b1'%3E1%3C/tspan%3E%3Ctspan%20x='78.6%'%20dy='18'%20class='b2'%3EA%3C/tspan%3E%3Ctspan%20x='78.6%'%20dy='18'%20class='b3'%3EF%3C/tspan%3E%3Ctspan%20x='78.6%'%20dy='18'%20class='b2'%3EO%3C/tspan%3E%3C/text%3E%3Ctext%20x='86.8%'%20class='c'%20style='animation-duration:2.0s;animation-delay:-2.2s'%3E%3Ctspan%20x='86.8%'%20dy='0'%3EU%3C/tspan%3E%3Ctspan%20x='86.8%'%20dy='18'%20class='b1'%3E4%3C/tspan%3E%3Ctspan%20x='86.8%'%20dy='18'%3E2%3C/tspan%3E%3Ctspan%20x='86.8%'%20dy='18'%20class='b2'%3E8%3C/tspan%3E%3Ctspan%20x='86.8%'%20dy='18'%20class='b1'%3EO%3C/tspan%3E%3Ctspan%20x='86.8%'%20dy='18'%20class='b2'%3ES%3C/tspan%3E%3Ctspan%20x='86.8%'%20dy='18'%20class='b1'%3EF%3C/tspan%3E%3Ctspan%20x='86.8%'%20dy='18'%3EM%3C/tspan%3E%3Ctspan%20x='86.8%'%20dy='18'%3E8%3C/tspan%3E%3Ctspan%20x='86.8%'%20dy='18'%3EY%3C/tspan%3E%3C/text%3E%3Ctext%20x='95.0%'%20class='c'%20style='animation-duration:2.2s;animation-delay:-2.0s'%3E%3Ctspan%20x='95.0%'%20dy='0'%20class='b3'%3EJ%3C/tspan%3E%3Ctspan%20x='95.0%'%20dy='18'%20class='b1'%3ER%3C/tspan%3E%3Ctspan%20x='95.0%'%20dy='18'%20class='b2'%3ED%3C/tspan%3E%3Ctspan%20x='95.0%'%20dy='18'%3EC%3C/tspan%3E%3Ctspan%20x='95.0%'%20dy='18'%3EX%3C/tspan%3E%3Ctspan%20x='95.0%'%20dy='18'%20class='b1'%3EM%3C/tspan%3E%3Ctspan%20x='95.0%'%20dy='18'%20class='b1'%3EM%3C/tspan%3E%3Ctspan%20x='95.0%'%20dy='18'%3EL%3C/tspan%3E%3Ctspan%20x='95.0%'%20dy='18'%20class='b3'%3EL%3C/tspan%3E%3Ctspan%20x='95.0%'%20dy='18'%20class='b1'%3E1%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}

/* スパイダーウェブ: CSSのみで16px枠の上に緻密な蜘蛛の巣を描画 + 放射状の展開アニメーション */
.frame-anim-spider-web::after {
  content: ''; position: absolute; inset: 0; padding: 16px; z-index: -1;
  background:
    repeating-radial-gradient(transparent 0, transparent 8px, rgba(255,255,255,0.7) 9px, transparent 10px),
    repeating-conic-gradient(transparent 0, transparent 15deg, rgba(255,255,255,0.7) 15.5deg, transparent 16deg);
  background-color: rgba(0,0,0,0.3);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: web-shoot 2.5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

/* 中央から外側へシュッと広がり、フェードアウトする動き */
@keyframes web-shoot {
  0% { clip-path: circle(0% at 50% 50%); opacity: 1; }
  25% { clip-path: circle(150% at 50% 50%); opacity: 1; }
  75% { clip-path: circle(150% at 50% 50%); opacity: 0.8; }
  100% { clip-path: circle(150% at 50% 50%); opacity: 0; }
}

/* -----------------------------------------
   3. サクラドロップ (変更案: 立体的で量が多く、サイズも大きい桜)
----------------------------------------- */
/* 既存の .frame-anim-sakura-drop を削除し、以下に差し替えてください */
.frame-anim-sakura-drop { box-shadow: inset 0 0 0 16px rgba(255,183,197,0.1), inset 0 0 20px rgba(255, 183, 197, 0.5); }
.frame-anim-sakura-drop::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px);
  /* 35枚の桜の花びらが、個別のサイズで3D回転(rotateX)しながら舞う高密度SVGデータ */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cstyle%3E.p{fill:%23ffb7c5;filter:drop-shadow(0%200%202px%20rgba(255,183,197,.8));opacity:.9;transform-origin:center;animation:f%20linear%20infinite}@keyframes%20f{0%{transform:translate(0,-20px)%20rotate(0deg)%20rotateX(0deg);opacity:0}10%,90%{opacity:1}100%{transform:translate(-30px,120px)%20rotate(360deg)%20rotateX(720deg);opacity:0}}%3C/style%3E%3Cdefs%3E%3Cpath%20id='s'%20d='M0,15%20C-12,5%20-6,-8%200,0%20C6,-8%2012,5%200,15Z'/%3E%3C/defs%3E%3Cuse%20href='%23s'%20x='21.3'%20class='p'%20style='animation:f%207.7s%20linear%20infinite%20-7.9s;transform:scale(0.78)'/%3E%3Cuse%20href='%23s'%20x='89.2'%20class='p'%20style='animation:f%207.9s%20linear%20infinite%20-0.9s;transform:scale(1.38)'/%3E%3Cuse%20href='%23s'%20x='97.4'%20class='p'%20style='animation:f%206.2s%20linear%20infinite%20-3.5s;transform:scale(0.74)'/%3E%3Cuse%20href='%23s'%20x='41.6'%20class='p'%20style='animation:f%205.6s%20linear%20infinite%20-7.4s;transform:scale(0.64)'/%3E%3Cuse%20href='%23s'%20x='33.2'%20class='p'%20style='animation:f%206.3s%20linear%20infinite%20-0.6s;transform:scale(1.04)'/%3E%3Cuse%20href='%23s'%20x='121.1'%20class='p'%20style='animation:f%204.6s%20linear%20infinite%20-7.2s;transform:scale(0.78)'/%3E%3Cuse%20href='%23s'%20x='55.3'%20class='p'%20style='animation:f%205.8s%20linear%20infinite%20-2.6s;transform:scale(1.33)'/%3E%3Cuse%20href='%23s'%20x='125.0'%20class='p'%20style='animation:f%206.2s%20linear%20infinite%20-3.5s;transform:scale(1.11)'/%3E%3Cuse%20href='%23s'%20x='80.1'%20class='p'%20style='animation:f%204.4s%20linear%20infinite%20-6.1s;transform:scale(1.33)'/%3E%3Cuse%20href='%23s'%20x='14.4'%20class='p'%20style='animation:f%207.4s%20linear%20infinite%20-6.2s;transform:scale(0.77)'/%3E%3Cuse%20href='%23s'%20x='38.2'%20class='p'%20style='animation:f%205.9s%20linear%20infinite%20-2.6s;transform:scale(0.63)'/%3E%3Cuse%20href='%23s'%20x='42.2'%20class='p'%20style='animation:f%206.7s%20linear%20infinite%20-2.9s;transform:scale(0.77)'/%3E%3Cuse%20href='%23s'%20x='104.3'%20class='p'%20style='animation:f%207.3s%20linear%20infinite%20-1.8s;transform:scale(1.15)'/%3E%3Cuse%20href='%23s'%20x='52.6'%20class='p'%20style='animation:f%205.1s%20linear%20infinite%20-2.7s;transform:scale(0.63)'/%3E%3Cuse%20href='%23s'%20x='65.9'%20class='p'%20style='animation:f%207.6s%20linear%20infinite%20-4.5s;transform:scale(0.71)'/%3E%3Cuse%20href='%23s'%20x='22.7'%20class='p'%20style='animation:f%205.6s%20linear%20infinite%20-2.4s;transform:scale(0.67)'/%3E%3Cuse%20href='%23s'%20x='32.6'%20class='p'%20style='animation:f%204.3s%20linear%20infinite%20-2.1s;transform:scale(1.34)'/%3E%3Cuse%20href='%23s'%20x='40.3'%20class='p'%20style='animation:f%204.4s%20linear%20infinite%20-3.4s;transform:scale(1.07)'/%3E%3Cuse%20href='%23s'%20x='28.8'%20class='p'%20style='animation:f%205.0s%20linear%20infinite%20-7.6s;transform:scale(0.84)'/%3E%3Cuse%20href='%23s'%20x='53.0'%20class='p'%20style='animation:f%204.3s%20linear%20infinite%20-7.8s;transform:scale(1.17)'/%3E%3Cuse%20href='%23s'%20x='2.0'%20class='p'%20style='animation:f%204.9s%20linear%20infinite%20-6.6s;transform:scale(1.08)'/%3E%3Cuse%20href='%23s'%20x='128.9'%20class='p'%20style='animation:f%205.7s%20linear%20infinite%20-3.3s;transform:scale(0.94)'/%3E%3Cuse%20href='%23s'%20x='1.3'%20class='p'%20style='animation:f%207.0s%20linear%20infinite%20-5.2s;transform:scale(1.09)'/%3E%3Cuse%20href='%23s'%20x='26.4'%20class='p'%20style='animation:f%206.3s%20linear%20infinite%20-5.5s;transform:scale(0.7)'/%3E%3Cuse%20href='%23s'%20x='96.8'%20class='p'%20style='animation:f%205.7s%20linear%20infinite%20-0.3s;transform:scale(1.4)'/%3E%3Cuse%20href='%23s'%20x='100.1'%20class='p'%20style='animation:f%206.8s%20linear%20infinite%20-7.3s;transform:scale(0.71)'/%3E%3Cuse%20href='%23s'%20x='104.7'%20class='p'%20style='animation:f%205.2s%20linear%20infinite%20-4.7s;transform:scale(1.06)'/%3E%3Cuse%20href='%23s'%20x='123.2'%20class='p'%20style='animation:f%206.9s%20linear%20infinite%20-0.4s;transform:scale(1.33)'/%3E%3Cuse%20href='%23s'%20x='98.5'%20class='p'%20style='animation:f%207.9s%20linear%20infinite%20-7.0s;transform:scale(0.89)'/%3E%3Cuse%20href='%23s'%20x='55.2'%20class='p'%20style='animation:f%205.2s%20linear%20infinite%20-4.8s;transform:scale(0.77)'/%3E%3Cuse%20href='%23s'%20x='68.6'%20class='p'%20style='animation:f%204.8s%20linear%20infinite%20-4.3s;transform:scale(0.71)'/%3E%3Cuse%20href='%23s'%20x='9.7'%20class='p'%20style='animation:f%205.8s%20linear%20infinite%20-2.7s;transform:scale(1.19)'/%3E%3Cuse%20href='%23s'%20x='2.3'%20class='p'%20style='animation:f%207.9s%20linear%20infinite%20-1.6s;transform:scale(0.68)'/%3E%3Cuse%20href='%23s'%20x='116.5'%20class='p'%20style='animation:f%204.8s%20linear%20infinite%20-5.2s;transform:scale(1.15)'/%3E%3Cuse%20href='%23s'%20x='40.3'%20class='p'%20style='animation:f%205.5s%20linear%20infinite%20-7.7s;transform:scale(0.97)'/%3E%3C/svg%3E");
  background-size: cover;
}

/* -----------------------------------------
   4. スノウフォール (変更案: QRコードへの積雪 ＋ 奥行きのある降雪)
----------------------------------------- */
/* 既存の .frame-anim-snowfall を削除し、以下に差し替えてください */
.frame-anim-snowfall { box-shadow: inset 0 0 0 16px rgba(255,255,255,0.1), inset 0 0 15px rgba(255,255,255,0.3); }
.frame-anim-snowfall::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px);
  /* 大小の雪が異なる速度と透明度で降る（手前と奥の奥行き表現） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3E.s1%7Bfill:%23fff;filter:drop-shadow(0 0 2px %23fff);animation:f 3s linear infinite%7D.s2%7Bfill:%23fff;opacity:0.6;animation:f 5s linear infinite%7D.s3%7Bfill:%23fff;opacity:0.3;animation:f 8s linear infinite%7D@keyframes f%7B0%25%7Btransform:translateY(-10%25)%7D100%25%7Btransform:translateY(110%25)%7D%7D%3C/style%3E%3Ccircle cx='10' cy='0' r='1.5' class='s1' style='animation-delay:0s'/%3E%3Ccircle cx='30' cy='0' r='0.8' class='s2' style='animation-delay:1.5s'/%3E%3Ccircle cx='50' cy='0' r='2' class='s1' style='animation-delay:2s'/%3E%3Ccircle cx='70' cy='0' r='0.5' class='s3' style='animation-delay:0.5s'/%3E%3Ccircle cx='90' cy='0' r='1.2' class='s2' style='animation-delay:3s'/%3E%3Ccircle cx='20' cy='0' r='0.6' class='s3' style='animation-delay:4s'/%3E%3Ccircle cx='80' cy='0' r='1.8' class='s1' style='animation-delay:1s'/%3E%3C/svg%3E");
  background-size: cover;
}
/* QRコードの上に雪を積もらせる特別処理 */
.frame-anim-snowfall .qr-container { position: relative; }
.frame-anim-snowfall .qr-container::before {
  content: ''; position: absolute; top: -10px; left: -2px; right: -2px; height: 18px;
  background: radial-gradient(circle at 20% 60%, #fff 40%, transparent 60%), radial-gradient(circle at 50% 40%, #fff 55%, transparent 70%), radial-gradient(circle at 80% 60%, #fff 40%, transparent 60%);
  background-size: 100% 100%; filter: drop-shadow(0 -2px 3px rgba(255,255,255,0.8));
  z-index: 20; pointer-events: none; opacity: 0.95;
}
/* -----------------------------------------
   5. バブル (変更案: 昇って上部で破裂して消える気泡)
----------------------------------------- */
/* 既存の .frame-anim-bubble を削除し、以下に差し替えてください */
.frame-anim-bubble { box-shadow: inset 0 0 0 16px rgba(173,216,230,0.1), inset 0 0 15px rgba(173,216,230,0.3); }
.frame-anim-bubble::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px);
  /* 昇って上部(80〜90%)で急激にスケールアップし、opacity:0になる破裂アニメーション */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3E.b%7Bfill:rgba(173,216,230,0.2);stroke:%23add8e6;stroke-width:0.5;filter:drop-shadow(0 0 1px %23add8e6);animation:pop ease-in infinite%7D@keyframes pop%7B0%25%7Btransform:translateY(110%25) scale(0.5);opacity:0%7D10%25%7Bopacity:1%7D80%25%7Btransform:translateY(20%25) scale(1.5);opacity:1;stroke-width:0.5%7D90%25%7Btransform:translateY(10%25) scale(2.5);opacity:0;stroke-width:0.1%7D100%25%7Btransform:translateY(0%25) scale(0);opacity:0%7D%7D%3C/style%3E%3Ccircle cx='15' cy='0' r='2' class='b' style='animation-duration:2.5s;animation-delay:0s'/%3E%3Ccircle cx='85' cy='0' r='3' class='b' style='animation-duration:4s;animation-delay:1s'/%3E%3Ccircle cx='10' cy='0' r='1.5' class='b' style='animation-duration:3.2s;animation-delay:2s'/%3E%3Ccircle cx='90' cy='0' r='2.5' class='b' style='animation-duration:4.5s;animation-delay:0.5s'/%3E%3Ccircle cx='30' cy='0' r='1.8' class='b' style='animation-duration:3.8s;animation-delay:1.5s'/%3E%3Ccircle cx='70' cy='0' r='2.2' class='b' style='animation-duration:2.9s;animation-delay:2.5s'/%3E%3C/svg%3E");
  background-size: cover;
}

/* -----------------------------------------
   2. スモーク (変更案: 下の方から不規則に立ち上る煙)
----------------------------------------- */
/* 既存の .frame-anim-smoke を削除し、以下に差し替えてください */
.frame-anim-smoke { box-shadow: inset 0 0 0 16px rgba(105,105,105,0.1); }
.frame-anim-smoke::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px);
  /* 複数のぼやけた気体を、下(y=120px)から上(y=-20px)へ向かって拡大しながら昇らせる */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='8'/%3E%3C/filter%3E%3Cstyle%3E.sm%7Bfill:%23888;filter:url(%23blur);animation:r1 linear infinite%7D.sm2%7Bfill:%23666;filter:url(%23blur);animation:r2 linear infinite%7D@keyframes r1%7B0%25%7Btransform:translate(0px,120px) scale(0.5);opacity:0%7D30%25%7Bopacity:0.6%7D100%25%7Btransform:translate(-15px,-20px) scale(2.5);opacity:0%7D%7D@keyframes r2%7B0%25%7Btransform:translate(0px,120px) scale(0.5);opacity:0%7D30%25%7Bopacity:0.5%7D100%25%7Btransform:translate(15px,-20px) scale(2.5);opacity:0%7D%7D%3C/style%3E%3Ccircle cx='20' cy='0' r='12' class='sm' style='animation-duration:8s'/%3E%3Ccircle cx='50' cy='0' r='15' class='sm2' style='animation-duration:11s;animation-delay:-3s'/%3E%3Ccircle cx='80' cy='0' r='12' class='sm' style='animation-duration:9s;animation-delay:-6s'/%3E%3Ccircle cx='35' cy='0' r='15' class='sm2' style='animation-duration:10s;animation-delay:-2s'/%3E%3Ccircle cx='65' cy='0' r='15' class='sm' style='animation-duration:12s;animation-delay:-7s'/%3E%3Ccircle cx='50' cy='0' r='18' class='sm2' style='animation-duration:14s;animation-delay:-9s'/%3E%3C/svg%3E");
  background-size: cover; box-shadow: inset 0 0 20px rgba(105,105,105,0.3);
}
/* -----------------------------------------
   クリスタルダスト (修正案: 144個の氷晶が全体をゆっくり舞う)
----------------------------------------- */
.frame-anim-crystal-dust { border: 2px dotted #fff; box-shadow: inset 0 0 0 14px rgba(224,255,255,0.1), 0 0 15px #e0ffff, inset 0 0 20px #e0ffff; }
.frame-anim-crystal-dust::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: inset(0 round 12px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3E.c%7Bfill:%23e0ffff;filter:drop-shadow(0 0 1px %23e0ffff);animation:t infinite alternate;transform-origin:center;transform-box:fill-box%7D@keyframes t%7B0%25%7Btransform:scale(0);opacity:0%7D100%25%7Btransform:scale(1.2) rotate(90deg);opacity:0.8%7D%7D%3C/style%3E%3Cdefs%3E%3Cpolygon id='s' points='2,0 2.5,1.5 4,2 2.5,2.5 2,4 1.5,2.5 0,2 1.5,1.5'/%3E%3C/defs%3E%3Cuse href='%23s' x='0' y='0' class='c' style='animation-duration:3.2s;animation-delay:2.8s' /%3E%3Cuse href='%23s' x='8.7' y='0' class='c' style='animation-duration:4.5s;animation-delay:1.1s' /%3E%3Cuse href='%23s' x='16.2' y='2.2' class='c' style='animation-duration:3.3s;animation-delay:3.1s' /%3E%3Cuse href='%23s' x='26.5' y='0' class='c' style='animation-duration:3.5s;animation-delay:3.8s' /%3E%3Cuse href='%23s' x='34.6' y='1.7' class='c' style='animation-duration:2.1s;animation-delay:1.6s' /%3E%3Cuse href='%23s' x='44.8' y='0' class='c' style='animation-duration:3.5s;animation-delay:0.0s' /%3E%3Cuse href='%23s' x='57.5' y='2.7' class='c' style='animation-duration:3.7s;animation-delay:0.9s' /%3E%3Cuse href='%23s' x='65.4' y='0.9' class='c' style='animation-duration:3.9s;animation-delay:3.8s' /%3E%3Cuse href='%23s' x='71.7' y='1.8' class='c' style='animation-duration:4.9s;animation-delay:0.3s' /%3E%3Cuse href='%23s' x='83.5' y='3.8' class='c' style='animation-duration:3.9s;animation-delay:0.1s' /%3E%3Cuse href='%23s' x='91.4' y='2.9' class='c' style='animation-duration:4.7s;animation-delay:1.1s' /%3E%3Cuse href='%23s' x='100' y='1.5' class='c' style='animation-duration:4.6s;animation-delay:2.5s' /%3E%3Cuse href='%23s' x='2.9' y='8.4' class='c' style='animation-duration:4.2s;animation-delay:3.8s' /%3E%3Cuse href='%23s' x='12.7' y='11.6' class='c' style='animation-duration:2.0s;animation-delay:0.4s' /%3E%3Cuse href='%23s' x='20.4' y='5.2' class='c' style='animation-duration:2.7s;animation-delay:3.0s' /%3E%3Cuse href='%23s' x='30.3' y='12.8' class='c' style='animation-duration:2.4s;animation-delay:2.7s' /%3E%3Cuse href='%23s' x='36.6' y='9.9' class='c' style='animation-duration:4.3s;animation-delay:3.7s' /%3E%3Cuse href='%23s' x='41.9' y='8.5' class='c' style='animation-duration:2.1s;animation-delay:1.3s' /%3E%3Cuse href='%23s' x='55.1' y='11.6' class='c' style='animation-duration:2.1s;animation-delay:3.2s' /%3E%3Cuse href='%23s' x='67.3' y='10.3' class='c' style='animation-duration:3.5s;animation-delay:0.1s' /%3E%3Cuse href='%23s' x='73.7' y='9.1' class='c' style='animation-duration:2.0s;animation-delay:2.2s' /%3E%3Cuse href='%23s' x='84.0' y='10.4' class='c' style='animation-duration:4.5s;animation-delay:1.0s' /%3E%3Cuse href='%23s' x='87.1' y='8.4' class='c' style='animation-duration:4.7s;animation-delay:0.9s' /%3E%3Cuse href='%23s' x='99.4' y='8.3' class='c' style='animation-duration:4.5s;animation-delay:1.3s' /%3E%3Cuse href='%23s' x='3.3' y='18.9' class='c' style='animation-duration:4.4s;animation-delay:1.3s' /%3E%3Cuse href='%23s' x='13.0' y='21.7' class='c' style='animation-duration:4.4s;animation-delay:0.7s' /%3E%3Cuse href='%23s' x='16.9' y='16.5' class='c' style='animation-duration:4.7s;animation-delay:1.6s' /%3E%3Cuse href='%23s' x='25.5' y='18.9' class='c' style='animation-duration:5.0s;animation-delay:0.2s' /%3E%3Cuse href='%23s' x='37.2' y='14.8' class='c' style='animation-duration:3.8s;animation-delay:3.6s' /%3E%3Cuse href='%23s' x='44.5' y='14.5' class='c' style='animation-duration:5.0s;animation-delay:3.6s' /%3E%3Cuse href='%23s' x='54.5' y='17.7' class='c' style='animation-duration:4.8s;animation-delay:0.8s' /%3E%3Cuse href='%23s' x='63.4' y='21.5' class='c' style='animation-duration:2.9s;animation-delay:0.4s' /%3E%3Cuse href='%23s' x='72.4' y='17.0' class='c' style='animation-duration:3.5s;animation-delay:2.2s' /%3E%3Cuse href='%23s' x='82.8' y='15.0' class='c' style='animation-duration:2.1s;animation-delay:0.0s' /%3E%3Cuse href='%23s' x='87.8' y='14.2' class='c' style='animation-duration:3.3s;animation-delay:1.3s' /%3E%3Cuse href='%23s' x='97.9' y='21.2' class='c' style='animation-duration:4.3s;animation-delay:3.7s' /%3E%3Cuse href='%23s' x='0.7' y='30.4' class='c' style='animation-duration:3.0s;animation-delay:0.7s' /%3E%3Cuse href='%23s' x='7.5' y='26.2' class='c' style='animation-duration:2.9s;animation-delay:4.0s' /%3E%3Cuse href='%23s' x='17.9' y='31.0' class='c' style='animation-duration:3.3s;animation-delay:0.7s' /%3E%3Cuse href='%23s' x='24.4' y='25.5' class='c' style='animation-duration:2.9s;animation-delay:0.1s' /%3E%3Cuse href='%23s' x='39.6' y='27.8' class='c' style='animation-duration:4.8s;animation-delay:3.4s' /%3E%3Cuse href='%23s' x='48.5' y='31.1' class='c' style='animation-duration:2.2s;animation-delay:3.6s' /%3E%3Cuse href='%23s' x='57.0' y='24.5' class='c' style='animation-duration:3.9s;animation-delay:0.6s' /%3E%3Cuse href='%23s' x='67.5' y='26.6' class='c' style='animation-duration:4.7s;animation-delay:3.1s' /%3E%3Cuse href='%23s' x='69.4' y='25.8' class='c' style='animation-duration:4.4s;animation-delay:0.1s' /%3E%3Cuse href='%23s' x='79.9' y='28.4' class='c' style='animation-duration:4.0s;animation-delay:1.4s' /%3E%3Cuse href='%23s' x='87.9' y='28.1' class='c' style='animation-duration:3.5s;animation-delay:1.4s' /%3E%3Cuse href='%23s' x='98.6' y='25.6' class='c' style='animation-duration:4.3s;animation-delay:1.3s' /%3E%3Cuse href='%23s' x='0' y='33.0' class='c' style='animation-duration:3.5s;animation-delay:2.9s' /%3E%3Cuse href='%23s' x='11.4' y='33.2' class='c' style='animation-duration:3.2s;animation-delay:1.5s' /%3E%3Cuse href='%23s' x='16.3' y='35.5' class='c' style='animation-duration:2.3s;animation-delay:1.3s' /%3E%3Cuse href='%23s' x='28.3' y='35.0' class='c' style='animation-duration:4.6s;animation-delay:0.6s' /%3E%3Cuse href='%23s' x='37.8' y='36.8' class='c' style='animation-duration:3.9s;animation-delay:1.1s' /%3E%3Cuse href='%23s' x='43.9' y='34.7' class='c' style='animation-duration:2.5s;animation-delay:3.2s' /%3E%3Cuse href='%23s' x='56.0' y='34.7' class='c' style='animation-duration:3.5s;animation-delay:2.3s' /%3E%3Cuse href='%23s' x='64.1' y='39.5' class='c' style='animation-duration:4.4s;animation-delay:3.5s' /%3E%3Cuse href='%23s' x='71.6' y='40.0' class='c' style='animation-duration:4.4s;animation-delay:2.2s' /%3E%3Cuse href='%23s' x='79.6' y='38.3' class='c' style='animation-duration:2.5s;animation-delay:0.4s' /%3E%3Cuse href='%23s' x='88.0' y='39.7' class='c' style='animation-duration:3.8s;animation-delay:3.3s' /%3E%3Cuse href='%23s' x='99.1' y='37.9' class='c' style='animation-duration:4.8s;animation-delay:1.0s' /%3E%3Cuse href='%23s' x='0' y='46.2' class='c' style='animation-duration:3.9s;animation-delay:3.9s' /%3E%3Cuse href='%23s' x='5.8' y='46.0' class='c' style='animation-duration:3.9s;animation-delay:3.9s' /%3E%3Cuse href='%23s' x='14.2' y='45.7' class='c' style='animation-duration:2.1s;animation-delay:2.9s' /%3E%3Cuse href='%23s' x='26.1' y='44.1' class='c' style='animation-duration:2.0s;animation-delay:2.4s' /%3E%3Cuse href='%23s' x='38.0' y='45.8' class='c' style='animation-duration:3.3s;animation-delay:2.6s' /%3E%3Cuse href='%23s' x='45.4' y='43.6' class='c' style='animation-duration:2.4s;animation-delay:3.7s' /%3E%3Cuse href='%23s' x='54.8' y='48.3' class='c' style='animation-duration:3.6s;animation-delay:0.1s' /%3E%3Cuse href='%23s' x='63.0' y='46.6' class='c' style='animation-duration:3.8s;animation-delay:2.5s' /%3E%3Cuse href='%23s' x='72.8' y='41.7' class='c' style='animation-duration:4.5s;animation-delay:1.3s' /%3E%3Cuse href='%23s' x='80.7' y='44.1' class='c' style='animation-duration:2.2s;animation-delay:3.5s' /%3E%3Cuse href='%23s' x='91.5' y='49.2' class='c' style='animation-duration:4.8s;animation-delay:0.2s' /%3E%3Cuse href='%23s' x='97.5' y='47.7' class='c' style='animation-duration:3.2s;animation-delay:2.7s' /%3E%3Cuse href='%23s' x='0' y='51.0' class='c' style='animation-duration:3.9s;animation-delay:3.0s' /%3E%3Cuse href='%23s' x='8.0' y='51.1' class='c' style='animation-duration:4.8s;animation-delay:1.1s' /%3E%3Cuse href='%23s' x='15.0' y='52.7' class='c' style='animation-duration:2.6s;animation-delay:0.1s' /%3E%3Cuse href='%23s' x='24.2' y='51.0' class='c' style='animation-duration:4.4s;animation-delay:2.1s' /%3E%3Cuse href='%23s' x='33.3' y='55.1' class='c' style='animation-duration:4.3s;animation-delay:0.3s' /%3E%3Cuse href='%23s' x='46.0' y='54.8' class='c' style='animation-duration:3.8s;animation-delay:3.1s' /%3E%3Cuse href='%23s' x='51.3' y='51.1' class='c' style='animation-duration:2.2s;animation-delay:0.1s' /%3E%3Cuse href='%23s' x='61.2' y='52.3' class='c' style='animation-duration:4.4s;animation-delay:1.6s' /%3E%3Cuse href='%23s' x='72.3' y='56.6' class='c' style='animation-duration:4.6s;animation-delay:2.0s' /%3E%3Cuse href='%23s' x='79.8' y='52.1' class='c' style='animation-duration:2.0s;animation-delay:2.4s' /%3E%3Cuse href='%23s' x='91.3' y='54.2' class='c' style='animation-duration:3.5s;animation-delay:1.8s' /%3E%3Cuse href='%23s' x='96.5' y='54.2' class='c' style='animation-duration:2.3s;animation-delay:1.9s' /%3E%3Cuse href='%23s' x='0' y='61.3' class='c' style='animation-duration:3.9s;animation-delay:2.7s' /%3E%3Cuse href='%23s' x='12.5' y='62.9' class='c' style='animation-duration:4.9s;animation-delay:1.1s' /%3E%3Cuse href='%23s' x='15.8' y='65.9' class='c' style='animation-duration:2.4s;animation-delay:3.0s' /%3E%3Cuse href='%23s' x='28.5' y='66.1' class='c' style='animation-duration:2.1s;animation-delay:3.8s' /%3E%3Cuse href='%23s' x='36.2' y='66.3' class='c' style='animation-duration:3.4s;animation-delay:1.0s' /%3E%3Cuse href='%23s' x='47.5' y='62.6' class='c' style='animation-duration:3.7s;animation-delay:0.7s' /%3E%3Cuse href='%23s' x='55.2' y='65.4' class='c' style='animation-duration:2.1s;animation-delay:1.6s' /%3E%3Cuse href='%23s' x='63.5' y='60.4' class='c' style='animation-duration:2.0s;animation-delay:3.0s' /%3E%3Cuse href='%23s' x='71.9' y='64.4' class='c' style='animation-duration:4.1s;animation-delay:1.1s' /%3E%3Cuse href='%23s' x='85.2' y='66.3' class='c' style='animation-duration:3.0s;animation-delay:1.4s' /%3E%3Cuse href='%23s' x='89.9' y='63.5' class='c' style='animation-duration:4.9s;animation-delay:0.7s' /%3E%3Cuse href='%23s' x='100' y='66.4' class='c' style='animation-duration:3.9s;animation-delay:1.7s' /%3E%3Cuse href='%23s' x='0' y='74.0' class='c' style='animation-duration:3.1s;animation-delay:0.7s' /%3E%3Cuse href='%23s' x='11.4' y='76.2' class='c' style='animation-duration:4.6s;animation-delay:0.0s' /%3E%3Cuse href='%23s' x='19.4' y='71.3' class='c' style='animation-duration:2.3s;animation-delay:2.3s' /%3E%3Cuse href='%23s' x='27.0' y='70.5' class='c' style='animation-duration:4.8s;animation-delay:2.3s' /%3E%3Cuse href='%23s' x='34.9' y='75.2' class='c' style='animation-duration:2.9s;animation-delay:0.7s' /%3E%3Cuse href='%23s' x='47.4' y='76.4' class='c' style='animation-duration:2.4s;animation-delay:2.5s' /%3E%3Cuse href='%23s' x='55.3' y='73.7' class='c' style='animation-duration:4.9s;animation-delay:1.3s' /%3E%3Cuse href='%23s' x='60.8' y='70.2' class='c' style='animation-duration:4.7s;animation-delay:2.6s' /%3E%3Cuse href='%23s' x='71.0' y='72.6' class='c' style='animation-duration:3.0s;animation-delay:1.9s' /%3E%3Cuse href='%23s' x='84.5' y='73.2' class='c' style='animation-duration:3.7s;animation-delay:0.7s' /%3E%3Cuse href='%23s' x='87.8' y='74.1' class='c' style='animation-duration:2.1s;animation-delay:1.0s' /%3E%3Cuse href='%23s' x='100' y='68.9' class='c' style='animation-duration:3.9s;animation-delay:1.2s' /%3E%3Cuse href='%23s' x='1.9' y='85.6' class='c' style='animation-duration:2.6s;animation-delay:1.2s' /%3E%3Cuse href='%23s' x='7.0' y='80.5' class='c' style='animation-duration:3.6s;animation-delay:0.3s' /%3E%3Cuse href='%23s' x='17.7' y='79.2' class='c' style='animation-duration:2.2s;animation-delay:0.8s' /%3E%3Cuse href='%23s' x='28.5' y='85.5' class='c' style='animation-duration:2.1s;animation-delay:3.8s' /%3E%3Cuse href='%23s' x='39.5' y='84.2' class='c' style='animation-duration:2.6s;animation-delay:0.9s' /%3E%3Cuse href='%23s' x='47.0' y='79.5' class='c' style='animation-duration:2.7s;animation-delay:2.5s' /%3E%3Cuse href='%23s' x='53.3' y='78.6' class='c' style='animation-duration:2.1s;animation-delay:0.4s' /%3E%3Cuse href='%23s' x='60.5' y='82.1' class='c' style='animation-duration:4.3s;animation-delay:0.9s' /%3E%3Cuse href='%23s' x='76.4' y='85.6' class='c' style='animation-duration:2.1s;animation-delay:2.4s' /%3E%3Cuse href='%23s' x='78.7' y='83.1' class='c' style='animation-duration:2.9s;animation-delay:3.7s' /%3E%3Cuse href='%23s' x='91.0' y='82.5' class='c' style='animation-duration:2.7s;animation-delay:1.0s' /%3E%3Cuse href='%23s' x='96.4' y='78.8' class='c' style='animation-duration:4.6s;animation-delay:2.7s' /%3E%3Cuse href='%23s' x='0' y='87.0' class='c' style='animation-duration:4.6s;animation-delay:2.5s' /%3E%3Cuse href='%23s' x='6.8' y='92.6' class='c' style='animation-duration:3.0s;animation-delay:2.8s' /%3E%3Cuse href='%23s' x='19.3' y='94.4' class='c' style='animation-duration:2.0s;animation-delay:0.8s' /%3E%3Cuse href='%23s' x='29.7' y='88.5' class='c' style='animation-duration:2.5s;animation-delay:2.5s' /%3E%3Cuse href='%23s' x='39.7' y='87.4' class='c' style='animation-duration:4.3s;animation-delay:0.4s' /%3E%3Cuse href='%23s' x='49.4' y='92.2' class='c' style='animation-duration:4.7s;animation-delay:0.2s' /%3E%3Cuse href='%23s' x='55.7' y='87.1' class='c' style='animation-duration:2.8s;animation-delay:3.0s' /%3E%3Cuse href='%23s' x='61.8' y='90.2' class='c' style='animation-duration:2.1s;animation-delay:2.1s' /%3E%3Cuse href='%23s' x='70.0' y='87.0' class='c' style='animation-duration:2.4s;animation-delay:1.3s' /%3E%3Cuse href='%23s' x='82.8' y='92.2' class='c' style='animation-duration:2.8s;animation-delay:0.1s' /%3E%3Cuse href='%23s' x='88.8' y='94.2' class='c' style='animation-duration:3.2s;animation-delay:0.5s' /%3E%3Cuse href='%23s' x='100' y='88.1' class='c' style='animation-duration:4.7s;animation-delay:2.8s' /%3E%3Cuse href='%23s' x='0' y='100' class='c' style='animation-duration:2.1s;animation-delay:2.1s' /%3E%3Cuse href='%23s' x='11.6' y='97.6' class='c' style='animation-duration:2.2s;animation-delay:2.0s' /%3E%3Cuse href='%23s' x='16.1' y='100' class='c' style='animation-duration:2.9s;animation-delay:0.9s' /%3E%3Cuse href='%23s' x='26.3' y='98.7' class='c' style='animation-duration:4.4s;animation-delay:2.3s' /%3E%3Cuse href='%23s' x='39.8' y='100' class='c' style='animation-duration:3.9s;animation-delay:1.2s' /%3E%3Cuse href='%23s' x='43.0' y='100' class='c' style='animation-duration:3.0s;animation-delay:0.8s' /%3E%3Cuse href='%23s' x='53.8' y='100' class='c' style='animation-duration:3.3s;animation-delay:3.4s' /%3E%3Cuse href='%23s' x='67.1' y='100' class='c' style='animation-duration:4.5s;animation-delay:2.0s' /%3E%3Cuse href='%23s' x='76.0' y='100' class='c' style='animation-duration:4.6s;animation-delay:0.4s' /%3E%3Cuse href='%23s' x='81.1' y='99.8' class='c' style='animation-duration:3.5s;animation-delay:0.4s' /%3E%3Cuse href='%23s' x='92.8' y='100' class='c' style='animation-duration:3.8s;animation-delay:3.5s' /%3E%3Cuse href='%23s' x='98.2' y='96.9' class='c' style='animation-duration:3.7s;animation-delay:1.0s' /%3E%3C/svg%3E");
  background-size: cover;
}

/* -----------------------------------------
   1. バタフライ (修正版: サイズを半減させ、各数値をコメントで解説)
----------------------------------------- */
/* 
 【バタフライのアニメーション数値解説】
  以下の background-image (SVG) の中には、動きを制御するキーフレーム(keyframes)が埋め込まれています。
  
  ◆ 蝶のサイズ変更：
     scale(1.0) の部分です。以前は scale(2.0)〜scale(2.5) だったものを半分の 1.0〜1.2 前後に下げています。
  ◆ 蝶の移動経路：
     translate(Xpx, Ypx) の部分です。Xが横、Yが縦の座標です。
  ◆ 羽ばたきの速さ：
     animation: flap 0.4s の部分です。0.4sを短くすると羽ばたきが速くなります。
  ◆ 飛ぶスピード（1周の時間）：
     animation: fly1 25s の部分です。25s（25秒）を短くすると速く飛び、長くするとゆっくりになります。
*/
.frame-anim-butterfly { box-shadow: inset 0 0 0 16px rgba(255,105,180,0.1), -10px 0 20px #ff69b4, 10px 0 20px #8a2be2, inset -10px 0 20px #ff69b4, inset 10px 0 20px #8a2be2; }
.frame-anim-butterfly::before {
  content: ''; position: absolute; inset: -40px; pointer-events: none;
  z-index: 5; /* QRコードの裏側かつ、カード背景の表側 */
  clip-path: none; 
  /* 蝶の scale を 1.0 前後に縮小し、羽ばたきの translate は維持 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3E.w%7Btransform-origin:center;animation:flap 0.4s infinite alternate ease-in-out%7D.b1%7Banimation:fly1 25s infinite cubic-bezier(0.4,0,0.6,1) alternate%7D.b2%7Banimation:fly2 30s infinite cubic-bezier(0.4,0,0.6,1) alternate-reverse%7D@keyframes flap%7B0%25%7Btransform:scaleX(1)%7D100%25%7Btransform:scaleX(0.2)%7D%7D@keyframes fly1%7B0%25%7Btransform:translate(-10px,90px) rotate(-15deg) scale(1.0)%7D25%25%7Btransform:translate(40px,40px) rotate(10deg) scale(1.2)%7D50%25%7Btransform:translate(90px,10px) rotate(30deg) scale(1.0)%7D75%25%7Btransform:translate(30px,-10px) rotate(-10deg) scale(1.2)%7D100%25%7Btransform:translate(110px,60px) rotate(15deg) scale(1.0)%7D%7D@keyframes fly2%7B0%25%7Btransform:translate(110px,80px) rotate(20deg) scale(1.1)%7D33%25%7Btransform:translate(60px,20px) rotate(-10deg) scale(0.9)%7D66%25%7Btransform:translate(20px,60px) rotate(10deg) scale(1.1)%7D100%25%7Btransform:translate(-10px,-10px) rotate(-20deg) scale(0.9)%7D%7D%3C/style%3E%3Cdefs%3E%3Cpath id='bf' d='M0,15 Q10,0 20,15 Q30,0 40,15 Q30,30 20,25 Q10,30 0,15 Z'/%3E%3C/defs%3E%3Cg class='b1'%3E%3Cuse href='%23bf' class='w' fill='%23ff69b4' filter='drop-shadow(0 0 3px %238a2be2)'/%3E%3C/g%3E%3Cg class='b2'%3E%3Cuse href='%23bf' class='w' fill='%238a2be2' filter='drop-shadow(0 0 3px %23ff69b4)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}

.frame-anim-blackhole { box-shadow: inset 0 0 0 16px rgba(75,0,130,0.3), inset 0 0 50px #000, 0 0 20px #4b0082; background: #050505 !important; }
.frame-anim-blackhole::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%;
  background: conic-gradient(from 0deg, #000, #111, #4b0082, #000, #222, #000);
  transform: translate(-50%, -50%); animation: bg-rotate-spin 3s linear infinite;
  mix-blend-mode: screen; z-index: 1; pointer-events: none; opacity: 0.6; clip-path: inset(0 round 12px);
}
@keyframes bg-rotate-spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

.frame-anim-time-leap::after { background: repeating-radial-gradient(circle, #fff 0px, #000 10px); background-size: 200% 200%; animation: bg-rotate 5s linear infinite; padding: 16px; }
.frame-anim-kaleidoscope::after { background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); animation: bg-rotate 4s linear infinite; padding: 16px; inset: -16px; border-radius: 20px;}
.frame-anim-ultimate-aura::after { background: linear-gradient(45deg, #ff00cc, #333399, #00E676, #ff00cc); background-size: 400%; animation: bg-rotate 2s linear infinite; padding: 16px; inset: -16px; border-radius: 20px; box-shadow: 0 0 30px #ff00cc; }


/* =========================================
   ここから下を追加：第2弾アップデート用UI・アニメーション
========================================= */

/* 1:1フリップ会員証カードの3D構造 */
.scene { width: 100%; max-width: 360px; margin: 0 auto 20px auto; aspect-ratio: 1 / 1; perspective: 1000px; }
.card-inner { width: 100%; height: 100%; position: relative; transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; }
.card-inner.is-flipped { transform: rotateY(180deg); }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; box-sizing: border-box; box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 1;}

/* 表面レイアウト */
.card-front { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 25px 20px; cursor: pointer; }
.front-title { font-size: 0.95rem; font-weight: bold; margin-bottom: 2px; }
.front-name { margin-top: 0; margin-bottom: 5px; font-size: 1.5rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.front-id { font-size: 0.75rem; color: #ccc; margin-top: 5px; }
.front-bottom { width: 100%; display: flex; justify-content: space-between; padding: 0 10px; box-sizing: border-box;}
.bottom-block { display: flex; flex-direction: column; text-align: center; }
.block-label { font-size: 0.7rem; color: #ccc; margin-bottom: 2px; }
.block-val { font-size: 1.6rem; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }

/* 裏面レイアウト */
.card-back { background: #0d0d0d; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: space-between; padding: 20px; cursor: default; }
.back-top { border-bottom: 1px dashed #333; padding-bottom: 8px; display: block; margin-bottom: 10px;}
.stats-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5px; }
.bp-label { font-size: 0.9rem; color: var(--neon-green); }
.bp-val { font-size: 2.2rem; font-weight: bold; color: #fff; line-height: 1; }
.rp-container { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.attr-badge { font-size: 0.85rem; border: 1px solid #555; background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 4px; color: #fff; }
.rp-badge { background: #222; border: 1px solid #444; padding: 4px 10px; border-radius: 4px; font-size: 1.0rem; color: #ffcc00; font-weight: bold; }
.streak-bar { background: #ff3366; color: #fff; font-size: 0.85rem; font-weight: bold; padding: 2px 8px; border-radius: 3px; display: inline-block; margin-top:2px;}

.back-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #333; padding-top: 10px; }
.toggle-wrapper { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.toggle-label { font-size: 0.75rem; color: #aaa; font-weight: bold; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 24px; border: 1px solid #555; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: #aaa; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--neon-green); border-color: var(--neon-green); }
input:checked + .slider:before { transform: translateX(20px); background-color: #000; }
.btn-camera { background: #111; color: var(--neon-green); border: 1px solid var(--neon-green); padding: 10px 15px; border-radius: 6px; font-size: 0.9rem; font-weight: bold; cursor: pointer; font-family: inherit; }
.tap-hint { position: absolute; bottom: 5px; width: 100%; font-size: 0.65rem; color: #666; text-align: center; animation: blink 1.5s infinite; pointer-events: none;}
@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* アバター箱庭エリアと自律モーション */
.back-middle { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; cursor: pointer; }
.avatar-stage { position: relative; width: 140px; height: 120px; display: flex; justify-content: center; align-items: flex-end; }
.avatar-display { display: inline-block; font-size: 1.6rem; line-height: 1.1; white-space: pre; color: #fff; text-align: center; transform-origin: bottom center; }
.egg-display { font-size: 2.5rem; color: #fff; margin-bottom: 15px; }
.title-plate { position: absolute; top: -15px; background: rgba(0,0,0,0.8); border: 1px solid var(--neon-green); color: var(--neon-green); font-size: 1rem; padding: 2px 8px; border-radius: 4px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; z-index: 10; pointer-events: none; }
.title-plate.show { opacity: 1; transform: translateY(0); }
.zzz-effect { position: absolute; top: -10px; right: -20px; font-size: 1.2rem; color: #00bfff; font-weight: bold; font-family: sans-serif; display: none; z-index: 10; }
.sweat-effect { position: absolute; top: 10px; right: 10px; font-size: 1.5rem; display: none; z-index: 10; }

.anim-walk { animation: walk-across 12s infinite linear; }
@keyframes walk-across { 0% { transform: translateX(0px); } 25%, 30% { transform: translateX(90px); } 75%, 80% { transform: translateX(-90px); } 100% { transform: translateX(0px); } }
.anim-sit .avatar-display { animation: sit-breathe 3s infinite alternate ease-in-out; }
@keyframes sit-breathe { 0% { transform: scaleY(0.8) translateY(15px); } 100% { transform: scaleY(0.83) translateY(12px); } }
.anim-sleep .zzz-effect { display: block; animation: float-zzz 4s infinite ease-in; }
.anim-sleep .avatar-display { animation: sleep-breathe 4s infinite alternate ease-in-out; }
@keyframes sleep-breathe { 0% { transform: rotate(90deg) scaleX(0.7) translateY(-20px); } 100% { transform: rotate(90deg) scaleX(0.75) translateY(-20px) translateX(3px); } }
@keyframes float-zzz { 0% { opacity: 0; transform: translate(0, 0) scale(0.5); } 20% { opacity: 1; transform: translate(10px, -10px) scale(1); } 80% { opacity: 1; transform: translate(30px, -30px) scale(1.2); } 100% { opacity: 0; transform: translate(40px, -40px) scale(1.5); } }
.anim-fall .sweat-effect { display: block; animation: sweat-drop 4s infinite; }
.anim-fall .avatar-display { animation: fall-and-up 4s infinite; }
@keyframes fall-and-up { 0% { transform: rotate(0deg); } 15%, 60% { transform: rotate(90deg) translateY(-20px); } 75%, 100% { transform: rotate(0deg); } }
@keyframes sweat-drop { 0%, 14% { opacity: 0; transform: translateY(0); } 15%, 59% { opacity: 1; transform: translateY(5px); } 60%, 100% { opacity: 0; } }
.anim-jump .avatar-display { animation: jump-happy 0.8s infinite alternate cubic-bezier(0.1, 0.8, 0.3, 1); }
@keyframes jump-happy { 0% { transform: translateY(0) scaleY(0.95); } 100% { transform: translateY(-40px) scaleY(1.05); } }

/* ボス選択・インキュベーター・デッキUI */
.boss-list { display: flex; flex-direction: column; gap: 10px; }
.boss-card { background: #111; border: 1px solid #444; border-radius: 8px; padding: 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
.boss-card:hover { border-color: #ff3366; background: #2a0a14; }
.boss-name { font-weight: bold; font-size: 1.1rem; margin-bottom: 5px;}
.boss-desc { font-size: 0.8rem; color: #ccc; }
.cheat-desc { font-size: 0.8rem; color: #ffcc00; margin-top: 5px; font-weight: bold;}

.stat-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; border-bottom: 1px solid #333; padding-bottom: 5px;}
.stat-label { width: 110px; font-weight: bold; color: var(--neon-green); font-size: 0.9rem; }
.stat-controls { display: flex; align-items: center; gap: 5px; }
.stat-controls input { width: 50px; background: #000; color: #fff; border: 1px solid #555; text-align: center; font-family: inherit; font-size: 1rem; padding: 4px; }
.btn-plusmin { background: #333; color: #fff; border: none; width: 30px; height: 30px; border-radius: 4px; font-size: 1.2rem; cursor: pointer; }

.deck-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }
.skill-card { background: #111; border: 1px solid #555; border-radius: 8px; padding: 15px; cursor: pointer; transition: 0.2s; position: relative; overflow: hidden; }
.skill-card.selected { border-color: var(--neon-green); box-shadow: 0 0 15px rgba(0,230,118,0.3) inset; background: #1a2a1a; }
.skill-title { font-weight: bold; color: var(--neon-green); font-size: 1.1rem; margin-bottom: 5px; }
.skill-desc { font-size: 0.85rem; color: #aaa; }

/* バトルアリーナUI */
.battle-chars { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 400px; }
.b-char { background: #1e1e1e; border: 2px solid #333; border-radius: 8px; padding: 10px; position: relative; z-index: 10;}
.b-player { border-color: var(--neon-green); box-shadow: 0 0 10px rgba(0,230,118,0.1); }
.b-boss { border-color: #ff3366; box-shadow: 0 0 10px rgba(255,51,102,0.1); }
#battle-log { background: #000; border: 1px solid #444; height: 220px; overflow-y: auto; padding: 10px; font-size: 0.8rem; margin-top: 10px; border-radius: 6px; }
.log-line { margin-bottom: 6px; border-bottom: 1px dashed #222; padding-bottom: 4px; }
.log-turn { color: #888; text-align: center; font-size: 0.75rem; margin: 4px 0;} 
.log-action { color: #fff; }
.log-result { color: #ccc; padding-left: 12px; margin-top: 2px;}
.log-dmg { color: #ff3366; font-weight: bold; }
.log-crit { color: #ffcc00; font-weight: bold; } 
.log-skill { color: #00bfff; font-weight: bold; }

/* ダメージポップアップ */
.damage-popup { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 1.8rem; font-weight: bold; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; z-index: 100; opacity: 1; animation: floatUp 1.2s ease-out forwards; }
.dmg-normal { color: #fff; } .dmg-crit { color: #ffcc00; font-size: 2.2rem; } .dmg-miss { color: #aaa; font-size: 1.4rem; } .dmg-poison { color: #8a2be2; font-size: 1.6rem; } .dmg-heal { color: var(--neon-green); font-size: 1.6rem; } .dmg-instakill { color: #ff0000; font-size: 2.2rem; }
@keyframes floatUp { 0% { transform: translate(-50%, 0) scale(0.6); opacity: 1; } 20% { transform: translate(-50%, -25px) scale(1.2); opacity: 1; } 70% { transform: translate(-50%, -45px) scale(1); opacity: 1; } 100% { transform: translate(-50%, -65px) scale(0.9); opacity: 0; } }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
.shake { animation: shake 0.3s; }


/* =========================================
   レイアウト崩れ・文字溢れ防止のレスポンシブ補修
========================================= */
.front-bottom {
  flex-wrap: nowrap;
  gap: 10px;
}
.rank-block, .point-block {
  min-width: 0; /* フレックスボックスの縮小を許可 */
  flex: 1; /* 左右均等にスペースを割り当て */
}
#user-rank {
  /* 画面幅に応じて 1.0rem 〜 1.4rem の間で自動縮小・拡大 */
  font-size: clamp(1.0rem, 5vw, 1.4rem);
  letter-spacing: 1px; /* 2pxだと広すぎるため1pxに調整 */
  white-space: nowrap;
}
#user-point {
  /* ポイント数も同様に自動縮小 */
  font-size: clamp(1.2rem, 6vw, 1.6rem);
  white-space: nowrap;
}


/* =========================================
   【最終補修】カードレイアウトの縦詰まり・はみ出しを完全に解決
========================================= */

/* 1. 称号追加による「縦のスペース不足」を解消し、下部のはみ出しを防ぐ */
.card-name { margin-bottom: 5px !important; }
.card-id { margin-bottom: 5px !important; }
.qr-container { padding: 6px !important; margin: auto 0 !important; }
.qr-container img { width: 120px !important; height: 120px !important; }

/* 2. カード下部のテキスト重なりと、左右の枠への接触を美しく防ぐ */
.card-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 15px !important; /* 左右に15pxの美しい余白を確保 */
  gap: 10px; 
  box-sizing: border-box; /* これがないとwidth:100%で枠をはみ出す */
}

.rank-block { 
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; flex: 1; min-width: 0; 
}
.point-block { 
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: 1; min-width: 0; 
}
.label { font-size: 0.75rem; color: #ccc; margin-bottom: 2px; }

/* 3. 文字サイズをスマホの画面幅に合わせて自動縮小（はみ出し絶対防止） */
#user-rank {
  font-size: clamp(1.0rem, 5.5vw, 1.3rem) !important;
  letter-spacing: 1px !important;
  white-space: nowrap;
}
#user-point {
  font-size: clamp(1.2rem, 6.5vw, 1.6rem) !important;
  white-space: nowrap;
}

/* 4. フレイム(炎)フレームの極太侵食バグを修正 */
.frame-anim-flame::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='fire'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.05' numOctaves='3'%3E%3Canimate attributeName='baseFrequency' values='0.02 0.05; 0.02 0.06; 0.02 0.05' dur='18s' repeatCount='indefinite'/%3E%3C/feTurbulence%3E%3CfeDisplacementMap in='SourceGraphic' scale='10'/%3E%3C/filter%3E%3Crect x='0' y='0' width='100' height='100' fill='none' stroke='%23ff4500' stroke-width='6' filter='url(%23fire)' opacity='0.3'/%3E%3Crect x='0' y='0' width='100' height='100' fill='none' stroke='%23ff0000' stroke-width='2' filter='url(%23fire)' opacity='0.4'/%3E%3C/svg%3E") !important;
  box-shadow: inset 0 0 15px rgba(255,140,0,0.3) !important;
}