/* ====================================================
   はばタン英単語カードゲーム — style.css
   ==================================================== */
:root {
  --sky : #5bb8f5; --sky2: #87d4f7;
  --sun : #FFD93D; --coral: #FF6B6B;
  --text: #1e293b; --text-light: #64748b;
  --radius: 16px;
  --ch-color: #27ae60;
}
* { margin:0; padding:0; box-sizing:border-box;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
body { font-family:'Nunito',sans-serif; background:#1a1a2e;
       overflow:hidden; height:100vh; width:100vw; }
.screen { position:absolute; inset:0; display:none;
          flex-direction:column; align-items:center; overflow:hidden; }
.screen.active { display:flex; }

/* ── LOADING ── */
#s-loading { background:linear-gradient(180deg,#1a6fc4,#5bb8f5);
             justify-content:center; align-items:center; }
.spinner { width:44px; height:44px; border:4px solid rgba(255,255,255,.2);
           border-top-color:#fff; border-radius:50%;
           animation:spin .8s linear infinite; margin-bottom:16px; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { color:#fff; font-family:'Baloo 2',cursive; font-size:1.15rem; }
.loading-sub   { color:rgba(255,255,255,.6); font-size:.8rem; margin-top:4px; }

/* ── TITLE ── */
#s-title { background:linear-gradient(180deg,#1a6fc4 0%,#5bb8f5 50%,#87d4f7 100%);
           justify-content:center; }
.title-sun  { position:absolute; top:-30px; right:-30px; width:160px; height:160px;
              background:radial-gradient(circle,#FFD93D,#FFA500); border-radius:50%;
              box-shadow:0 0 60px 20px rgba(255,217,61,.5);
              animation:sunpulse 3s ease-in-out infinite; }
@keyframes sunpulse { 0%,100% { box-shadow:0 0 60px 20px rgba(255,217,61,.5); }
                       50%  { box-shadow:0 0 80px 30px rgba(255,217,61,.7); } }
.title-cloud { position:absolute; background:rgba(255,255,255,.85); border-radius:50px; }
.title-cloud.c1 { width:120px; height:45px; top:80px; left:-20px;
                  animation:driftR 8s ease-in-out infinite; }
.title-cloud.c2 { width:90px;  height:35px; top:140px; right:10px;
                  animation:driftL 10s ease-in-out infinite; }
@keyframes driftR { 0%,100%{transform:translateX(0)} 50%{transform:translateX(20px)} }
@keyframes driftL { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-15px)} }
.title-box { text-align:center; z-index:1; padding:20px; }
.title-haba-img { width:110px; height:auto; display:block; margin:0 auto 8px;
                  animation:habaBounce 1s ease-in-out infinite alternate;
                  filter:drop-shadow(0 8px 16px rgba(0,0,0,.25)); }
@keyframes habaBounce { 0%{transform:translateY(0) rotate(-4deg)} 100%{transform:translateY(-12px) rotate(4deg)} }
.title-logo  { font-family:'Baloo 2',cursive; font-size:2rem; color:#fff;
               text-shadow:3px 3px 0 rgba(0,0,0,.15); line-height:1.1; margin-bottom:2px; }
.title-sub   { color:rgba(255,255,255,.85); font-size:.82rem; font-weight:700;
               letter-spacing:1px; margin-bottom:4px; }
.title-count { color:rgba(255,255,255,.7); font-size:.72rem; font-weight:700; margin-bottom:18px; }
.title-credit{ color:rgba(255,255,255,.45); font-size:.58rem; margin-top:10px; }
.btn-start { display:block; color:#fff; font-family:'Baloo 2',cursive;
             font-size:1.15rem; font-weight:800; padding:14px 44px;
             border-radius:99px; border:none; cursor:pointer; margin:8px auto;
             transition:transform .15s; }
