/* ------------------------------
   ベース設定（青→ベージュの背景＋ポップ）
------------------------------ */
:root{
  --bg: #fff8e8;          /* 背景ベージュ */
  --card: #fffdfb;        /* 面の色 */
  --ink: #2f3034;         /* 文字色（濃紺グレー） */
  --muted:#7b8496;
  --accent:#ff7b94;       /* ピンクのピル */
  --accent-dark:#e76783;
  --ok:#27c2a2;           /* ○の色（ターコイズ） */
  --ng:#ff6b5e;           /* ×の色（サーモン） */
  --frame:#2f4057;        /* 枠線の色（濃紺） */
  --shadow: 0 10px 24px rgba(0,0,0,.08);
  --radius: 18px;
}
html,body{
  margin:0;
  padding:0;
  background: linear-gradient(180deg, #fdf7e6 0%, #fff8e8 100%);
  color:var(--ink);
  font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ------------------------------  ヘッダー（完成版バナー画像）  ------------------------------ */
.header-hero{
  padding:16px 12px 8px;
  background: linear-gradient(180deg, #8fd3f4 0%, #fff8e8 100%);
  box-shadow: var(--shadow);
}
.banner-full{
  display:block;
  width:min(980px, 94vw);
  height:auto;
  margin:0 auto;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.12));
  border-radius: 18px;
}
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.banner-wrap,.banner-bg,.banner-title,.banner-icon,.banner-mascot{ display:none !important; }

/* ------------------------------  共通カード  ------------------------------ */
.card{
  background:var(--card);
  border-radius:var(--radius);
  margin:16px;
  padding:16px;
  box-shadow:var(--shadow);
  border:2px solid #fff;
}

/* ------------------------------  マスコット＋吹き出し  ------------------------------ */
.mascot{ position:relative; display:flex; align-items:flex-end; gap:10px; }
.mascot img{ width:96px; height:auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.12)); }
.balloon{
  background:#fff; border:3px solid var(--frame); color:var(--ink);
  border-radius:16px; padding:8px 12px; font-weight:700;
}
.balloon::after{
  content:""; position:absolute; left:10px; bottom:-14px;
  border:8px solid transparent; border-top-color:#fff; filter: drop-shadow(0 -3px 0 var(--frame));
}

