/**
 * Nova - Wave | Modern Flat UI System v4.0 (Final Stable)
 * Optimized for dynamic JS elements and robust modal handling.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

/* --- 1. Global Reset & Typography --- */
:root {
    --primary: #2563eb;
    --primary-light: #eff6ff;
    --text-main: #0f172a;
    --text-sub: #64748b;
    --white: #ffffff;
    --border: #e2e8f0;
    --bg: #f8fafc;
    --red: #ef4444;
}

* { 
    box-sizing: border-box; 
    outline: none; 
    /* すべての要素に優先的にInterを適用 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body, html { 
    margin: 0; 
    padding: 0; 
    height: 100vh; 
    overflow: hidden;
    background: var(--white); 
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
}

/* フォーム要素のブラウザデフォルトをリセット */
button, input, textarea, select {
    font-family: inherit !important;
    font-size: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
}

/* --- 2. Layout & Scenes --- */
.scene { 
    width: 100%; 
    height: 100%; 
    display: none; /* JSで display: flex に切り替え */
    animation: fadeIn 0.5s ease; 
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- 3. Components --- */
.label { 
    font-size: 0.65rem; 
    font-weight: 800; 
    color: var(--primary); 
    letter-spacing: 0.12em; 
    text-transform: uppercase; 
}

.badge { 
    font-size: 0.6rem; 
    font-weight: 700; 
    padding: 4px 10px; 
    background: var(--primary-light); 
    color: var(--primary); 
    border-radius: 4px; 
}

.btn { 
    padding: 14px; 
    border-radius: 12px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: 0.2s; 
    text-align: center;
    box-shadow: none !important;
    border: none;
}
.btn.primary { background: var(--primary); color: var(--white); }
.btn:hover.primary { background: #1d4ed8; }
.btn.secondary { background: var(--border); color: var(--text-sub); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- 4. Auth Scene --- */
.auth-card { margin: auto; width: 420px; text-align: center; }
.brand-header h1 { font-size: 2.8rem; margin: 10px 0; font-weight: 800; }

.input-field { text-align: left; margin: 30px 0; }
.input-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; color: var(--text-sub); }
.input-field input { 
    width: 100%; 
    padding: 14px; 
    border: 2px solid var(--border); 
    border-radius: 14px; 
    font-size: 1rem; 
    transition: border-color 0.2s; 
    background: var(--white);
}
.input-field input:focus { border-color: var(--primary); }

.verification-box { background: var(--bg); border-radius: 20px; padding: 24px; margin-bottom: 24px; border: 1px solid var(--border); }
#verification-code { font-size: 1.8rem; font-weight: 800; color: var(--primary); margin-top: 10px; letter-spacing: 0.1em; }

.auth-notice { font-size: 0.7rem; color: var(--text-sub); margin-top: 16px; line-height: 1.5; }
.auth-notice a { color: var(--primary); text-decoration: none; font-weight: 600; }

/* --- 5. Dashboard Layout --- */
.hero-panel { 
    flex: 1.2; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: var(--white); 
    position: relative; 
    overflow: hidden; 
}
/* 背景装飾のアニメーション */
.hero-panel::before, .hero-panel::after {
    position: absolute; font-size: 15vw; font-weight: 900; color: #f1f5f9;
    white-space: nowrap; z-index: 1; pointer-events: none; width: 200%; display: flex; justify-content: space-around;
}
.hero-panel::before { content: "NOVA WAVE NOVA WAVE"; top: 17%; animation: scrollLeft 30s linear infinite; }
.hero-panel::after { content: "NOVA WAVE NOVA WAVE"; bottom: 17%; animation: scrollRight 30s linear infinite; }
@keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.rank-display { display: flex; align-items: center; gap: 35px; }
#nwr-value { font-size: 14rem; font-weight: 900; line-height: 0.9; color: var(--text-main); }

.rank-label { text-align: left; border-left: 6px solid var(--primary); padding-left: 28px; }
.rank-title { display: block; font-size: 2.4rem; font-weight: 800; color: var(--primary); }
.rank-subtitle { color: var(--text-sub); font-size: 1rem; font-weight: 700; }

.sub-stats { margin-top: 45px; padding: 16px 32px; background: var(--primary-light); border-radius: 14px; }
.stat-val { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.stat-val::after { content: " NWRP"; font-size: 0.9rem; }

/* --- 6. Side Panel --- */
.side-panel { 
    position: relative; 
    flex: 0.8; 
    background: var(--bg); 
    border-left: 1px solid var(--border); 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
}
.side-scroll-container { 
    width: 100%; 
    height: 100%; 
    overflow-y: auto; 
    padding: 45px; 
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
}

/* --- 7. Modals (Core Logic Fix) --- */
.modal-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(15, 23, 42, 0.4); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    display: none; /* JSで .active 付与時に表示 */
    align-items: center; 
    justify-content: center; 
    z-index: 9999 !important;
    opacity: 0; 
    transition: opacity 0.4s ease;
}

/* activeクラスがある場合、何があっても表示する */
.modal-overlay.active { 
    display: flex !important; 
    opacity: 1 !important;
    visibility: visible !important;
}

.modal-card { 
    background: var(--white); 
    width: 420px; 
    padding: 45px; 
    border-radius: 32px; 
    text-align: center;
    border: 1px solid var(--border);
    transform: scale(0.8); 
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.active .modal-card { transform: scale(1); }

/* --- 8. Wallet & Shop --- */
.wallet-card { background: var(--white); padding: 28px; border-radius: 24px; border: 1px solid var(--border); }
.balance-row { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.nwp-text { font-size: 3.4rem; font-weight: 800; color: var(--primary); }

.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shop-item { 
    background: var(--white); 
    padding: 18px; 
    border-radius: 16px; 
    text-align: left; 
    cursor: pointer; 
    transition: 0.2s; 
    border: 1px solid var(--border);
}
.shop-item:hover { border-color: var(--primary); }
.item-name { display: block; font-weight: 700; font-size: 0.9rem; }
.item-cost { font-size: 0.75rem; color: var(--primary); font-weight: 800; }

/* --- 9. Missions --- */
.mission-list { display: flex; flex-direction: column; gap: 12px; }
.mission-card { 
    background: var(--white); 
    padding: 18px; 
    border-radius: 16px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    border: 1px solid var(--border);
}
.mission-card.completed { background: var(--primary-light); border-color: var(--primary-light); opacity: 0.7; }
.mission-card.locked { background: #f1f5f9; border: 1px dashed var(--border); opacity: 0.6; cursor: not-allowed; }
.mission-title { font-weight: 700; font-size: 0.85rem; display: block; }
.mission-pts { font-size: 0.7rem; font-weight: 800; color: var(--primary); }

/* --- 10. Ranking --- */
#ranking-view { display: none; } /* JSで切り替え */
.ranking-item {
    display: flex; align-items: center; gap: 15px; padding: 12px 20px;
    background: var(--white); border-radius: 16px; margin-bottom: 10px;
    border: 1px solid var(--border);
}
.rank-badge {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 0.9rem; background: var(--bg); border-radius: 50%; color: var(--text-sub);
}
.rank-1 .rank-badge { background: #fbbf24; color: #fff; }
.rank-2 .rank-badge { background: #94a3b8; color: #fff; }
.rank-3 .rank-badge { background: #d97706; color: #fff; }

.ranking-scroll-area {
    position: relative;
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 15px;
}

/* --- 11. User Footer --- */
.user-footer { margin-top: auto; padding-top: 25px; border-top: 1px solid var(--border); }
.user-card { display: flex; align-items: center; gap: 15px; }
.avatar { width: 50px; height: 50px; border-radius: 14px; background: var(--border); overflow: hidden; }
#user-name { font-weight: 800; font-size: 0.9rem; color: var(--text-main); display: block; }
#logout-btn { color: var(--red); font-size: 0.65rem; font-weight: 800; cursor: pointer; text-transform: uppercase; letter-spacing: 0.1em; }

/* --- 12. Ads --- */
/* 左下広告バナーのUI */
.inline-ad-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 320px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 広告モーダル全体のサイズ感をアップ */
#view-ad-modal .modal-card {
    display: flex !important;
    flex-direction: row !important;
    width: 850px !important;    /* 横幅を大幅に拡張 */
    height: 480px !important;   /* 高さも少し出して余裕を持たせる */
    max-width: 95vw;
    padding: 0 !important;
    overflow: hidden;
    background: var(--white);
    border-radius: 32px;
    border: 1px solid var(--border);
}

/* 左側：サムネイルエリア（スリム化 & 比率維持） */
.ad-modal-left {
    flex: 0 0 340px;            /* 幅を340pxに（全体の約4割） */
    background: #111;           /* 4:3画像以外の隙間を埋める黒 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ad-modal-left img {
    width: 100%;                /* 横幅いっぱいに広げる */
    height: auto;               /* 高さは比率に合わせる */
    max-height: 100%;           /* 縦がはみ出さないように */
    object-fit: contain;        /* 拡大せず、全体を表示 */
    z-index: 2;
}

/* 右側：コンテンツエリア（ここを広く確保！） */
.ad-modal-right {
    flex: 1;                    /* 残りの510px分をすべて使う */
    padding: 45px;              /* 十分な余白 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上から順に並べる */
    text-align: left;
    min-width: 0;               /* 必須：これがないと文字が枠を突き破る */
    background: var(--white);
    position: relative;
}

/* タイトルと本文の調整 */
#viewAdTitle {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 1.2;
}

#viewAdBody {
    font-size: 1rem;
    color: var(--text-sub);
    line-height: 1.7;           /* 行間を広げて読みやすく */
    margin-bottom: 30px;
    overflow-y: auto;           /* 長文でもスクロール可能に */
    word-break: break-word;     /* 長い単語で改行 */
}

.ad-banner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ad-tag {
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 8px;
    background: var(--bg);
    color: var(--text-sub);
    border-radius: 4px;
    text-transform: uppercase;
}

/* すべてのアンカータグ（リンク）の下線をデフォルトで消す */
a {
    text-decoration: none !important;
}

/* もし「CHECK NOW」が特定のクラス（例: .check-now-link）なら個別指定 */
.check-now-link, 
.auth-notice a, 
.project-item-mini, 
.project-card {
    text-decoration: none !important;
}

/* 広告バナー内のリンク（CHECK NOW等）を特定して消す */
#bannerAdLink, 
.inline-ad-banner a {
    text-decoration: none !important;
}

/* 広告バナー内の「CHECK NOW」ボタンの角を少し角張らせる */
#bannerAdLink, .inline-ad-banner .btn {
    border-radius: 8px !important; /* 12pxや20pxから下げるとシャープになります */
    padding: 8px 37px;            /* ボタンのサイズ感もここで調整可能 */
    text-decoration: none;         /* 下線もここで確実に消えます */
}

/* --- 13. System Utilities & Fixes --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

/* 強制フォント適用（JS生成要素対策の最終防衛ライン） */
.shop-item *, .mission-card *, .ranking-item *, .modal-card *, .side-panel * {
    font-family: 'Inter', sans-serif !important;
}

/* 入力エリアの統一スタイル */
#mission-pass-input, #ad-url, #ad-title, #ad-body {
    width: 100%;
    padding: 14px;
    border: 2px solid var(--border) !important;
    border-radius: 14px;
    font-size: 0.9rem;
    margin-top: 10px;
    background: var(--bg);
}
#mission-pass-input:focus, #ad-url:focus, #ad-title:focus, #ad-body:focus {
    border-color: var(--primary) !important;
}

/* 認証シーンの表示切り替え */
#auth-scene { display: none; }
#dashboard-scene { display: none; }

/* 広告モーダルの強制表示ロジック */
#ad-modal.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ロック用コンテナ */
/* --- ロックオーバーレイの最終洗練版 --- */
.lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* アイコンコンテナ：Lucideの雰囲気を出すためにシンプルに */
.lock-icon-container {
    position: relative;
    width: 56px;
    height: 56px;
    background: var(--white);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.08);
    border: 1.5px solid var(--border);
}

/* 波紋アニメーション： primary色を細く回す */
.lock-icon-container::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1.5px solid var(--primary);
    border-radius: 22px;
    opacity: 0;
    animation: lock-pulse 2.5s infinite;
}

@keyframes lock-pulse {
    0% { transform: scale(0.9); opacity: 0; }
    50% { opacity: 0.3; }
    100% { transform: scale(1.1); opacity: 0; }
}

/* Material Symbol を Lucide 風に調整 */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* アイコンの大きさ */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Lucide風にするための細さ設定 */
  font-variation-settings:
    'FILL' 0,
    'wght' 300, /* ここで細さを調整 */
    'GRAD' 0,
    'opsz' 24;
}