.btn-start:active { transform:scale(.95); }
.btn-start.yellow { background:linear-gradient(135deg,#FFD93D,#FFA500);
                    box-shadow:0 6px 20px rgba(255,165,0,.5),0 0 0 3px rgba(255,255,255,.25); }
.btn-start.green  { background:linear-gradient(135deg,#27ae60,#2ecc71);
                    box-shadow:0 6px 20px rgba(39,174,96,.5); }
.title-grass { position:absolute; bottom:0; left:0; right:0; height:80px;
               background:linear-gradient(180deg,#4caf50,#388e3c);
               border-radius:60% 60% 0 0/30% 30% 0 0; }

/* ── COMMON HEADER ── */
.screen-hd { width:100%; padding:12px 16px; display:flex;
             align-items:center; gap:10px; flex-shrink:0; }
.btn-back { background:rgba(255,255,255,.25); border:none; border-radius:12px;
            width:40px; height:40px; font-size:1.1rem; cursor:pointer; color:#fff;
            display:flex; align-items:center; justify-content:center; font-weight:900; }
.hd-title { font-family:'Baloo 2',cursive; font-size:1.1rem; color:#fff;
            text-shadow:1px 1px 0 rgba(0,0,0,.1); flex:1; }
.hd-right { color:rgba(255,255,255,.8); font-size:.78rem; font-weight:800; }

/* ═══════════════════════════════════════════
   WORLD MAP
═══════════════════════════════════════════ */
#s-map { background:linear-gradient(180deg,#0d1117,#161b22); }

.map-hd { width:100%; padding:14px 16px 8px;
          background:linear-gradient(135deg,#1a6fc4,#1565c0); flex-shrink:0; }
.map-hd-row1 { display:flex; align-items:center; gap:10px; }
.map-hd-title { font-family:'Baloo 2',cursive; font-size:1.3rem; color:#fff; flex:1; }
.map-lv { background:rgba(255,255,255,.2); border-radius:99px; padding:4px 12px;
          color:#FFD93D; font-size:.78rem; font-weight:900; }
.map-prog-wrap { margin-top:8px; }
.map-total-text { font-size:.72rem; color:rgba(255,255,255,.7);
                  font-weight:700; margin-bottom:4px; }
.map-total-bar  { background:rgba(255,255,255,.15); border-radius:99px; height:7px; }
.map-total-fill { height:100%; background:linear-gradient(90deg,#FFD93D,#FF8C00);
                  border-radius:99px; transition:width .4s ease; }

.map-scroll { flex:1; overflow-y:auto; padding:8px 14px 24px; width:100%;
              -webkit-overflow-scrolling:touch; }

/* チャプターラベル */
.map-chapter-label { grid-column:1/-1; width:100%; padding:8px 14px; margin:6px 0 2px;
                     border-radius:12px; font-family:'Baloo 2',cursive; font-size:.85rem;
                     font-weight:800; color:#fff; letter-spacing:.5px; }

/* ワールドカードグリッド */
#mapGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ワールドカード */
.map-world-card { border-radius:var(--radius); padding:14px 12px; cursor:pointer;
                  transition:transform .15s; border:1.5px solid rgba(255,255,255,.08);
                  background:#1c2128; position:relative; }
.map-world-card.unlocked { border-color:rgba(var(--ch-rgb,39,174,96),.4); }
.map-world-card.unlocked:active { transform:scale(.96); }
.map-world-card.locked { opacity:.55; cursor:default; }
.map-world-card.perfect { border-color:#FFD700;
  box-shadow:0 0 12px rgba(255,215,0,.3); }

.mwc-head { display:flex; align-items:center; justify-content:space-between;
            margin-bottom:4px; }
.mwc-emoji { font-size:1.8rem; }
.mwc-id    { font-family:'Baloo 2',cursive; font-size:.7rem; font-weight:800;
             color:rgba(255,255,255,.4); letter-spacing:.5px; }
.mwc-crown { font-size:.95rem; }
.mwc-theme { font-family:'Baloo 2',cursive; font-size:.78rem; color:rgba(255,255,255,.85);
             line-height:1.3; margin-bottom:8px; }
.mwc-prog  { display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mwc-prog-bar  { flex:1; height:7px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; }
.mwc-prog-fill { height:100%; border-radius:99px; transition:width .5s ease;
                 background:linear-gradient(90deg,var(--ch-color),color-mix(in srgb,var(--ch-color) 60%,white)); }
.mwc-prog-text { font-size:.65rem; font-weight:900; color:rgba(255,255,255,.6);
                 white-space:nowrap; }
.mwc-stars { display:flex; gap:2px; }
.map-star  { font-size:.75rem; color:rgba(255,255,255,.18); }
.map-star.on { color:#FFD93D; }
.mwc-lock  { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
             font-size:2rem; opacity:.4; }

/* ═══════════════════════════════════════════
   STAGE SELECT
═══════════════════════════════════════════ */
#s-stage { background:linear-gradient(180deg,#0d1117,#161b22); }

.stage-hd { width:100%; padding:14px 16px; flex-shrink:0; }
.stage-hd-inner { display:flex; align-items:center; gap:12px; }
.stage-hd-emoji { font-size:2.2rem; }
.stage-hd-info  { flex:1; }
.stage-hd-id    { font-family:'Baloo 2',cursive; font-size:1.1rem; color:#fff; }
.stage-hd-theme { font-size:.78rem; color:rgba(255,255,255,.7); font-weight:700; margin-top:1px; }
.stage-hd-prog  { font-size:.7rem; color:rgba(255,255,255,.5); margin-top:3px; }

/* ステージパス */
.stage-path-wrap { flex:1; overflow-y:auto; width:100%; padding:0 12px;
                   -webkit-overflow-scrolling:touch; }
.stage-row { display:flex; align-items:center; justify-content:space-evenly;
             padding:12px 8px; }
.stage-row.row-rtl { flex-direction:row-reverse; }

.stage-node-wrap { display:flex; align-items:center; justify-content:center; }

/* ステージノード */
.stage-node { width:56px; height:56px; border-radius:50%; border:2px solid rgba(255,255,255,.15);
              background:#1c2128; color:rgba(255,255,255,.3); font-family:'Baloo 2',cursive;
              font-size:1.1rem; cursor:default; display:flex; flex-direction:column;
              align-items:center; justify-content:center; position:relative;
              flex-shrink:0; transition:transform .15s; overflow:hidden; }
.stage-node.available { background:var(--ch-color);
  border-color:rgba(255,255,255,.4); color:#fff; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4); }
.stage-node.available:active { transform:scale(.92); }
.stage-node.cleared  { background:linear-gradient(135deg,#FFD700,#FFA500);
  border-color:rgba(255,255,255,.6); color:#fff; cursor:pointer;
  box-shadow:0 4px 16px rgba(255,165,0,.4); }
.stage-node.cleared:active { transform:scale(.92); }
.stage-node.selected { box-shadow:0 0 0 3px #fff, 0 4px 16px rgba(0,0,0,.5); }
.sn-num   { font-size:1rem; line-height:1; }
.sn-star  { font-size:.65rem; }
.sn-score-bar { position:absolute; bottom:0; left:0; right:0; height:4px;
                background:rgba(255,255,255,.15); }
.sn-score-fill { height:100%; background:rgba(255,255,255,.6); transition:width .4s; }

/* ステージプレビュー */
.stage-preview { background:#1c2128; border-radius:var(--radius); margin:0 12px;
                 padding:14px 16px; flex-shrink:0; border:1px solid rgba(255,255,255,.08); }
.preview-stage-no { font-family:'Baloo 2',cursive; font-size:.95rem; color:#fff;
                    margin-bottom:4px; }
.preview-words { font-size:.72rem; color:rgba(255,255,255,.55); line-height:1.6;
                 margin-bottom:6px; word-break:break-all; }
.preview-score { font-size:.7rem; color:rgba(255,255,255,.4); margin-bottom:10px; }
.btn-start-stage { width:100%; padding:14px; background:linear-gradient(135deg,#27ae60,#2ecc71);
                   color:#fff; font-family:'Baloo 2',cursive; font-size:1.05rem;
                   font-weight:800; border:none; border-radius:14px; cursor:pointer;
                   box-shadow:0 4px 14px rgba(39,174,96,.4); transition:transform .15s; }
.btn-start-stage:active { transform:scale(.97); }
.btn-start-stage:disabled { background:#2d3748; color:rgba(255,255,255,.3);
                             box-shadow:none; cursor:default; }

/* ═══════════════════════════════════════════
   CLOUD GAME
═══════════════════════════════════════════ */
#s-cloud { background:linear-gradient(180deg,#1565c0 0%,#5bb8f5 70%,#81c784 100%); }
.cloud-stage-label { font-size:.75rem; font-weight:800; color:rgba(255,255,255,.8);
                     margin-left:auto; }
#cloudCanvas { display:block; touch-action:none; cursor:grab; flex:1; }
#cloudCanvas:active { cursor:grabbing; }
.cloud-shots { display:flex; gap:8px; padding:6px 20px;
               justify-content:center; flex-shrink:0; }
.shot-icon { font-size:1.5rem; transition:opacity .3s; }
.shot-icon.used { opacity:.25; }
.cloud-hint { background:transparent; border-radius:12px; margin:0 16px 4px;
              padding:4px 14px; display:flex; justify-content:center;
              gap:5px; flex-wrap:wrap; flex-shrink:0; min-height:0; }
.cloud-hint:empty { display:none; }
.hl { width:32px; height:36px; background:white; border:2px solid #e2e8f0;
      border-radius:8px; display:flex; align-items:center; justify-content:center;
      font-family:'Baloo 2',cursive; font-size:1.1rem; font-weight:800;
      color:var(--text); transition:all .3s; }
.hl.revealed { border-color:var(--sun); background:rgba(255,217,61,.12); }
.hl.blank    { color:transparent; }
.btn-cloud-go { width:calc(100% - 28px); margin:0 14px 12px; padding:13px;
                background:linear-gradient(135deg,#FFD93D,#FFA500); color:#fff;
                font-family:'Baloo 2',cursive; font-size:1.05rem; font-weight:800;
                border:none; border-radius:14px; cursor:pointer;
                box-shadow:0 4px 12px rgba(255,165,0,.4); display:block;
                flex-shrink:0; }
.btn-cloud-go.show { display:block; }

/* ═══════════════════════════════════════════
   GAME (QUIZ)
═══════════════════════════════════════════ */
#s-game { background:linear-gradient(180deg,#1a6fc4,#5bb8f5); }

.game-hd { width:100%; padding:10px 16px; display:flex; align-items:center;
           gap:10px; flex-shrink:0; }
.game-stage-title { font-family:'Baloo 2',cursive; font-size:1rem; color:#fff; flex:1; }
.game-progress { background:rgba(255,255,255,.25); border-radius:99px;
                 padding:4px 12px; color:#fff; font-size:.75rem; font-weight:800; }

.quiz-card { background:white; border-radius:22px; margin:10px 14px;
             padding:18px 16px; box-shadow:0 8px 30px rgba(0,0,0,.12);
             flex-shrink:0; }
.qtag { display:inline-block; border-radius:99px; padding:3px 12px;
        font-size:.68rem; font-weight:800; text-transform:uppercase;
        letter-spacing:1px; margin-bottom:10px; }
.qtag.blue   { background:rgba(91,184,245,.15); border:1.5px solid rgba(91,184,245,.4); color:#5bb8f5; }
.qtag.green  { background:rgba(39,174,96,.15);  border:1.5px solid rgba(39,174,96,.4);  color:#27ae60; }
.qtag.red    { background:rgba(231,76,60,.15);  border:1.5px solid rgba(231,76,60,.4);  color:#e74c3c; }
.qtag.purple { background:rgba(155,89,182,.15); border:1.5px solid rgba(155,89,182,.4); color:#9b59b6; }
.quiz-word-primary { font-family:'Baloo 2',cursive; font-size:1.9rem;
                     color:var(--text); line-height:1.1; margin-bottom:4px; }
.quiz-sub { font-size:.8rem; color:var(--text-light); font-weight:700; margin-bottom:4px; }
.quiz-sentence { font-size:.9rem; line-height:1.7; background:#f8fafc;
                 border-radius:10px; padding:10px 14px; margin:8px 0;
                 font-weight:700; color:var(--text); }
.blank { display:inline-block; border-bottom:3px solid #5bb8f5;
         padding:0 8px; color:#5bb8f5; font-weight:900; }
.hint-box { display:inline-flex; align-items:center; justify-content:center;
            width:34px; height:38px; background:#f1f5f9; border:2px solid #cbd5e1;
            border-radius:8px; font-family:'Baloo 2',cursive; font-size:1.15rem;
            font-weight:800; color:var(--text); margin:2px; }
.hint-box.revealed { border-color:#FFD93D; background:rgba(255,217,61,.12); }

.choices { display:grid; gap:9px; padding:0 14px 12px; }
.choices.cols2 { grid-template-columns:1fr 1fr; }
.choices.cols1 { grid-template-columns:1fr; }
.cbtn { background:white; border:2px solid #e2e8f0; border-radius:13px;
        padding:14px 12px; font-family:'Nunito',sans-serif; font-weight:800;
        font-size:.9rem; color:var(--text); cursor:pointer; transition:all .15s;
        line-height:1.35; text-align:left; }
.cbtn:hover   { border-color:#93c5fd; background:#eff6ff; }
.cbtn:active  { transform:scale(.96); }
.cbtn.correct { background:#f0fdf4; border-color:#27ae60; color:#166534; }
.cbtn.wrong   { background:#fff1f2; border-color:#e74c3c; color:#9f1239; }
.cbtn.locked  { cursor:default; pointer-events:none; }

.feedback { margin:0 14px; border-radius:13px; padding:12px 14px;
            display:none; align-items:flex-start; gap:10px; margin-bottom:8px; }
.feedback.show { display:flex; }
.feedback.ok { background:#f0fdf4; border:1.5px solid #86efac; }
.feedback.ng { background:#fff1f2; border:1.5px solid #fca5a5; }
.fb-icon  { font-size:1.3rem; flex-shrink:0; }
.fb-body  { flex:1; }
.fb-title { font-weight:900; font-size:.88rem; }
.fb-detail { font-size:.75rem; color:var(--text-light); margin-top:2px;
             line-height:1.5; white-space:pre-wrap; }
.btn-next { width:calc(100% - 28px); margin:0 14px 14px; padding:14px;
            background:linear-gradient(135deg,#2980b9,#3498db); color:#fff;
            font-family:'Baloo 2',cursive; font-size:1.05rem; font-weight:800;
            border:none; border-radius:14px; cursor:pointer;
            box-shadow:0 4px 14px rgba(52,152,219,.4); display:none; }
.btn-next.show { display:block; }

/* ═══════════════════════════════════════════
   STAGE RESULT
═══════════════════════════════════════════ */
#s-stage-result { background:linear-gradient(180deg,#0d1117,#161b22); overflow-y:auto; }

.sr-body { padding:20px 16px 32px; width:100%; max-width:480px; margin:0 auto; }
.sr-world-label { font-family:'Baloo 2',cursive; font-size:1rem; color:rgba(255,255,255,.7);
                  margin-bottom:8px; }
.sr-score-row   { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.sr-score-big   { font-family:'Baloo 2',cursive; font-size:3rem; color:#FFD93D;
                  line-height:1; flex-shrink:0; }
.sr-score-sub   { font-size:.75rem; color:rgba(255,255,255,.5); font-weight:700; }
.sr-score-bar   { background:rgba(255,255,255,.1); border-radius:99px; height:10px;
                  overflow:hidden; margin-bottom:4px; }
.sr-score-fill  { height:100%; background:linear-gradient(90deg,#27ae60,#2ecc71);
                  border-radius:99px; transition:width .6s ease; }
.sr-cleared-badge { display:inline-block; border-radius:99px; padding:6px 18px;
                    font-family:'Baloo 2',cursive; font-size:1rem; font-weight:800;
                    margin-bottom:16px; }
.sr-cleared-badge.cleared { background:linear-gradient(135deg,#FFD700,#FFA500); color:#fff;
  box-shadow:0 4px 16px rgba(255,165,0,.4); }
.sr-cleared-badge.failed  { background:rgba(255,255,255,.08); color:rgba(255,255,255,.6); }

.sr-word-list { background:rgba(255,255,255,.05); border-radius:var(--radius);
                overflow:hidden; margin-bottom:20px; }
.sr-word-row  { display:flex; align-items:center; gap:10px; padding:10px 14px;
                border-bottom:1px solid rgba(255,255,255,.06); }
.sr-word-row:last-child { border-bottom:none; }
.sr-icon { font-size:1rem; flex-shrink:0; }
.sr-en   { font-family:'Baloo 2',cursive; font-size:.95rem; flex:1; }
.sr-word-row.ok .sr-en { color:#2ecc71; }
.sr-word-row.ng .sr-en { color:rgba(255,255,255,.5); }
.sr-ja   { font-size:.75rem; color:rgba(255,255,255,.5); font-weight:700; }

.sr-btns { display:flex; flex-direction:column; gap:10px; }
.btn-sr { width:100%; padding:15px; border-radius:14px; border:none;
          font-family:'Baloo 2',cursive; font-size:1.05rem; font-weight:800;
          cursor:pointer; transition:transform .15s; }
.btn-sr:active { transform:scale(.97); }
.btn-sr.p  { background:linear-gradient(135deg,#FFD93D,#FFA500); color:#fff;
             box-shadow:0 4px 16px rgba(255,165,0,.4); }
.btn-sr.b  { background:linear-gradient(135deg,#27ae60,#2ecc71); color:#fff;
             box-shadow:0 4px 16px rgba(39,174,96,.4); }
.btn-sr.s  { background:rgba(255,255,255,.1); color:rgba(255,255,255,.8);
             border:1.5px solid rgba(255,255,255,.2); }

/* ── SHARED ── */
.btn-wide { width:calc(100% - 28px); margin:0 14px 10px; padding:14px;
            border-radius:14px; border:none; font-family:'Baloo 2',cursive;
            font-size:1.05rem; font-weight:800; cursor:pointer; transition:transform .15s; }
.btn-wide:active  { transform:scale(.97); }
.btn-wide.blue    { background:linear-gradient(135deg,#2980b9,#3498db); color:#fff;
                    box-shadow:0 4px 14px rgba(52,152,219,.4); }
.btn-wide.green   { background:linear-gradient(135deg,#27ae60,#2ecc71); color:#fff;
                    box-shadow:0 4px 14px rgba(39,174,96,.4); }

/* ═══════════════════════════════════════════
   WORD-PHASE BAR（雲 + クイズ画面共通）
═══════════════════════════════════════════ */
.word-phase-bar { width:100%; padding:4px 14px 6px;
                  display:flex; align-items:center; gap:10px;
                  flex-shrink:0; background:rgba(0,0,0,.18); }
.word-progress  { font-size:.72rem; font-weight:900; color:rgba(255,255,255,.8);
                  white-space:nowrap; }
.phase-steps    { display:flex; gap:4px; align-items:center; flex:1; justify-content:flex-end; }
.phase-step     { display:flex; align-items:center; justify-content:center;
                  min-width:36px; height:24px; border-radius:99px;
                  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
                  font-size:.68rem; font-weight:800; color:rgba(255,255,255,.35);
                  transition:all .25s; padding:0 6px; }
.phase-step.active { background:rgba(255,255,255,.9); color:#1a1a2e;
                     border-color:#fff; }
.phase-step.done   { background:rgba(255,215,0,.35); color:#FFD700;
                     border-color:rgba(255,215,0,.5); }

/* ═══════════════════════════════════════════
   CARD GET
═══════════════════════════════════════════ */
.cg-sparkle  { text-align:center; font-size:2.2rem; margin-top:14px;
               animation:sparkle 1s ease infinite alternate; flex-shrink:0; }
@keyframes sparkle { 0%{transform:scale(1)} 100%{transform:scale(1.1)} }
.cg-title    { font-family:'Baloo 2',cursive; font-size:1.7rem; color:#fff;
               text-align:center; text-shadow:0 0 20px rgba(255,217,61,.5);
               flex-shrink:0; }
.cg-next-label { text-align:center; color:rgba(255,255,255,.55); font-size:.8rem;
                 font-weight:800; margin-top:4px; flex-shrink:0; }
.btn-cg-ok   { display:block; background:linear-gradient(135deg,#FFD93D,#FFA500);
               color:#fff; font-family:'Baloo 2',cursive; font-size:1.1rem;
               font-weight:800; padding:13px 36px; border-radius:99px; border:none;
               cursor:pointer; margin:8px auto 16px;
               box-shadow:0 6px 20px rgba(255,165,0,.4); flex-shrink:0; }

/* 縦長カード (5:7) */
.card-wrap  { width:min(180px,50vw); margin:8px auto; flex-shrink:0; }
.card-body  { width:100%; aspect-ratio:5/7; border-radius:14px; overflow:hidden;
              display:flex; flex-direction:column;
              box-shadow:0 12px 40px rgba(0,0,0,.4);
              animation:cardFloat 3s ease-in-out infinite; }
@keyframes cardFloat { 0%,100%{transform:rotateY(0) translateY(0)}
                        25%{transform:rotateY(6deg) translateY(-6px)}
                        75%{transform:rotateY(-6deg) translateY(-3px)} }
/* stage0: ノーマル — ブロンズ（銅メダル） */
.card-body.stage0 {
  background:linear-gradient(160deg,#3d1c02 0%,#7b3f10 50%,#4a1f05 100%);
  border:2px solid #cd7f32;
  box-shadow:0 0 12px rgba(205,127,50,.35), 0 12px 40px rgba(0,0,0,.4);
}
.stage0 .card-top-bar  { background:rgba(205,127,50,.25); border-bottom:1px solid rgba(205,127,50,.4); }
.stage0 .card-pos-label { color:rgba(255,200,140,.75); }
.stage0 .card-stage-badge { color:#e8a96a; }
.stage0 .card-en-area  { background:rgba(0,0,0,.18); }
.stage0 .card-en       { color:#f5c992; }
.stage0 .card-illust-area { background:rgba(0,0,0,.15); border-color:rgba(205,127,50,.3); }
.stage0 .card-foot     { background:rgba(0,0,0,.22); }
.stage0 .card-ja       { color:#f0d4b0; }
.stage0 .card-ex       { color:rgba(240,200,160,.6); }
.card-word-large {
  font-family:'Baloo 2',cursive;
  font-size:clamp(1.1rem, 6vw, 2.2rem);
  font-weight:900;
  text-align:center;
  word-break:break-all;
  padding:4px 8px;
  line-height:1.2;
  letter-spacing:-0.5px;
}
.stage0 .card-word-large { color:#f5c992; }

/* stage1: レア — シルバー（銀メダル） */
.card-body.stage1 {
  background:linear-gradient(160deg,#2a2a2e 0%,#4a4a55 50%,#1e1e24 100%);
  border:2px solid #c0c0c0;
  box-shadow:0 0 16px rgba(192,192,192,.4), 0 12px 40px rgba(0,0,0,.45);
}
.stage1 .card-top-bar  { background:rgba(192,192,192,.18); border-bottom:1px solid rgba(192,192,192,.4); }
.stage1 .card-pos-label { color:rgba(220,220,240,.7); }
.stage1 .card-stage-badge { color:#d8d8e8; }
.stage1 .card-en-area  { background:rgba(0,0,0,.2); }
.stage1 .card-en       { color:#e8e8f5; }
.stage1 .card-illust-area { background:rgba(192,192,192,.08); border-color:rgba(192,192,192,.25); }
.stage1 .card-foot     { background:rgba(0,0,0,.25); }
.stage1 .card-ja       { color:#e0e0f0; }
.stage1 .card-ex       { color:rgba(220,220,240,.6); }
.stage1 .card-word-large { color:#e8e8f5; }

/* stage2: 伝説 — ゴールド（金メダル） */
.card-body.stage2 {
  background:linear-gradient(160deg,#3a2800 0%,#7a5500 45%,#2c1e00 100%);
  border:2px solid #FFD700;
  box-shadow:0 0 28px rgba(255,215,0,.6), 0 12px 40px rgba(0,0,0,.5);
}
.stage2 .card-top-bar  { background:rgba(255,215,0,.2); border-bottom:1px solid rgba(255,215,0,.45); }
.stage2 .card-pos-label { color:rgba(255,230,100,.75); }
.stage2 .card-stage-badge { color:#FFD700; }
.stage2 .card-en-area  { background:rgba(0,0,0,.2); }
.stage2 .card-en       { color:#FFE55C; text-shadow:0 0 12px rgba(255,215,0,.6); }
.stage2 .card-illust-area { background:rgba(255,215,0,.07); border-color:rgba(255,215,0,.3); }
.stage2 .card-foot     { background:rgba(0,0,0,.28); }
.stage2 .card-ja       { color:#fff5cc; }
.stage2 .card-ex       { color:rgba(255,235,180,.6); }
.stage2 .card-word-large { color:#FFE55C; text-shadow:0 0 10px rgba(255,215,0,.5); }
/* カード共通パーツ */
.card-top-bar    { display:flex; justify-content:space-between; align-items:center;
                   padding:4px 9px; flex:0 0 auto; }
.card-pos-label  { font-size:.58rem; font-weight:900; }
.card-stage-badge{ font-size:.58rem; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
.card-en-area    { padding:5px 10px 3px; flex:0 0 auto; }
.card-en         { font-family:'Baloo 2',cursive; font-size:1.5rem; font-weight:800; line-height:1.1; }
.card-illust-area{ flex:1; display:flex; align-items:center; justify-content:center;
                   min-height:36px; border-top-width:1px; border-bottom-width:1px;
                   border-style:solid; border-color:transparent; }
.illust-ph       { font-size:.6rem; text-align:center; padding:6px; line-height:1.5; }
.card-foot       { padding:5px 10px 7px; flex:0 0 auto; }
.card-ja         { font-size:.88rem; font-weight:900; margin-bottom:2px; }
.card-ex         { font-size:.55rem; font-style:italic; line-height:1.5; }

/* ステージ結果: 3アイコン列 */
.sr-quiz-icons { display:flex; gap:1px; flex-shrink:0; font-size:.75rem; }
.sr-card       { font-size:.85rem; margin-left:auto; flex-shrink:0; }

/* ═══════════════════════════════════════════
   EXTRA CHALLENGE
═══════════════════════════════════════════ */
.extra-desc { text-align:center; color:rgba(255,255,255,.9); font-size:.83rem;
              font-weight:700; padding:0 20px 8px; flex-shrink:0; }

/* ═══════════════════════════════════════════
   EVOLVE
═══════════════════════════════════════════ */
.evo-title { font-family:'Baloo 2',cursive; font-size:1.9rem; color:#FFD93D;
             text-align:center; margin-bottom:6px;
             text-shadow:0 0 30px rgba(255,217,61,.6); z-index:1; }
.evo-sub   { color:rgba(255,255,255,.7); font-size:.88rem; text-align:center;
             margin-bottom:16px; z-index:1; }
.evo-anim  { display:flex; align-items:center; justify-content:center;
             gap:16px; margin:16px 0; z-index:1; }
.evo-card  { background:rgba(255,255,255,.08); border-radius:14px;
             padding:14px 20px; text-align:center;
             border:2px solid rgba(255,255,255,.1); }
.evo-arrow { font-size:2rem; z-index:1;
             animation:evo-pulse .5s ease-in-out infinite alternate; }
@keyframes evo-pulse { 0%{transform:scale(1)} 100%{transform:scale(1.3)} }
.evo-word  { font-family:'Baloo 2',cursive; font-size:1.4rem; color:#93c5fd; }
.evo-icon  { font-size:2.4rem; }
.evo-stage { font-size:.68rem; font-weight:900; text-transform:uppercase;
             letter-spacing:1.5px; margin-top:4px; }
.s-basic   { color:#94a3b8; }
.s-rare    { color:#93c5fd; }
.s-legend  { color:#FFD93D; }
.btn-evo-ok{ display:block; background:linear-gradient(135deg,#FFD93D,#FFA500);
             color:#fff; font-family:'Baloo 2',cursive; font-size:1.15rem;
             font-weight:800; padding:14px 36px; border-radius:99px; border:none;
             cursor:pointer; margin:16px auto;
             box-shadow:0 6px 20px rgba(255,165,0,.5); z-index:1; }
.particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.particle  { position:absolute; border-radius:50%;
             animation:particle-fly linear forwards; }
@keyframes particle-fly {
  0%   { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:0; transform:translateY(-300px) scale(0); }
}

/* チャプターロック時のヒント */
.mwc-lock { position:absolute; inset:0; display:flex; flex-direction:column;
            align-items:center; justify-content:center;
            background:rgba(0,0,0,.45); border-radius:inherit; }
.mwc-lock-hint { font-size:.6rem; font-weight:800; color:rgba(255,255,255,.7);
                 text-align:center; margin-top:4px; line-height:1.4; }



/* ═══════════════════════════════════════════
   図鑑（カードギャラリー）
═══════════════════════════════════════════ */
/* フィルタータブ */
.zukan-tabs { display:flex; gap:6px; padding:10px 14px 6px;
              flex-shrink:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ztab { background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.15);
        border-radius:99px; padding:6px 14px; color:rgba(255,255,255,.6);
        font-family:'Baloo 2',cursive; font-size:.78rem; font-weight:800;
        cursor:pointer; white-space:nowrap; flex-shrink:0; }
.ztab.active { background:rgba(255,255,255,.9); color:#1a1a2e;
               border-color:transparent; }

/* スクロール領域 */
.zukan-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
                padding:4px 12px 24px; width:100%; }

/* ワールドセクション */
.zukan-section { margin-bottom:24px; }
.zukan-section-hd { display:flex; align-items:center; gap:8px;
                    padding:6px 4px 10px; }
.zukan-world-emoji { font-size:1.3rem; }
.zukan-world-name  { font-family:'Baloo 2',cursive; font-size:.85rem;
                     color:rgba(255,255,255,.85); flex:1; }
.zukan-world-count { font-size:.72rem; font-weight:900;
                     color:rgba(255,255,255,.4); }

/* カードグリッド（2列・縦長カードに合わせる） */
.zukan-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }

/* カードラッパー（card-body を収める） */
.zukan-card-wrap { width:100%; }
.zukan-card-wrap .card-body {
  width:100%; aspect-ratio:5/7; border-radius:12px;
  animation:none; /* 図鑑ではアニメなし */
}
/* 図鑑では英語フォントを少し小さめに */
.zukan-card-wrap .card-en { font-size:1.1rem; }
.zukan-card-wrap .card-ja { font-size:.75rem; }
.zukan-card-wrap .card-ex { font-size:.5rem; }

/* 未取得：カード裏面デザイン */
.zk-back { background:linear-gradient(135deg,#1c2128,#2d3748) !important;
           border:2px solid rgba(255,255,255,.12) !important; }
.zk-back-inner { display:flex; flex-direction:column; align-items:center;
                 justify-content:center; height:100%; gap:6px; }
.zk-back-icon  { font-size:2rem; color:rgba(255,255,255,.15); font-weight:900; }
.zk-back-label { font-size:.65rem; color:rgba(255,255,255,.2); font-weight:800; }

/* 空メッセージ */
.zukan-empty { color:rgba(255,255,255,.4); text-align:center;
               padding:48px 20px; font-size:.88rem; font-weight:700; }

/* ── UFOゲーム用ヒントエリア（単語表示時のみ高さを確保） ── */
#s-cloud .cloud-hint:not(:empty) {
  min-height: 36px;
  align-items: center;
}

/* 雲ゲーム終了ポップアップ */
@keyframes popupIn {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.7); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); }
}