/* ------------------------------  プロフィール/バッジ  ------------------------------ */
.profile{ display:flex; align-items:center; gap:12px; }
.avatar{ width:56px;height:56px;border-radius:50%; object-fit:cover; border:3px solid var(--frame); }
.meta{ font-size:.85rem; color:var(--muted); }
.progress{ height:10px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.progress span{ display:block; height:100%; background:linear-gradient(90deg,#3ae3c7,#14b8a6); }
.badges{ display:flex; flex-wrap:wrap; gap:6px; }
.badge-chip{ background:#222; color:#fff; padding:4px 10px; border-radius:999px; font-size:.75rem; }

/* ------------------------------  ホームのヒーロー  ------------------------------ */
.card.hero{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.sub{ color:var(--muted); margin:0; }

/* ------------------------------  ボタン（共通）  ------------------------------ */
.btn{
  appearance:none; border:0; cursor:pointer;
  background:#fff; color:var(--ink);
  padding:12px 16px; border-radius:14px;
  box-shadow:0 6px 14px rgba(0,0,0,.06), inset 0 0 0 3px #e9eef5;
  transition:.2s transform ease, .2s box-shadow ease, .2s background ease;
  font-weight:900; font-size:18px;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 10px 18px rgba(0,0,0,.08), inset 0 0 0 3px #dfe7f1; }
.btn[disabled]{ opacity:.55; filter:grayscale(20%); pointer-events:none; }
.btn.primary{ color:#fff; background:linear-gradient(180deg,#20d1b6,#0fb29c); box-shadow:inset 0 -4px 0 #078e86, 0 14px 30px #0ec9bd60; }
.btn.blue{ color:#042042; background:linear-gradient(180deg,#a6d8ff,#6bbcff); box-shadow:inset 0 -4px 0 #4a9dd1, 0 14px 30px #6bbcff55; }
.btn.orange,.btn.alt{ color:#3b220c; background:linear-gradient(180deg,#ffd8a0,#ffb870); box-shadow:inset 0 -4px 0 #e38c40, 0 14px 30px #ffb87055; }
.btn.block{ display:block; width:min(420px, 100%); text-align:center; }

/* ------------------------------  クイズ画面（共通）  ------------------------------ */
.quiz-head{
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:900; letter-spacing:.06em;
  color:var(--frame); text-shadow: 0 3px 0 #fff8;
  font-size: clamp(22px,4.2vw,36px);
  margin:0 6px 8px;
}
.pill{
  display:inline-block; background:var(--accent); color:#fff; font-weight:900;
  padding:8px 16px; border-radius:999px; border:3px solid var(--frame);
  box-shadow: 0 6px 0 #00000010, 0 0 0 3px #fff inset;
}
.quiz-panel{ margin-top:10px; padding:14px; border-radius:22px; border:3px solid var(--frame); background:#fffdfb; }
.quiz-row{ display:flex; gap:14px; align-items:flex-start; }
.quiz-row img.mini{ width:58px; height:58px; object-fit:contain; }
.lead{ color:var(--muted); margin:0 6px 8px; font-weight:700; }

.judge{ display:flex; justify-content:center; gap:26px; margin:12px 0 6px; }
.judge-btn{
  width:96px; height:96px; border-radius:50%; background:#fff;
  border:6px solid var(--frame); display:grid; place-items:center; cursor:pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.judge-btn:hover{ transform: scale(1.05); }
.judge-btn.ok{ border-color: var(--ok); }
.judge-btn.ng{ border-color: var(--ng); }
.judge-btn img{ width:70%; height:70%; object-fit:contain; }

/* 補助表示 */
.counter{ text-align:center; color:var(--muted); font-weight:700; padding-bottom:10px; }

/* フィードバックのフラッシュ */
.flash-ok{ animation: okFlash .28s; } @keyframes okFlash{ 0%{ background:#e8fff6 } 100%{ background:transparent } }
.flash-ng{ animation: ngFlash .28s; } @keyframes ngFlash{ 0%{ background:#ffecec } 100%{ background:transparent } }

/* トースト */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#111; color:#fff; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow);
  animation:toast 3s ease;
}
@keyframes toast{
  0%{ opacity:0; transform:translate(-50%, 14px) }
  10%{ opacity:1; transform:translate(-50%, 0) }
  90%{ opacity:1 }
  100%{ opacity:0; transform:translate(-50%, 8px) }
}

/* ==== ランクアップ演出（モーダル） ==== */
.rankup-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:grid; place-items:center; z-index:9999; animation:fadeIn .18s ease; }
.rankup-card{ background:#fff; border-radius:24px; padding:18px 16px; border:4px solid var(--frame); box-shadow:var(--shadow); width:min(92vw,520px); text-align:center; }
.rankup-title{ font-family:'Outfit',system-ui,sans-serif; font-weight:900; letter-spacing:.06em; color:var(--frame); font-size:clamp(22px,4.5vw,36px); margin:6px 0 8px; }
.rankup-img{ width:min(80vw,420px); max-height:45vh; object-fit:contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.18)); animation:pop .22s ease; }
.rankup-sub{ color:var(--muted); font-weight:700; margin:8px 0 12px; }
.rankup-actions{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
@keyframes pop{ from{ transform:scale(.92); opacity:.0 } to{ transform:scale(1); opacity:1 } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

/* ==== ランクアップ演出：花火＆キラキラ ==== */
.rankup-overlay .fx-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.rankup-overlay canvas.fx-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.sparkle{ position:absolute; width:10px; height:10px; pointer-events:none; opacity:0; background: radial-gradient(circle, #fff 0 35%, transparent 36% 100%); filter: drop-shadow(0 0 8px #fff); animation: sparklePop 1.8s ease forwards; }
.sparkle::before, .sparkle::after{ content:""; position:absolute; inset:0; background: linear-gradient(#fff, #fff); transform-origin:center; }
.sparkle::before{ width:100%; height:2px; top:4px; left:0; }
.sparkle::after{ height:100%; width:2px; left:4px; top:0; }
@keyframes sparklePop{ 0%{ transform: scale(.4) rotate(0deg); opacity:0 } 10%{ opacity:1 } 50%{ transform: scale(1) rotate(45deg); opacity:1 } 100%{ transform: scale(.2) rotate(90deg); opacity:0 } }

/* ==== 図鑑（ロードマップ） ==== */
.roadmap-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-top:8px; }
.roadmap-item{ border:3px solid var(--frame); border-radius:16px; background:#fff; padding:8px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; box-shadow:var(--shadow); }
.roadmap-item .art-wrap{ position:relative; width:100%; aspect-ratio: 4/3; display:grid; place-items:center; overflow:hidden; }
.roadmap-item img{ width:100%; height:100%; object-fit:contain; display:block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.12)); }
.roadmap-item.locked img{ filter: brightness(0) contrast(1.4) drop-shadow(0 6px 10px rgba(0,0,0,.12)); opacity:.95; }
.lock-emoji{ position:absolute; right:8px; top:8px; font-size:20px; animation: lockShake 2.6s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.roadmap-item.teaser{ outline:3px dashed var(--accent); outline-offset:4px; animation: teaserPulse 1.8s ease-in-out infinite; }
@keyframes teaserPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.02) } }
.roadmap-item .cap{ width:100%; display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.roadmap-item .name{ font-weight:700; font-size:.9rem; }
.roadmap-item.locked .name{ font-family: 'Mochiy Pop P One','Noto Sans JP',sans-serif; font-size: 1.4rem; letter-spacing: 0.05em; }
.roadmap-item .lvl{ font-size:.8rem; color:var(--muted); }
.roadmap{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:14px; }
.roadmap-item .icon-wrap{ position:relative; width:120px; height:120px; border-radius:16px; display:grid; place-items:center; background:#fff; border:3px solid var(--frame); overflow:hidden; }
.roadmap-item .icon-wrap img{ width:100%; height:100%; object-fit:contain; }
.roadmap-item.locked .icon-wrap img{ filter: grayscale(100%) contrast(70%) brightness(90%) blur(0.4px); opacity:.8; }
.roadmap-item .lock{ position:absolute; right:8px; top:8px; font-size:20px; filter: drop-shadow(0 2px 0 #fff); animation: lockWiggle 2.2s ease-in-out infinite; }
@keyframes lockWiggle{ 0%,100%{ transform:rotate(0deg) } 10%{ transform:rotate(-8deg) } 20%{ transform:rotate(6deg) } 30%{ transform:rotate(-4deg) } 40%{ transform:rotate(2deg) } 50%{ transform:rotate(0deg) } }
.roadmap-item .meta{ font-weight:700; margin-top:6px; text-align:center; }
.roadmap-item .hint{ color: var(--accent-dark); font-size:.85rem; font-weight:700; margin-top:4px; text-align:center; }

/* === 縦並びボタン用（中央揃え・1列） === */
.actions.column{ display:flex; flex-direction: column; align-items: center; gap:10px; margin-top:12px; }

/* ==============================
   危険予測：スマホで「文章の下に○×」配置
   （通常問題には影響しない）
============================== */

/* 行そのものをカードっぽく */
.quiz-panel .quiz-row{
  border-radius:16px;
  padding:10px;
}
.quiz-panel .quiz-row + .quiz-row{ margin-top:10px; }

/* 行内に .judge がある場合だけ(危険予測の小問)に適用 */
.quiz-panel .quiz-row .judge{
  /* デフォルト（PC/タブレット）は右側並びのまま */
}

/* ○×を少し小さめに（危険予測だけ） */
.quiz-panel .quiz-row .judge .judge-btn{
  width:82px; height:82px; border-width:5px;
}
@media (max-width: 540px){
  /* スマホ：文章の下に○×を回り込ませる */
  .quiz-panel .quiz-row{
    display:flex;
    flex-wrap: wrap;
    align-items:flex-start;
    row-gap:10px;
    background:#fffaf2;                   /* うすいベージュ背景 */
    box-shadow: inset 0 0 0 2px #ffe8cc;  /* うすい枠 */
  }
  .quiz-panel .quiz-row > :nth-child(1){  /* (1)(2)(3)ラベル */
    min-width:2.4em;
    margin-top:.2em;
  }
  .quiz-panel .quiz-row > :nth-child(2){  /* 文章 */
    flex:1 1 100%;
    line-height:1.7;
  }
  .quiz-panel .quiz-row > .judge{         /* ○× */
    order:3;
    width:100%;
    justify-content:space-evenly;
    gap:18px;
    margin-top:4px;
  }
  .quiz-panel .quiz-row .judge .judge-btn{
    width:72px; height:72px; border-width:5px;
  }
}

/* 選択済みの行を淡色ハイライト（JS側で行に .picked-set が付く想定） */
.quiz-panel .quiz-row.picked-set{
  background:#fffaf2;
  box-shadow: inset 0 0 0 2px #ffe1bf;
}

/* 選択した側のリング（既存仕様を強調） */
.judge-btn.is-selected{
  transform: scale(0.96);
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(0,0,0,0.06);
}
.judge-btn.ok.is-selected{ box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(39,194,162,.35); }
.judge-btn.ng.is-selected{ box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(255,107,94,.35); }