.lock-message {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.lock-sub-message {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-light);
    padding: 5px 14px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ロック対象の背後要素をさらに減衰させる */
.is-locked > *:not(.lock-overlay) {
    filter: blur(4px);
    opacity: 0.3;
    pointer-events: none;
}

/* ロック対象の親要素には必ず position: relative をつける */
.wallet-card, .shop-grid, .mission-list {
    position: relative;
}

/* プロジェクトランキング用スタイル */
.project-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: 0.2s ease;
    margin-bottom: 8px;
}
.project-card:hover { border-color: var(--primary); transform: scale(1.02); }
.thumb-container { width: 80px; height: 60px; border-radius: 8px; overflow: hidden; margin-right: 12px; flex-shrink: 0; background: var(--bg); }
.thumb-container img { width: 100%; height: 100%; object-fit: cover; }
.project-info { flex: 1; text-align: left; }
.project-title { font-weight: 800; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.project-stats { display: flex; gap: 8px; margin-top: 4px; }
.stat-badge { font-size: 0.6rem; font-weight: 800; color: var(--primary); background: var(--primary-light); padding: 2px 6px; border-radius: 4px; }

/* プロジェクト用コンパクトカード */
.project-item-mini {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-bottom: 8px;
    transition: 0.2s;
}
/* プロジェクトアイテムの基本スタイル */
.project-item-mini {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: transparent;      /* 通常時は透明、または背景色 */
    border: 1px solid transparent;      /* 枠線のガタつき防止 */
    border-bottom: 1px solid var(--border); /* 通常時は下線のみ */
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

/* ホバー時の処理 */
.project-item-mini:hover {
    /* 1. 背景を薄い青にする（透明度15%） */
    background-color: rgba(var(--primary-rgb, 0, 150, 255), 0.10); 
    
    /* 2. 枠線を全周、ハッキリとした青にする */
    border: 1px solid var(--primary) !important;
    
    /* 3. 下辺の枠線も確実に上書き */
    border-bottom-color: var(--primary) !important;
    
    /* 4. 他の要素の影に隠れないよう手前に出す */
    z-index: 2;
    
    cursor: pointer;
}

/* 1. シマー（光沢）アニメーションの定義 */
@keyframes shimmer-sweep {
    0% { transform: translateX(-150%) translateY(150%) rotate(-45deg); }
    100% { transform: translateX(150%) translateY(-150%) rotate(-45deg); }
}

/* 2. 共通のシマーベーススタイル */
.rank-shimmer {
    position: relative;
    overflow: hidden; /* 光がはみ出さないように */
}

.rank-shimmer::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* 左下から右上へのグラデーション */
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 60%,
        transparent 100%
    );
    animation: shimmer-sweep 3s infinite linear;
    pointer-events: none; /* クリックを邪魔しない */
}

