@charset "UTF-8";

/* 変数定義 */
:root { --bg-color: #1a1a1a; --panel-bg: #2d2d2d; --text-color: #e0e0e0; --accent: #4caf50; --gold: #ffc107; }
body { 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
    background: var(--bg-color); 
    color: var(--text-color); 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-height: 100vh;
    touch-action: manipulation; /* ← ★これを追加！（ダブルタップ拡大防止 & 反応速度UP） */
}

/* ボタンにも念のため追加 */
.btn { 
    background: var(--accent); 
    color: white; 
    border: none; 
    padding: 12px; 
    width: 100%; 
    cursor: pointer; 
    margin-bottom: 5px; 
    border-radius: 4px; 
    transition: 0.2s; 
    font-weight: bold; 
    font-size: 1rem;
    touch-action: manipulation; /* ← ★これを追加！ */
}
.btn:hover { opacity: 0.8; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-blue { background: #2196f3; }
.btn-red { background: #e53935; }
.btn-logout { background: #757575; font-size: 0.8rem; padding: 5px 10px; width: auto; margin-left: 10px;}
.btn-area { background: #607d8b; width: auto; padding: 8px 15px; font-size: 0.9rem; margin: 0; }

/* モーダル */
.screen { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; justify-content: center; align-items: center; background: rgba(0,0,0,0.9); z-index: 1000; }
.box { background: #333; padding: 30px; border-radius: 10px; width: 320px; text-align: center; border: 1px solid #555; }
input { width: 90%; padding: 10px; margin-bottom: 10px; border: 1px solid #555; background: #222; color: white; border-radius: 4px; }
.error-msg { color: #ff5252; font-size: 0.8rem; margin-top: 10px; font-weight: bold; }

/* レイアウト */
.app-header { width: 100%; background: #333; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; margin-bottom: 20px; box-sizing: border-box; }
.container { width: 90%; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 20px; }
@media (max-width: 700px) { .container { grid-template-columns: 1fr; } }
.panel { background: var(--panel-bg); padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }

/* ステータス */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.9rem; }
.stats-grid > div {
    background: rgba(0, 0, 0, 0.3); padding: 8px 10px; border-radius: 4px; border: 1px solid #333;
    display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* リスト */
.item-list { list-style: none; padding: 0; max-height: 200px; overflow-y: auto; }
.item-list li { display: flex; justify-content: space-between; padding: 8px 5px; border-bottom: 1px solid #444; align-items: center; }
#log-area { height: 120px; overflow-y: auto; background: #000; padding: 10px; border: 1px solid #444; font-family: monospace; font-size: 0.85rem; display: flex; flex-direction: column-reverse; margin-bottom: 10px; }
.gold { color: var(--gold); font-weight: bold; }

/* エリア情報 */
.area-info-box { margin-bottom: 10px; background: #222; padding: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #555; }

/* バトルシーン */
#battle-scene { width: 100%; height: 250px; background: radial-gradient(circle, #333 0%, #000 90%); border: 2px solid #555; border-radius: 8px; margin-bottom: 10px; position: relative; overflow: hidden; }
#enemy-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; }
.enemy-hud { position: absolute; top: 0; left: 0; width: 100%; padding: 10px 0; background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0)); z-index: 10; box-sizing: border-box; }
#enemy-name { font-weight: bold; color: #fff; display: block; margin-bottom: 5px; text-shadow: 1px 1px 2px #000; font-size: 1rem; padding-left: 0; text-align: center; }
.hp-bar-bg { width: 100%; height: 10px; background: #333; border-bottom: 1px solid #111; border-top: 1px solid #555; }
.hp-bar-fill { height: 100%; background: linear-gradient(90deg, #ff5252, #ff1744); transition: width 0.2s ease-out; box-shadow: 0 0 10px #ff1744; }
#monster-image { position: relative; display: block; margin-left: auto; margin-right: auto; margin-top: 60px; height: 150px; width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 0 20px rgba(0,0,0,0.8)); z-index: 1; }
#no-monster-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #777; width: 100%; text-align: center; }
.shake { animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-6px, 0, 0); } 40%, 60% { transform: translate3d(6px, 0, 0); } }

/* その他パーツ */
.world-log-entry { 
    font-size: 0.8rem; 
    color: #aaa; 
    padding: 4px 0; 
    border-bottom: 1px solid #333;

    /* ↓↓↓ ★ここを追加！(リストの強制両端揃えを解除して左詰めにします) ↓↓↓ */
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    flex-wrap: wrap; /* 長いログは折り返す */
}
.world-log-user { color: #2196f3; font-weight: bold; margin-right: 5px; }
.world-log-action { color: #e0e0e0; }
.rarity-N { color: #a0a0a0; } .rarity-R { color: #2196f3; font-weight: bold; } .rarity-SR { color: #ff9800; font-weight: bold; text-shadow: 0 0 5px rgba(255,152,0,0.5); } 
.rarity-SSR { font-weight: bold; background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); background-size: 400% 400%; -webkit-background-clip: text; color: transparent; animation: rainbow 3s ease infinite; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
@keyframes rainbow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
#item-modal .box { border: 2px solid #4caf50; box-shadow: 0 0 20px rgba(76, 175, 80, 0.3); }
#modal-actions { display: flex; gap: 10px; justify-content: center; }
.inv-item { cursor: pointer; transition: background 0.2s; padding: 8px; border-radius: 4px; }
.inv-item:hover { background: #333; }
.inv-count { background: #555; padding: 2px 6px; border-radius: 10px; font-size: 0.75rem; margin-left: 5px; }

/* 魔法・スキル */
.btn-magic { background: linear-gradient(45deg, #7b1fa2, #b388ff); box-shadow: 0 0 10px rgba(123, 31, 162, 0.5); }
.text-mp { color: #b388ff; font-weight: bold; }
.skill-item { padding: 10px; border-bottom: 1px solid #444; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.skill-item:hover { background: #444; }
.skill-cost { font-size: 0.8rem; color: #b388ff; }

/* チャット */
.chat-msg { padding: 8px; border-bottom: 1px solid #444; font-size: 0.9rem; word-break: break-all; }
.chat-user { color: #2196f3; font-weight: bold; margin-right: 5px; font-size: 0.8rem; }
.chat-time { font-size: 0.7rem; color: #777; float: right; }

/* アバター・称号選択 */
.avatar-opt { width: 35px; height: 35px; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 50%; border: 2px solid transparent; transition: 0.2s; }
.avatar-opt:hover { background: #444; }
.avatar-opt.selected { border-color: #2196f3; background: #333; }

/* ★追加: 称号選択ボタン */
.title-opt {
    padding: 5px 10px; font-size: 0.8rem; cursor: pointer; border: 1px solid #555; border-radius: 4px; background: #222;
    transition: 0.2s;
}
.title-opt:hover { background: #444; }
.title-opt.selected { background: #4caf50; color: white; border-color: #4caf50; }

/* 称号バッジ */
.title-badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: #333; color: #ffc107; border: 1px solid #555; margin-right: 5px; vertical-align: middle; }

/* style.css の一番下に追加 */

/* style.css の一番下に追加 */

/* 称号リストの行のデザイン */
.title-select-row {
    transition: background 0.2s;
    border: 1px solid transparent; /* 枠線の場所を確保 */
}

/* ★クリックして選んだ行を「緑色」にする */
.title-select-row.selected {
    background: #2e7d32 !important; /* 濃い緑 */
    border: 1px solid #81c784 !important; /* 明るい緑の枠 */
}

/* ロックされている行（薄くする） */
.title-locked {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* style.css の一番下に追加 */

/* プレイヤーのHPバー（バトルの下部に表示） */
.player-hud { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 5px 0; 
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); /* 下から黒くフェード */
    z-index: 10; 
    box-sizing: border-box;
}

.player-hp-bar-bg { 
    width: 100%; 
    height: 10px; 
    background: #333; 
    border-top: 1px solid #555; 
}

.player-hp-bar-fill { 
    height: 100%; 
    background: linear-gradient(90deg, #4caf50, #81c784); /* 緑のグラデーション */
    transition: width 0.2s ease-out; 
    box-shadow: 0 0 10px #4caf50; 
}

/* HPの数値もバーの上に重ねて見やすくする */
#player-hp-text-bar {
    position: absolute;
    bottom: 12px;
    right: 5px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

/* --- 図鑑（コレクション）のスタイル --- */
.lib-header {
    background: #222; padding: 10px; border-radius: 5px; margin-bottom: 10px;
    border: 1px solid #444; text-align: center;
}
.lib-progress-bar-bg {
    width: 100%; height: 8px; background: #111; border-radius: 4px; margin-top: 5px; overflow: hidden;
}
.lib-progress-bar-fill {
    height: 100%; background: linear-gradient(90deg, #2196f3, #00bcd4); width: 0%; transition: width 0.5s;
}

/* 図鑑のグリッド表示（高速化・見やすさ改善） */
.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* 横幅に合わせて自動折り返し */
    gap: 8px;
    padding: 0;
    list-style: none;
    max-height: 400px;
    overflow-y: auto;
}

/* カードのデザイン */
.lib-card {
    background: #2d2d2d;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    height: 80px; /* 固定高さ */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.1s;
}
.lib-card:hover { background: #383838; transform: scale(1.05); }

/* --- style.css の末尾 --- */

/* レア度別の枠色（修正版：クラス名を card-N などに変更） */
.lib-card.card-N { border-bottom: 2px solid #777; }
.lib-card.card-R { border-bottom: 2px solid #2196f3; }
.lib-card.card-SR { border-bottom: 2px solid #ff9800; background: radial-gradient(circle, #3a3000, #2d2d2d); }
.lib-card.card-SSR { border-bottom: 2px solid #e91e63; background: radial-gradient(circle, #3a0015, #2d2d2d); }
.lib-card.card-UR { border-bottom: 2px solid #9c27b0; background: radial-gradient(circle, #2a003a, #2d2d2d); }
.lib-card.card-LE { border: 1px solid #ffd700; box-shadow: 0 0 5px #ffd700; background: #000; }

/* 未発見 */
.lib-card.unknown { opacity: 0.5; background: #1a1a1a; border-color: #333; }

.lib-icon { font-size: 2rem; margin-bottom: 2px; }
.lib-name { 
    font-size: 0.65rem; 
    width: 100%; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;
    color: #e0e0e0; /* 文字色を明示的に指定して透明化を防ぐ */
}
/* ============================================
   レアリティ別エフェクト (修正版：はみ出し防止)
   ============================================ */

/* --- アニメーション定義 --- */
@keyframes shine {
    0% { left: -100%; }
    100% { left: 200%; } /* 光が通り過ぎる動き */
}
@keyframes rainbow-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes pulse-gold {
    0% { box-shadow: 0 0 5px #ffd700; border-color: #ffd700; }
    50% { box-shadow: 0 0 20px #ffd700, 0 0 10px #ffeb3b inset; border-color: #fff; }
    100% { box-shadow: 0 0 5px #ffd700; border-color: #ffd700; }
}
@keyframes pulse-ur {
    0% { box-shadow: 0 0 5px #9c27b0; }
    50% { box-shadow: 0 0 25px #e040fb, 0 0 15px #d500f9 inset; }
    100% { box-shadow: 0 0 5px #9c27b0; }
}

/* --- 共通: カードの基本設定（ここが重要！） --- */
.lib-card {
    position: relative; /* エフェクトの基準点 */
    overflow: hidden;   /* ★これで光のはみ出しをカット！ */
    /* 既存のデザイン維持 */
    background: #2d2d2d;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.1s;
    z-index: 0; /* 重なり順の基準 */
}

/* --- 詳細画面の画像枠（ここも重要！） --- */
.detail-halo {
    position: relative; /* エフェクトの基準点 */
    overflow: hidden;   /* ★ここでもはみ出しカット！ */
    z-index: 0;
}

/* --- キラキラ光る「ホログラム」加工 (SR以上) --- */
.lib-card.card-SR::after, .lib-card.card-SSR::after, .lib-card.card-UR::after, .lib-card.card-LE::after,
.detail-halo::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shine 3s infinite;
    pointer-events: none; /* クリックの邪魔をしない */
    z-index: 1; /* カードの内容より手前に光らせる */
}

/* --- レア度別のデザイン --- */

/* レア (R) */
.lib-card.card-R {
    border: 1px solid #2196f3;
    background: linear-gradient(135deg, #1a1a1a, #0d2b3a);
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.3);
}

/* スーパーレア (SR) */
.lib-card.card-SR {
    border: 1px solid #ff9800;
    background: radial-gradient(circle at center, #3a2c00, #1a1a1a);
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
}

/* SSR: 虹色枠 */
.lib-card.card-SSR {
    border: 2px solid transparent;
    background-image: linear-gradient(#1a1a1a, #1a1a1a), 
                      linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    animation: rainbow-bg 5s ease infinite;
}

/* UR: 紫の脈動 */
.lib-card.card-UR {
    border: 1px solid #d500f9;
    background: radial-gradient(circle at bottom, #2a003a, #000);
    animation: pulse-ur 2s infinite;
}

/* LE: 黄金の輝き */
.lib-card.card-LE {
    border: 2px solid #ffd700;
    background: linear-gradient(135deg, #000, #332200, #000);
    animation: pulse-gold 1.5s infinite;
}

/* --- 詳細画面用クラス --- */
.detail-halo-SR { box-shadow: 0 0 15px #ff9800; border: 2px solid #ff9800; }
.detail-halo-SSR { box-shadow: 0 0 20px #ff0055; border: 2px solid #ff0055; background: linear-gradient(45deg, #33001b, #000); }
.detail-halo-UR { animation: pulse-ur 2s infinite; border: 2px solid #d500f9; }
.detail-halo-LE { animation: pulse-gold 1.5s infinite; border: 2px solid #ffd700; }

/* --- style.css の一番下に追加 --- */

/* ダメージポップアップ演出 */
.damage-popup {
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    pointer-events: none; /* クリックを邪魔しない */
    animation: popUp 0.8s ease-out forwards;
    text-shadow: 2px 2px 0 #000;
    z-index: 1000;
    width: 100px;
    text-align: center;
}

/* ポップアップのアニメーション（上にふわっと上がる） */
@keyframes popUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    30% { transform: translateY(-30px) scale(1.4); opacity: 1; }
    100% { transform: translateY(-50px) scale(1); opacity: 0; }
}

/* クリティカル（黄色で大きく） */
.damage-critical { 
    color: #ffeb3b; 
    font-size: 2rem; 
    text-shadow: 0 0 10px red; 
}

/* 回復（緑色） */
.damage-heal { 
    color: #69f0ae; 
    text-shadow: 0 0 5px green; 
}

/* =========================================
   神ログイン画面用スタイル (Ver.3 色調整版)
   ========================================= */

/* 背景全体 (少し明るさを戻しました) */
.god-login-bg {
    background: radial-gradient(circle at center, #2b2b2b 0%, #000000 100%);
    overflow: hidden;
    perspective: 1000px;
}

/* パーティクル */
.particles span {
    position: absolute; bottom: -50px; background: transparent;
    box-shadow: 0 0 10px #4caf50, 0 0 20px #81c784; border-radius: 50%;
    animation: rise 15s infinite linear; opacity: 0;
}
.particles span:nth-child(1) { left: 10%; width: 5px; height: 5px; animation-duration: 7s; }
.particles span:nth-child(2) { left: 20%; width: 8px; height: 8px; animation-duration: 12s; animation-delay: 2s; }
.particles span:nth-child(3) { left: 35%; width: 4px; height: 4px; animation-duration: 10s; animation-delay: 4s; }
.particles span:nth-child(4) { left: 50%; width: 6px; height: 6px; animation-duration: 15s; }
.particles span:nth-child(5) { left: 65%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 1s; }
.particles span:nth-child(6) { left: 80%; width: 7px; height: 7px; animation-duration: 11s; animation-delay: 3s; }
@keyframes rise {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-120vh) scale(0); opacity: 0; }
}

/* メインコンテナ */
.god-login-container {
    display: flex; width: 950px; max-width: 95%; height: 600px; /* 高さを確保 */
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px);
    border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1); overflow: hidden;
    animation: fadeInContainer 1s ease-out;
}
@keyframes fadeInContainer { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .god-login-container { flex-direction: column; height: auto; }
    .god-intro-panel { padding: 30px 20px !important; text-align: center; }
    .god-features, .start-guide { display: none; } 
    .god-form-panel { padding: 30px 20px !important; }
}

/* --- 左側：紹介パネル (★色を戻しました) --- */
.god-intro-panel {
    flex: 1;
    /* 前回の好評だった緑～青のグラデーション */
    background: linear-gradient(135deg, rgba(76,175,80,0.9), rgba(33,150,243,0.9));
    padding: 40px; display: flex; flex-direction: column; justify-content: center;
    color: white; position: relative;
    border-right: 1px solid rgba(255,255,255,0.2);
}
.god-intro-panel::before {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: url('https://www.transparenttextures.com/patterns/cubes.png'); opacity: 0.15;
}

/* タイトル (グリッチ) */
.glitch {
    position: relative; font-size: 3rem; font-weight: 800; line-height: 1;
    color: #fff; letter-spacing: 2px; margin-bottom: 10px;
}
.glitch::before, .glitch::after {
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.glitch::before {
    left: 2px; text-shadow: -1px 0 #ff00c1; clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse; background: transparent;
}
.glitch::after {
    left: -2px; text-shadow: -1px 0 #00fff9; clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse; background: transparent;
}
@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 30px, 0); } 20% { clip: rect(80px, 9999px, 100px, 0); }
    40% { clip: rect(40px, 9999px, 60px, 0); } 60% { clip: rect(20px, 9999px, 50px, 0); }
    80% { clip: rect(90px, 9999px, 100px, 0); } 100% { clip: rect(10px, 9999px, 30px, 0); }
}
@keyframes glitch-anim2 {
    0% { clip: rect(90px, 9999px, 100px, 0); } 20% { clip: rect(20px, 9999px, 50px, 0); }
    40% { clip: rect(60px, 9999px, 80px, 0); } 60% { clip: rect(10px, 9999px, 30px, 0); }
    80% { clip: rect(50px, 9999px, 70px, 0); } 100% { clip: rect(80px, 9999px, 90px, 0); }
}

/* サブタイトル */
.typing-effect {
    font-size: 1rem; opacity: 1; margin-bottom: 25px; border-right: 2px solid #fff;
    white-space: nowrap; overflow: hidden; width: 16ch;
    animation: typing 2s steps(16), blink .5s step-end infinite alternate;
}
@keyframes typing { from { width: 0; } }
@keyframes blink { 50% { border-color: transparent; } }

/* 特徴リスト */
.god-features { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.feature-item {
    display: flex; align-items: center; margin-bottom: 15px;
    background: rgba(0,0,0,0.15); padding: 12px; border-radius: 10px;
    border-left: 4px solid #fff; transition: 0.3s;
}
.feature-item:hover { background: rgba(0,0,0,0.3); transform: translateX(5px); }
.feature-item .icon { font-size: 1.8rem; margin-right: 15px; }
.feature-item .text strong { display: block; font-size: 1rem; }
.feature-item .text small { font-size: 0.8rem; opacity: 0.9; }

/* スタートガイド */
.start-guide {
    margin-top: 10px; background: rgba(0,0,0,0.2); padding: 15px;
    border-radius: 8px; border: 1px dashed rgba(255,255,255,0.5);
}
.step-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; }
.step { text-align: center; }
.step-num { 
    width: 22px; height: 22px; background: #fff; color: #4caf50; 
    border-radius: 50%; font-weight: bold; margin: 0 auto 5px auto; 
    display: flex; justify-content: center; align-items: center;
}
.step-arrow { color: rgba(255,255,255,0.7); font-weight: bold; }

/* --- 右側：フォームパネル --- */
.god-form-panel {
    flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center;
    background: rgba(0,0,0,0.4);
}
.input-group { position: relative; margin-bottom: 35px; }
.input-group input {
    width: 100%; padding: 10px 0; font-size: 16px; color: #fff !important;
    border: none; border-bottom: 1px solid #777; outline: none; background: transparent !important;
    transition: 0.3s; z-index: 2;
}
/* オートフィル対策 */
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover, 
.input-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px #222 inset !important;
    transition: background-color 5000s ease-in-out 0s;
}
.input-group label {
    position: absolute; top: 10px; left: 0; color: #ccc; pointer-events: none; transition: 0.3s; z-index: 1;
}
.input-group input:focus ~ label, .input-group input:valid ~ label {
    top: -20px; font-size: 12px; color: #4caf50;
}
.input-group .bar { position: relative; display: block; width: 100%; }
.input-group .bar:before, .input-group .bar:after {
    content: ''; height: 2px; width: 0; bottom: 0; position: absolute;
    background: #4caf50; transition: 0.3s ease;
}
.input-group .bar:before { left: 50%; }
.input-group .bar:after { right: 50%; }
.input-group input:focus ~ .bar:before, .input-group input:focus ~ .bar:after { width: 50%; }

/* ボタン */
.god-btn {
    position: relative; width: 100%; padding: 15px; border: none; border-radius: 30px;
    cursor: pointer; font-weight: bold; font-size: 1rem; overflow: hidden; transition: 0.3s;
    text-transform: uppercase; letter-spacing: 1px;
}
.login-btn { background: transparent; color: #4caf50; border: 2px solid #4caf50; z-index: 1; }
.login-btn .liquid {
    position: absolute; top: -80px; left: 0; width: 100%; height: 200px;
    background: #4caf50; box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
    transition: 0.5s; z-index: -1;
}
.login-btn:hover { color: #fff; box-shadow: 0 0 20px #4caf50; }
.login-btn:hover .liquid { top: 0; }
.register-btn { background: linear-gradient(90deg, #ff9800, #ff5722); color: white; box-shadow: 0 5px 15px rgba(255,87,34,0.4); }
.register-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255,87,34,0.6); }
.register-btn:active { transform: translateY(0); }

/* =========================================
   ★緊急修正パッチ：文字消え対策
   ========================================= */

/* 1. サブタイトル（タイプライター廃止→フェードインに変更） */
/* 日本語は幅の計算がズレやすいため、安全でカッコいい「浮き上がり」に変更します */
.typing-effect {
    width: auto !important;           /* 幅制限を解除 */
    border-right: none !important;    /* カーソル線を消す */
    white-space: normal !important;   /* 改行を許可 */
    overflow: visible !important;     /* 文字隠しを解除 */
    opacity: 0;                       /* 最初は透明 */
    transform: translateY(20px);      /* 少し下から */
    animation: textFloatUp 1.5s ease-out forwards !important; /* ふわっと浮き出る */
}

@keyframes textFloatUp {
    to { opacity: 0.9; transform: translateY(0); }
}

/* 2. ログインボタンの文字（最前面に持ってくる） */
.login-btn {
    z-index: 1; /* ボタン自体の階層 */
}

.login-btn span {
    position: relative;
    z-index: 10;       /* ★文字を絶対に最前面にする */
    color: #4caf50;    /* 通常時の文字色（緑） */
    transition: 0.3s;  /* ホバー時の色変化を滑らかに */
}

/* ホバーした時は文字を白くする */
.login-btn:hover span {
    color: #ffffff !important;
}

/* 液体エフェクトが文字の邪魔をしないように調整 */
.login-btn .liquid {
    z-index: 0 !important; /* 文字(10)より後ろにする */
}

/* 念のため新規登録ボタンの文字も白く固定 */
.register-btn span {
    color: #ffffff;
    position: relative;
    z-index: 10;
}

/* =========================================
   ★ログインボタン文字 最終強制表示パッチ
   ========================================= */

/* ボタン本体と、その中の文字(span)の両方を強制的に白くする */
.login-btn, 
.login-btn span {
    color: #ffffff !important;       /* 文字色を「白」に固定 */
    text-shadow: 0 0 4px #000;       /* 黒い縁取りをつけて背景が何色でも読めるようにする */
    font-weight: 800 !important;     /* 文字を太くする */
    position: relative;              /* 重なり順を制御するために必須 */
    z-index: 100 !important;         /* 他のすべての装飾より手前に表示 */
    opacity: 1 !important;           /* 透明化を絶対に防ぐ */
    visibility: visible !important;  /* 表示を強制 */
}

/* 液体エフェクト（緑色の波）を文字の確実に後ろに配置 */
.login-btn .liquid {
    z-index: 1 !important;           /* 文字(100)より小さい値にする */
}

/* ホバーした時も白のまま（変な色反転を防ぐ） */
.login-btn:hover, 
.login-btn:hover span {
    color: #ffffff !important;
}

/* ついでに新規登録ボタンの文字も見やすく強化 */
.register-btn {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    z-index: 100 !important;
}

/* =========================================
   ★ログインボタンに「浮き上がる動き」を追加
   ========================================= */

/* ログインボタンをホバーした時の動き */
.login-btn:hover {
    transform: translateY(-3px); /* 上に3px浮き上がる */
    box-shadow: 0 5px 20px rgba(76, 175, 80, 0.6); /* 影も少し強くして浮遊感を出す */
}

/* クリックした時は元の位置に戻す（押した感触） */
.login-btn:active {
    transform: translateY(0);
}

/* =========================================
   ★ステータス画面デザイン強化 & 演出パッチ
   ========================================= */

/* ① モンスターをふわふわ動かすアニメーション */
@keyframes floatEnemy {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); } /* 10px浮く */
    100% { transform: translateY(0); }
}

#monster-image {
    /* 既存のスタイルにアニメーションを追加 */
    animation: floatEnemy 3s ease-in-out infinite;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.6)); /* 影もつけて浮遊感を出す */
}


/* ② ステータス画面のグリッドレイアウト */
.stats-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 8px; 
    font-size: 0.9rem; 
}

/* 個別のステータスカード（立体的でカッコよく） */
.stat-card {
    background: linear-gradient(145deg, #2a2a2a, #1f1f1f);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column; /* 上下に並べる */
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
    min-height: 45px;
}

/* ラベルと値を横並びにするタイプ */
.stat-card.row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* テキスト装飾 */
.stat-label { 
    font-size: 0.7rem; 
    color: #888; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 2px;
}
.stat-val { 
    font-size: 1.1rem; 
    font-weight: bold; 
    color: #fff; 
    font-family: 'Roboto Mono', monospace; 
    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
}

/* ゲージバーの共通スタイル */
.bar-container {
    width: 100%;
    height: 6px;
    background: #111;
    border-radius: 3px;
    margin-top: 5px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
.bar-fill { 
    height: 100%; 
    border-radius: 3px; 
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* 各色の設定（ネオン風の発光追加） */
.hp-fill { background: linear-gradient(90deg, #d32f2f, #ff5252); box-shadow: 0 0 8px rgba(255, 82, 82, 0.6); }
.mp-fill { background: linear-gradient(90deg, #7b1fa2, #e040fb); box-shadow: 0 0 8px rgba(224, 64, 251, 0.6); }
.stamina-fill { background: linear-gradient(90deg, #f57f17, #ffca28); box-shadow: 0 0 6px rgba(255, 202, 40, 0.5); }

/* 数値を強調する色 */
.val-green { color: #00e676; }
.val-gold  { color: #ffca28; text-shadow: 0 0 5px rgba(255, 202, 40, 0.3); }
.val-purple{ color: #d500f9; }
.val-red   { color: #ff5252; }
.val-blue  { color: #2979ff; }

/* =========================================
   ★スマホ表示修正パッチ (全コンテンツ表示・スクロール版)
   ========================================= */

@media (max-width: 768px) {
    /* ① 画面全体を「スクロール可能」にする */
    #login-screen {
        /* ★修正： !important を削除しました */
        display: block;                
        
        overflow-y: auto !important;   /* 縦スクロールは強制でOK */
        padding: 20px 10px;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 9999;
    }

    /* 以下は変更なしでOKですが、念のため記載します */
    .god-login-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        height: auto !important;
        margin: 0 auto 50px auto;
        transform: none !important; 
    }

    .god-intro-panel {
        min-height: auto !important;
        padding: 30px 20px !important;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .god-features, .start-guide {
        display: flex !important;
        margin-top: 15px;
    }
    .start-guide {
        display: block !important;
    }

    .god-form-panel {
        padding: 30px 20px !important;
    }
    
    .input-group {
        margin-bottom: 30px;
    }
}

/* =========================================
   ★ランキング & いいね機能デザイン
   ========================================= */

/* ランキングの行 */
.rank-row {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #444;
}
.rank-num {
    width: 30px;
    font-weight: bold;
    font-size: 1.1rem;
    color: #aaa;
    text-align: center;
    margin-right: 10px;
}
/* 1位〜3位の装飾 */
.rank-1 { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); font-size: 1.3rem; }
.rank-2 { color: #c0c0c0; text-shadow: 0 0 8px rgba(192, 192, 192, 0.5); font-size: 1.2rem; }
.rank-3 { color: #cd7f32; text-shadow: 0 0 8px rgba(205, 127, 50, 0.5); font-size: 1.2rem; }

/* いいねボタン */
.like-btn {
    background: transparent;
    border: 1px solid #e91e63;
    color: #e91e63;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.2s;
}
.like-btn:hover {
    background: #e91e63;
    color: white;
}
.like-count {
    font-size: 0.8rem;
    color: #e91e63;
    margin-left: 5px;
}

/* =========================================
   ★ミニゲーム（釣り）用スタイル Ver.2
   ========================================= */

/* 浮きがゆらゆらするアニメーション */
@keyframes bobbing {
    0% { transform: translate(-50%, -50%) translateY(0px) rotate(0deg); }
    50% { transform: translate(-50%, -50%) translateY(-10px) rotate(5deg); }
    100% { transform: translate(-50%, -50%) translateY(0px) rotate(0deg); }
}

/* 魚がかかった時の激しい動き */
@keyframes bite {
    0% { transform: translate(-50%, -50%) translateY(0px); }
    25% { transform: translate(-50%, -50%) translateY(15px); }
    50% { transform: translate(-50%, -50%) translateY(-5px); }
    75% { transform: translate(-50%, -50%) translateY(15px); }
    100% { transform: translate(-50%, -50%) translateY(0px); }
}

.float-bobbing {
    animation: bobbing 2s infinite ease-in-out;
}

.float-bite {
    animation: bite 0.5s infinite linear;
    filter: drop-shadow(0 0 15px yellow);
}

/* =========================================
   ★カジノ（魔剣スロット 完全版）用スタイル
   ========================================= */

/* --- 1. リール（ここを修正！） --- */
.slot-reel {
    width: 85px;          /* 幅を大きく */
    height: 110px;        /* 高さを大きく */
    
    /* 金属っぽい立体的なグラデーション */
    background: linear-gradient(to bottom, #dcdcdc 0%, #ffffff 40%, #ffffff 60%, #dcdcdc 100%);
    
    color: #222;          /* 文字は見やすく濃いグレー */
    font-size: 3.5rem;    /* 絵文字を巨大化 */
    font-weight: bold;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    border-radius: 6px;
    border: 2px solid #000;
    
    /* 奥行きを出す影 */
    box-shadow: 
        inset 0 10px 20px rgba(0,0,0,0.3), 
        inset 0 -10px 20px rgba(0,0,0,0.3),
        0 5px 10px rgba(0,0,0,0.5);
        
    text-shadow: 1px 1px 0px rgba(255,255,255,0.8);
    position: relative;
    z-index: 10;
}

/* 回転中のブラー（残像）演出 */
.reel-spinning {
    color: transparent !important; /* 文字を消す */
    text-shadow: none !important;
    /* 高速回転しているような縞模様 */
    background: repeating-linear-gradient(
        0deg,
        #e0e0e0,
        #e0e0e0 15px,
        #bbb 15px,
        #bbb 30px
    );
    animation: reelBlur 0.1s infinite linear;
    border-color: #555;
}
@keyframes reelBlur {
    0% { background-position: 0 0; }
    100% { background-position: 0 30px; }
}

/* --- 2. 演出文字（光らせる） --- */
.text-red { color: #ff5252; text-shadow: 0 0 15px #ff0000; font-weight:900; font-size: 1.2rem; }
.text-gold { color: #ffd700; text-shadow: 0 0 15px #ffd700; font-weight:900; font-size: 1.2rem; }
.text-rainbow { 
    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 900;
    font-size: 1.4rem;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.8));
    animation: rainbowText 0.5s infinite linear;
}
@keyframes rainbowText { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

/* --- 3. 背景演出 --- */
.bg-flash-red { animation: flashBgRed 0.2s infinite alternate; }
@keyframes flashBgRed { 0% { background: #300; } 100% { background: #800; } }

/* 覚醒モード（枠が虹色に輝く） */
.bg-awakening {
    animation: rainbowBorder 2s infinite linear;
    box-shadow: 0 0 50px rgba(255,255,255,0.5) !important;
}
@keyframes rainbowBorder {
    0% { border-color: #ff0000; box-shadow: 0 0 20px #ff0000; }
    20% { border-color: #ffff00; box-shadow: 0 0 20px #ffff00; }
    40% { border-color: #00ff00; box-shadow: 0 0 20px #00ff00; }
    60% { border-color: #00ffff; box-shadow: 0 0 20px #00ffff; }
    80% { border-color: #0000ff; box-shadow: 0 0 20px #0000ff; }
    100% { border-color: #ff00ff; box-shadow: 0 0 20px #ff00ff; }
}

/* 敵キャラ（絵文字を揺らす） */
.boss-emoji { 
    font-size: 4rem; 
    display: block; 
    margin: 10px 0; 
    filter: drop-shadow(0 0 10px #000);
    animation: floatEnemy 2s infinite ease-in-out; 
}

/* --- 4. PUSHボタン & カットイン (前回の内容を維持) --- */
.push-container { position: relative; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; }
.push-base { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(145deg, #111, #333); box-shadow: 0 10px 20px rgba(0,0,0,0.8), 0 0 0 2px #555, inset 0 0 10px #000; }
.ultimate-push-btn { position: relative; width: 90px; height: 90px; border-radius: 50%; border: none; background: radial-gradient(circle at 30% 30%, #ff8a80, #d50000 60%, #880000 100%); box-shadow: 0 0 15px #ff0000, inset 2px 2px 5px rgba(255,255,255,0.7), inset -2px -2px 5px rgba(0,0,0,0.5); color: #fff; font-family: 'Arial Black', sans-serif; font-size: 1.2rem; font-weight: 900; text-shadow: 0 2px 2px rgba(0,0,0,0.5); cursor: pointer; z-index: 10; animation: heartbeat 0.8s infinite; transition: 0.1s; }
.ultimate-push-btn:active { transform: scale(0.92); box-shadow: 0 0 5px #ff0000, inset 0 0 10px rgba(0,0,0,0.8); background: radial-gradient(circle at 30% 30%, #d50000, #880000); }
.push-aura { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; border-radius: 50%; border: 2px solid rgba(255, 0, 0, 0.5); animation: ripple 1s infinite linear; z-index: 0; pointer-events: none; }
@keyframes heartbeat { 0% { transform: scale(1); box-shadow: 0 0 15px #ff0000; } 50% { transform: scale(1.05); box-shadow: 0 0 40px #ff0000, 0 0 10px #fff; } 100% { transform: scale(1); box-shadow: 0 0 15px #ff0000; } }
@keyframes ripple { 0% { width: 90px; height: 90px; opacity: 1; border-width: 5px; } 100% { width: 160px; height: 160px; opacity: 0; border-width: 0px; } }

#result-overlay { pointer-events: none; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; justify-content: center; align-items: center; background: rgba(0,0,0,0.2); }
.impact-text { font-family: 'Arial Black', sans-serif; font-size: 4rem; font-weight: 900; color: #fff; text-transform: uppercase; transform: scale(3); opacity: 0; animation: smashIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.impact-win { color: #ffd700; text-shadow: 0 0 10px #ffeb3b, 0 0 20px #ff9800, 0 0 40px #ff5722, 4px 4px 0px #000; }
.impact-lose { color: #b0bec5; text-shadow: 0 0 10px #000, 4px 4px 0px #000; filter: grayscale(100%); }
@keyframes smashIn { 0% { transform: scale(5); opacity: 0; } 50% { opacity: 1; } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } }
.screen-flash { animation: flashWhite 0.2s linear; }
@keyframes flashWhite { 0% { background: rgba(255,255,255,0); } 50% { background: rgba(255,255,255,0.8); } 100% { background: rgba(255,255,255,0); } }
.shake-boom { animation: shakeBoom 0.4s ease-out; }
@keyframes shakeBoom { 0% { transform: translate(0, 0); } 20% { transform: translate(-15px, 15px); } 40% { transform: translate(15px, -15px); } 60% { transform: translate(-10px, 10px); } 80% { transform: translate(5px, -5px); } 100% { transform: translate(0, 0); } }

/* =========================================
   ★継続率UP演出用スタイル
   ========================================= */

.slot-toast {
    position: absolute;
    top: 40%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #ffd700;
    box-shadow: 0 0 20px #ffd700, inset 0 0 20px rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    z-index: 200; /* PUSHボタンよりは下、リールより上 */
    pointer-events: none;
    animation: toastPop 2.5s ease-out forwards;
}

.toast-reason {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 5px;
    font-weight: bold;
    text-shadow: 0 0 5px #fff;
}

.toast-value {
    font-size: 1.8rem;
    color: #ffd700;
    font-weight: 900;
    text-shadow: 2px 2px 0 #000, 0 0 10px #ffeb3b;
}

@keyframes toastPop {
    0% { opacity: 0; transform: translate(-50%, -40%) scale(0.5); }
    10% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    15% { transform: translate(-50%, -50%) scale(1.0); }
    80% { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -80%); }
}
/* =========================================
   ★カジノ演出用 (Ver.8 究極脳汁版)
   ========================================= */

/* --- 1. 究極のGOD文字 --- */
.god-text-style {
    font-family: 'Times New Roman', 'Yu Mincho', serif; /* 神々しい明朝体 */
    font-size: 5rem !important;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 5px;
    
    /* 金色の金属光沢グラデーション */
    background: linear-gradient(
        to bottom, 
        #ffffcc 0%, 
        #ffd700 40%, 
        #b8860b 60%, 
        #8b4513 100%
    );
    -webkit-background-clip: text;
    color: transparent;
    
    /* 立体感と輝き */
    filter: drop-shadow(0 0 2px #000);
    position: relative;
    z-index: 2000;
    opacity: 0; /* 最初は隠す */
}

/* GOD降臨時の衝撃アニメーション */
.god-impact-anim {
    animation: godSlam 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes godSlam {
    0% { 
        opacity: 0; 
        transform: scale(5) perspective(500px) rotateX(20deg); 
        filter: blur(20px) brightness(5);
    }
    10% { 
        opacity: 1; 
        transform: scale(1); /* ドン！ */
        filter: blur(0) brightness(2);
    }
    15% { transform: scale(1.1); } /* バウンド */
    20% { transform: scale(1); filter: brightness(1); }
    
    /* 降臨後の神々しい輝きループ */
    40% { text-shadow: 0 0 20px #ffd700, 0 0 50px #ff0000; }
    60% { text-shadow: 0 0 40px #ffd700, 0 0 80px #ff0000; }
    80% { text-shadow: 0 0 20px #ffd700, 0 0 50px #ff0000; }
    
    90% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); filter: blur(10px); }
}

/* --- 2. リアルなプチュン (CRT電源オフ風) --- */
.power-off-flash {
    animation: crtOff 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes crtOff {
    0% { 
        transform: scale(1, 1); 
        filter: brightness(1) contrast(1);
    }
    40% { 
        transform: scale(1, 0.002); /* 横一文字につぶれる */
        filter: brightness(10) contrast(2); /* 一瞬白飛び */
    }
    70% {
        transform: scale(0, 0.002); /* 点になる */
        filter: brightness(5);
    }
    100% { 
        transform: scale(0, 0); 
        filter: brightness(0);
        opacity: 0;
    }
}

/* --- 3. 完全暗転中の背景 --- */
.blackout-state {
    background-color: #000 !important;
    border-color: #000 !important;
    box-shadow: none !important;
}
/* 暗転中はGOD文字以外消す */
.blackout-state > *:not(#slot-overlay) {
    visibility: hidden;
}

/* 衝撃時の画面揺れ (激) */
.shake-god {
    animation: shakeGod 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shakeGod {
    10%, 90% { transform: translate3d(-5px, 0, 0) rotate(-1deg); }
    20%, 80% { transform: translate3d(10px, 0, 0) rotate(2deg); }
    30%, 50%, 70% { transform: translate3d(-20px, 0, 0) rotate(-3deg); }
    40%, 60% { transform: translate3d(20px, 0, 0) rotate(3deg); }
}

/* --- 4. 後光 (GODの後ろで回る光) --- */
.god-rays {
    position: absolute;
    width: 200%; height: 200%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 215, 0, 0.1) 0deg 10deg,
        transparent 10deg 20deg
    );
    animation: rotateRays 10s infinite linear;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
}
.god-rays.active { opacity: 1; transition: opacity 0.5s; }
@keyframes rotateRays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- PUSHボタン等は前回のまま維持 --- */
.push-container { position: relative; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; }
.push-base { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(145deg, #111, #333); box-shadow: 0 10px 20px rgba(0,0,0,0.8), 0 0 0 2px #555, inset 0 0 10px #000; }
.ultimate-push-btn { position: relative; width: 90px; height: 90px; border-radius: 50%; border: none; background: radial-gradient(circle at 30% 30%, #ff8a80, #d50000 60%, #880000 100%); box-shadow: 0 0 15px #ff0000, inset 2px 2px 5px rgba(255,255,255,0.7), inset -2px -2px 5px rgba(0,0,0,0.5); color: #fff; font-family: 'Arial Black', sans-serif; font-size: 1.2rem; font-weight: 900; text-shadow: 0 2px 2px rgba(0,0,0,0.5); cursor: pointer; z-index: 10; animation: heartbeat 0.8s infinite; transition: 0.1s; }
.ultimate-push-btn:active { transform: scale(0.92); box-shadow: 0 0 5px #ff0000, inset 0 0 10px rgba(0,0,0,0.8); background: radial-gradient(circle at 30% 30%, #d50000, #880000); }
.push-aura { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; border-radius: 50%; border: 2px solid rgba(255, 0, 0, 0.5); animation: ripple 1s infinite linear; z-index: 0; pointer-events: none; }
@keyframes heartbeat { 0% { transform: scale(1); box-shadow: 0 0 15px #ff0000; } 50% { transform: scale(1.05); box-shadow: 0 0 40px #ff0000, 0 0 10px #fff; } 100% { transform: scale(1); box-shadow: 0 0 15px #ff0000; } }
@keyframes ripple { 0% { width: 90px; height: 90px; opacity: 1; border-width: 5px; } 100% { width: 160px; height: 160px; opacity: 0; border-width: 0px; } }
#result-overlay { pointer-events: none; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; justify-content: center; align-items: center; background: rgba(0,0,0,0.2); }
.impact-text { font-family: 'Arial Black', sans-serif; font-size: 4rem; font-weight: 900; color: #fff; text-transform: uppercase; transform: scale(3); opacity: 0; animation: smashIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.impact-win { color: #ffd700; text-shadow: 0 0 10px #ffeb3b, 0 0 20px #ff9800, 0 0 40px #ff5722, 4px 4px 0px #000; }
.impact-lose { color: #b0bec5; text-shadow: 0 0 10px #000, 4px 4px 0px #000; filter: grayscale(100%); }
@keyframes smashIn { 0% { transform: scale(5); opacity: 0; } 50% { opacity: 1; } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } }
.screen-flash { animation: flashWhite 0.2s linear; }
@keyframes flashWhite { 0% { background: rgba(255,255,255,0); } 50% { background: rgba(255,255,255,0.8); } 100% { background: rgba(255,255,255,0); } }
.slot-toast { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 80%; background: rgba(0, 0, 0, 0.9); border: 2px solid #ffd700; box-shadow: 0 0 20px #ffd700, inset 0 0 20px rgba(255, 215, 0, 0.2); border-radius: 8px; padding: 15px; text-align: center; z-index: 200; pointer-events: none; animation: toastPop 2.5s ease-out forwards; }
.toast-reason { font-size: 1.2rem; color: #fff; margin-bottom: 5px; font-weight: bold; text-shadow: 0 0 5px #fff; }
.toast-value { font-size: 1.8rem; color: #ffd700; font-weight: 900; text-shadow: 2px 2px 0 #000, 0 0 10px #ffeb3b; }
@keyframes toastPop { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.5); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 15% { transform: translate(-50%, -50%) scale(1.0); } 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -80%); } }