/* 3. 各順位ごとの専用カラー（背景と枠線） */
.project-rank-1 { 
    background: rgba(255, 215, 0, 0.10); /* 金 */
    border-left: 4px solid #ffd700 !important;
}
.project-rank-2 { 
    background: rgba(192, 192, 192, 0.10); /* 銀 */
    border-left: 4px solid #c0c0c0 !important;
}
.project-rank-3 { 
    background: rgba(205, 127, 50, 0.10); /* 銅 */
    border-left: 4px solid #cd7f32 !important;
}

/* ホバー時の挙動をリセット（10%の青を適用） */
.project-item-mini:hover {
    background-color: rgba(var(--primary-rgb, 0, 150, 255), 0.1) !important;
    border: 1px solid var(--primary) !important;
    z-index: 2;
}

/* --- ✦（キラキラ）のアニメーション：回転を止めない設定 --- */
@keyframes star-float {
    0% { 
        /* 開始：小さく、回転も0から */
        transform: translateY(0) scale(0) rotate(0deg); 
        opacity: 0; 
    }
    15% {
        opacity: 1; /* 早めに表示させる */
    }
    /* 中間：ここで止まらないように回転を1.5回転(540deg)くらいまで一気に回す */
    50% { 
        transform: translateY(-15px) scale(1.3) rotate(540deg); 
        opacity: 1;
    }
    /* 終了：さらに回転を加えながら（合計3回転=1080deg）消える */
    100% { 
        transform: translateY(-35px) scale(0) rotate(1080deg); 
        opacity: 0; 
    }
}

/* キラキラを配置するコンテナ */
.star-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* ✦ アイコン本体 */
.star-icon {
    position: absolute;
    color: #ffd700;
    font-size: 10px;
    opacity: 0;
    /* linear（等速）に近づけることで「止まり」を解消 
       ease-in-outの代わりに「cubic-bezier」を使って、
       始まりと終わりをスムーズにしつつ、中間の動きを止めないようにしています
    */
    animation: star-float 3.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* 順位ごとのカラーとグロー */
.project-rank-1 .star-icon { color: #ffd700; filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.7)); }
.project-rank-2 .star-icon { color: #e0e0e0; filter: drop-shadow(0 0 3px rgba(192, 192, 192, 0.7)); }
.project-rank-3 .star-icon { color: #dfa375; filter: drop-shadow(0 0 3px rgba(205, 127, 50, 0.7)); }

/* --- 配置のランダム化（位置をバラバラにする） --- */
.star-1 { top: 10%; left: 15%; animation-delay: 0s;   animation-duration: 3.2s; font-size: 12px; }
.star-2 { top: 65%; left: 5%;  animation-delay: 0.8s; animation-duration: 4.0s; font-size: 8px;  }
.star-3 { top: 20%; right: 15%; animation-delay: 1.6s; animation-duration: 3.5s; font-size: 11px; }
.star-4 { bottom: 15%; right: 10%; animation-delay: 2.4s; animation-duration: 4.5s; font-size: 9px;  }
.star-5 { top: 45%; right: 40%; animation-delay: 1.2s; animation-duration: 3.8s; font-size: 10px; }

.thumb-mini {
    width: 60px; height: 45px; border-radius: 8px;
    overflow: hidden; margin-right: 12px; flex-shrink: 0; background: var(--border);
}
.thumb-mini img { width: 100%; height: 100%; object-fit: cover; }

.info-mini { flex: 1; min-width: 0; text-align: left; }
.title-mini { font-weight: 800; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.author-mini { font-size: 0.6rem; color: var(--text-sub); font-weight: 600; }

.stats-mini { display: flex; gap: 6px; margin-top: 4px; }
.stat-mini-badge {
    font-size: 0.55rem; font-weight: 800; color: var(--primary);
    background: var(--primary-light); padding: 2px 6px; border-radius: 4px;
    display: flex; align-items: center; gap: 3px;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

/* 広告バナーの本文を3行に制限 */
#bannerAdBody {
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* ここで行数を指定 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;               /* 行間を整えるとより綺麗です */
    max-height: 4.5em;              /* line-height × 行数 */
    word-break: break-all;          /* 英単語が長くても強制改行 */
}

/* ついでにタイトルも1行で収まらない場合に備えて */
#bannerAdTitle {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;            /* タイトルは1行が一般的 */
}

/* プリローダーの外枠 */
.preloader-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #ffffff;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease 0.4s, visibility 0.5s;
}

/* コンテナは常に回転させておく */
.progress-container {
    width: 80px;
    height: 80px;
    animation: rotate 1.2s linear infinite; /* 常に一定速度で回転 */
}

.progress-svg {
    transform: rotate(-90deg); /* 開始位置を12時に固定 */
}

circle {
    fill: none;
    stroke-width: 3.7;
    stroke-linecap: round;
}

/* プリローダーの外枠 */
.preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* サイトの背景色に合わせて調整 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* 既存のどの要素よりも前面に */
    transition: opacity 0.4s ease, visibility 0.4s;
}

/* スピナーのデザイン（Nova - Waveの雰囲気に合わせた青系） */
.main-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(37, 99, 235, 0.1);
    border-left-color: #2563eb; /* Nova - Waveのメインカラー */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    margin-top: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.05em;
}

/* 回転アニメーション */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 読み込み完了後にJSで制御するクラス */
.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}

.modal-card {
    /* 横幅の基本設定 */
    width: 90%;            /* スマホなど画面が小さい時は左右に少し余白を持たせる */
    max-width: 420px;      /* PCなど大きな画面でも広がりすぎない上限 */
    
    /* 余白と角丸（既存デザインに合わせる） */
    padding: 32px;
    border-radius: 24px;
    
    /* 画面中央に配置するための設定（親がflex想定） */
    margin: auto;
    
    /* ボックスが浮き上がって見えるように調整 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

#proj-id-input {
    width: 100%;
    box-sizing: border-box; /* 枠線を含めて100%にする */
    padding: 12px 15px;
    font-size: 0.9rem;       /* スマホでズームされない最低ライン */
    border: 1.5px solid var(--border);
    border-radius: 12px;
    
    /* 文字が長い時の挙動 */
    overflow-x: auto;       /* 横にスクロール可能にする */
    white-space: nowrap;    /* 改行させない */
}

#proj-id-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    font-size: 0.8rem; /* URLが長いため少し小さめに */
    background: var(--bg-sub);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-main);
    
    /* 入力欄自体を横スクロール可能にする設定 */
    overflow-x: auto;
    white-space: nowrap;
}

/* モーダル内の文字溢れ対策 */
.modal-card {
    max-width: 420px;
    width: 90%;
    overflow: hidden; /* モーダル自体からはみ出さない */
}



/* ヘルプレイアウトの強制修正 */
.help-layout {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
}

/* 左：サイドバー */
.help-sidebar {
    width: 140px;
    background: var(--bg-sub);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    flex-shrink: 0;
}

/* サイドバーの項目 */
.help-nav-item {
    padding: 12px 18px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    text-align: left;
}

.help-nav-item:hover {
    color: var(--primary);
    background: rgba(0, 102, 255, 0.05);
}

.help-nav-item.active {
    color: var(--primary);
    background: rgba(0, 102, 255, 0.1);
    border-left: 3px solid var(--primary);
}

/* 右：メインコンテンツ */
.help-main {
    flex: 1;
    padding: 25px;
    background: var(--bg);
    overflow-y: auto;
}

/* ミッションカード内のアイコン位置調整 */
.mission-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mission-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

/* ヘルプボタンを最前面に固定 */
#help-trigger {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--bg-sub) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 9999 !important; /* 絶対に一番上 */
    transition: all 0.2s ease;
box-shadow: none !important;
}

#help-trigger:hover {
    background: var(--border) !important;
    transform: translateY(-2px);
box-shadow: none !important;
}

/* 2カラムモーダルのレイアウト固定 */
/* モーダル外枠：サイズと位置の調整 */
.help-layout {
    display: flex !important;
    flex-direction: row !important;
    width: 85vw !important;       /* 画面幅の85% */
    max-width: 800px !important;  /* 最大800pxまで広げる */
    height: 500px !important;     /* 高さを500pxに固定 */
    background: var(--bg) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
}

/* 左側サイドバー：少し広げて文字を読みやすく */
.help-sidebar {
    width: 180px !important;      /* 150pxから180pxに拡張 */
    background: var(--bg-sub) !important;
    border-right: 1px solid var(--border) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 15px 0 !important;
    flex-shrink: 0 !important;
}

/* メインコンテンツエリア */
.help-main {
    flex: 1 !important;
    padding: 40px !important;     /* 余白を広げて高級感を出す */
    background: var(--bg) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

/* タイトルの強調 */
#help-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    margin-bottom: 10px !important;
}

/* 本文の読みやすさ */
#help-text {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    color: var(--text-main) !important;
}

.mission-card {
    pointer-events: auto !important;
    user-select: none;
}

/* カードの中の要素がクリックを横取りしないようにする */
.mission-card > * {
    pointer-events: none;
}

/* 影を完全に排除するための強制上書き設定 */
#help-trigger, 
#help-trigger:hover, 
#help-trigger:active {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    outline: none !important;
    /* もしボタンが浮き上がる動きも消したい場合は以下を追加 */
    /* transform: none !important; */
}

/* メッセージエリアの基本スタイル */
#mission-verify-msg {
    text-align: center;
    margin: 12px 0;
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 1.2em;
    border-radius: 6px;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

/* エラー（赤）の時の追加スタイル */
#mission-verify-msg.error {
    background: rgba(239, 68, 68, 0.1); /* 薄い赤背景 */
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    animation: shake 0.4s ease-in-out;
}

/* 成功（緑）の時の追加スタイル */
#mission-verify-msg.success {
    background: rgba(16, 185, 129, 0.1); /* 薄い緑背景 */
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

/* 照合中（青/グレー）のスタイル */
#mission-verify-msg.loading {
    color: #94a3b8;
}

/* エラー時に震えるアニメーション */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}


/* --- 14. Responsive UI Fixes --- */

/* タブレット・スマホ向けの共通設定 */
@media (max-width: 1024px) {
    #nwr-value { font-size: 8rem; } /* 少し小さく */
    .rank-display { gap: 20px; }
}

/* スマホ向け（メインのレスポンシブ設定） */
@media (max-width: 768px) {
    body, html {
        overflow: auto; /* スマホではスクロールを許可 */
        height: auto;
        min-height: 100vh;
    }

    /* 認証カードの幅を柔軟に */
    .auth-card {
        width: 90%;
        margin: 40px auto;
    }

    /* ダッシュボードを縦並びに切り替え */
    #dashboard-scene {
        flex-direction: column !important; /* JSで display: flex になった時用 */
        display: block; /* または block */
    }

    /* メインパネル */
    .hero-panel {
        padding: 60px 20px;
        min-height: 400px;
        flex: none;
    }

    .rank-display {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    #nwr-value {
        font-size: 6rem;
    }

    .rank-label {
        border-left: none;
        border-top: 4px solid var(--primary);
        padding-left: 0;
        padding-top: 15px;
        text-align: center;
    }

    /* サイドパネルを画面下部に配置 */
    .side-panel {
        flex: none;
        border-left: none;
        border-top: 1px solid var(--border);
        background: var(--white);
    }

    .side-scroll-container {
        padding: 30px 20px;
    }

    /* モーダルのサイズ調整 */
    .modal-card {
        width: 95%;
        padding: 25px;
        border-radius: 20px;
    }

    /* 2カラムだったヘルプモーダルを縦並びに */
    .help-layout {
        flex-direction: column !important;
        height: 80vh !important;
        width: 90vw !important;
    }

    .help-sidebar {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        overflow-x: auto;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
    }

    .help-nav-item {
        white-space: nowrap;
        border-left: none !important;
        border-bottom: 3px solid transparent;
    }

    .help-nav-item.active {
        border-bottom: 3px solid var(--primary);
    }

    /* 広告バナーをスマホでは非表示、または調整 */
    .inline-ad-banner {
        position: static;
        width: 100%;
        margin-top: 20px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* ショップのグリッドを1列に */
    .shop-grid {
        grid-template-columns: 1fr;
    }
}

/* 超小型デバイス用 */
@media (max-width: 480px) {
    .brand-header h1 { font-size: 2rem; }
    #nwr-value { font-size: 4.5rem; }
    .nwp-text { font-size: 2.5rem; }
}



/* ミッション検証モーダルを最前面へ */
#mission-verify-modal {
    display: none; /* 初期状態 */
    position: fixed;
    inset: 0;
    z-index: 9999 !important; /* ランキングより高い値に */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

/* 文字の形を模したスケルトン */
.skeleton-text {
    height: 14px;         /* タイトルの高さ */
    width: 85%;           /* タイトルの長さ */
    border-radius: 4px;
    margin-bottom: 10px;  /* 下の文字との間隔 */
}

.skeleton-text-sub {
    height: 10px;         /* サブテキスト（作者名など）の高さ */
    width: 50%;           /* 少し短くする */
    border-radius: 4px;
}

/* アニメーション（前回の共通設定） */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}