/* =====================================================
   ポメせんせいの九九道場 — style.css
   カラーパレット:
     ピンク  : #ff8fab
     黄色   : #ffd166
     背景   : #fff5f8
     テキスト: #5a3e4b
   ===================================================== */

/* ---------- リセット & ベース ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── タッチ操作: ダブルタップズーム遅延を全ボタンで排除 ──
   44px 以上の当たり判定を button 全体に保証する               */
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* 最低タップサイズ保証（iOS HIG / Material Design 基準） */
  min-height: 44px;
  min-width:  44px;
}

/* アンカー・ラベルもタップ遅延なし */
a, label, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── 全ボタン共通 :active フィードバック（個別定義がない場合のフォールバック） ──
   translateY(2px) で「沈む」感覚 + brightness 低下で「暗くなる」感覚        */
button:active {
  filter: brightness(0.88);
  transform: translateY(2px) scale(0.97);
  transition: filter 0s, transform 0s; /* 即座に反応 */
}

:root {
  --pink:        #ff8fab;
  --pink-light:  #ffc8d8;
  --pink-dark:   #e8607a;
  --yellow:      #ffd166;
  --yellow-light:#fff0b3;
  --yellow-dark: #f5b800;
  --bg:          #fff5f8;
  --bg-card:     #ffffff;
  --text:        #5a3e4b;
  --text-muted:  #a07880;
  --correct:     #06d6a0;
  --wrong:       #ef476f;
  --shadow:      0 4px 16px rgba(255, 143, 171, 0.25);
  --radius:      16px;
  --radius-sm:   10px;
  --font-main:   'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', 'Rounded Mplus 1c', sans-serif;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2rem;
  /* 背景に水玉模様 */
  background-image:
    radial-gradient(circle, var(--pink-light) 1px, transparent 1px),
    radial-gradient(circle, var(--yellow-light) 1px, transparent 1px);
  background-size: 40px 40px, 60px 60px;
  background-position: 0 0, 20px 20px;
}

/* ---------- HEADER ---------- */
.app-header {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.9rem 1rem 0.7rem;
  min-height: 0;           /* タブが複数行になっても自動伸縮 */
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(160deg, var(--pink) 0%, var(--yellow) 100%);
  box-shadow: 0 3px 12px rgba(255, 143, 171, 0.4);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── ブランド行（イラスト ＋ タイトル ＋ スコア ＋ ガイドボタン） */
.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  flex-wrap: nowrap;
  overflow: hidden;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

/* ── PC: イラストを大きく・タイトルと縦中央揃え ── */
.header-illust {
  width: 72px;         /* PC: 最大 72px（≒ max-height: 72px） */
  height: 72px;
  object-fit: contain;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.22);
  flex-shrink: 0;
  animation: illust-spin-idle 6s ease-in-out infinite;
}
@keyframes illust-spin-idle {
  0%,100% { transform: rotate(-3deg) scale(1);    filter: drop-shadow(0 0 0px gold); }
  50%      { transform: rotate(3deg)  scale(1.05); filter: drop-shadow(0 2px 10px rgba(255,220,80,0.75)); }
}

.header-title {
  min-width: 0;
  overflow: hidden;
}
.header-title h1 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 6px rgba(90, 62, 75, 0.28);
  line-height: 1.4;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* スコアバッジ */
.header-score {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-weight: 700;
  color: #fff;
  font-size: 0.84rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.score-value {
  font-size: 1.1rem;
  font-weight: 900;
}

/* ── スマホ（≤ 519px）: イラストを 48px に抑えてタイトルと横並び ── */
@media (max-width: 519px) {
  .header-brand {
    flex-direction: row;    /* スマホでも横並び（重ならない程度に） */
    align-items: center;
    gap: 0.5rem;
  }
  .header-illust {
    width: 46px;
    height: 46px;
    border-width: 2px;
  }
  .header-title h1 {
    font-size: 0.92rem;
    white-space: normal;
    line-height: 1.35;
  }
}

/* ---------- MAIN ---------- */
.app-main {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1rem 0;
}

/* ---------- スタンプエリア ---------- */
.stamp-area {
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.7rem 1rem;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  border: 2px dashed var(--pink-light);
  overflow: hidden;
}

.stamp-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  min-height: 36px;
}

/* 個別スタンプ（JSで追加） */
.stamp {
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--yellow-light);
  border: 2px solid var(--yellow-dark);
  box-shadow: 0 2px 6px rgba(245,184,0,0.2);
  animation: stamp-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes stamp-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.stamp-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- ポメせんせいエリア ---------- */
.pome-area {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pome-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}

/* ポメせんせい本体 */
.pome-image {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--yellow-light), var(--pink-light));
  border-radius: 50%;
  border: 3px solid var(--yellow);
  box-shadow: 0 4px 14px rgba(255, 209, 102, 0.4);
  animation: pome-float 3s ease-in-out infinite;
  cursor: pointer;
  user-select: none;
}

.pome-placeholder {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

.pome-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ふきだし */
.pome-bubble {
  background: var(--bg-card);
  border: 2.5px solid var(--pink-light);
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
  padding: 0.55rem 0.85rem;
  box-shadow: var(--shadow);
  position: relative;
  max-width: 200px;
}

.pome-bubble::before {
  content: '';
  position: absolute;
  left: -12px;
  bottom: 12px;
  border: 6px solid transparent;
  border-right-color: var(--pink-light);
}

.pome-bubble p {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.45;
}

/* ---------- 問題表示エリア ---------- */
.question-area {
  width: 100%;
}

.question-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.2rem 1.1rem;
  border: 2.5px solid var(--pink-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
}

/* カードの上部アクセントライン */
.question-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--pink) 0%, var(--yellow) 100%);
}

.question-table-badge {
  background: linear-gradient(90deg, var(--yellow) 0%, var(--pink) 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(90,62,75,0.2);
}

.question-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.q-number {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--pink-dark);
  min-width: 2rem;
  text-align: center;
  letter-spacing: -0.02em;
}

.q-operator {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* 答え入力ボックス */
.q-answer-box {
  display: inline-flex;
  align-items: center;
  min-width: 80px;
  min-height: 56px;
  background: var(--yellow-light);
  border: 2.5px solid var(--yellow-dark);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.05em;
}

.q-cursor {
  display: inline-block;
  color: var(--pink-dark);
  font-weight: 300;
  animation: cursor-blink 1s step-end infinite;
  margin-left: 1px;
  font-size: 2rem;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* フィードバック表示 */
.question-feedback {
  min-height: 1.5rem;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.question-feedback.correct {
  color: var(--correct);
}

.question-feedback.wrong {
  color: var(--wrong);
}

/* ---------- 10キー（テンキー）エリア ---------- */
.numpad-area {
  width: 100%;
}

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

/* 数字ボタン共通 */
.numpad-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 90px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 4px 0 rgba(255, 143, 171, 0.35), var(--shadow);
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border: 2.5px solid var(--pink-light);
}

.numpad-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(255,143,171,0.3);
  filter: brightness(0.92);
  transition: filter 0s, transform 0s, box-shadow 0s;
}

.numpad-btn:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

/* DEL ボタン */
.numpad-del {
  background: linear-gradient(135deg, #ffe0e8, #ffc8d8);
  border-color: var(--pink);
  color: var(--pink-dark);
  font-size: 1.6rem;
}

/* ENTER ボタン */
.numpad-enter {
  background: linear-gradient(135deg, var(--yellow), var(--yellow-dark));
  border-color: var(--yellow-dark);
  color: #fff;
  font-size: 1.6rem;
  text-shadow: 0 1px 3px rgba(90,62,75,0.25);
  box-shadow: 0 4px 0 rgba(200, 140, 0, 0.4), var(--shadow);
}

.numpad-enter:active {
  box-shadow: 0 1px 0 rgba(200,140,0,0.3);
}

/* ---------- 正解オーバーレイ ---------- */
.overlay-correct {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 141, 171, 0.45);
  backdrop-filter: blur(4px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.overlay-correct.show {
  opacity: 1;
  pointer-events: auto;
}

.overlay-content {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 8px 40px rgba(255, 143, 171, 0.5);
  border: 3px solid var(--yellow);
  animation: pome-jump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.overlay-pome {
  font-size: 4rem;
}

.overlay-text {
  font-size: 2rem;
  font-weight: 900;
  color: var(--pink-dark);
  letter-spacing: 0.08em;
}

.overlay-stars {
  display: flex;
  gap: 0.3rem;
  font-size: 1.8rem;
}

/* =====================================================
   アニメーション定義
   ===================================================== */

/* pome-float: ポメせんせいがゆったり浮遊 */
@keyframes pome-float {
  0%   { transform: translateY(0px) rotate(-2deg); }
  25%  { transform: translateY(-8px) rotate(1deg); }
  50%  { transform: translateY(-12px) rotate(-1deg); }
  75%  { transform: translateY(-6px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(-2deg); }
}

/* pome-jump: 正解時のお祝いジャンプ */
@keyframes pome-jump {
  0%   { transform: scale(0.5) translateY(30px); opacity: 0; }
  60%  { transform: scale(1.1) translateY(-10px); opacity: 1; }
  80%  { transform: scale(0.95) translateY(4px); }
  100% { transform: scale(1) translateY(0px); opacity: 1; }
}

/* ポメせんせいのお祝いアニメクラス（JSで付与） */
.pome-image.celebrating {
  animation: pome-jump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* =====================================================
   レスポンシブ（タブレット以上）
   ===================================================== */
@media (min-width: 520px) {
  .app-header {
    border-radius: var(--radius);
    margin-top: 1rem;
    max-width: 520px;
  }

  .header-illust {
    width: 62px;
    height: 62px;
  }

  .header-title h1 {
    font-size: 1.32rem;
  }

  .numpad-btn {
    font-size: 2.2rem;
    max-height: 100px;
  }

  .q-number {
    font-size: 3.2rem;
  }

  .q-answer-box {
    font-size: 2.8rem;
    min-width: 96px;
  }
}

@media (min-width: 768px) {
  .app-main {
    gap: 1.4rem;
    padding: 1.2rem 0 0;
  }

  .pome-image {
    width: 110px;
    height: 110px;
  }

  .pome-placeholder {
    font-size: 3.8rem;
  }
}

/* =====================================================
   ユーティリティ
   ===================================================== */

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* フェードイン */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fade-in 0.4s ease both;
}

/* シェイク（不正解時） */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  40%  { transform: translateX(8px); }
  60%  { transform: translateX(-6px); }
  80%  { transform: translateX(6px); }
}

.shake {
  animation: shake 0.45s ease both;
}

/* =====================================================
   ガイドボタン（？）
   ===================================================== */
/* header-actions コンテナ（？ボタンの親） */
.header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.guide-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-main);
  flex-shrink: 0;
}

.guide-btn:hover,
.guide-btn:focus-visible {
  background: rgba(255,255,255,0.45);
  transform: scale(1.1);
  outline: none;
}

/* =====================================================
   ガイドモーダル
   ===================================================== */
.guide-modal {
  position: fixed;
  inset: 0;
  background: rgba(90, 62, 75, 0.5);
  backdrop-filter: blur(5px);
  z-index: 200;
  display: flex;
  align-items: flex-end;          /* 下からスライドイン */
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.guide-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.guide-panel {
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.5rem 1.4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
  /* 上部アクセントバー */
  border-top: 5px solid var(--pink);
}

.guide-modal.show .guide-panel {
  transform: translateY(0);
}

/* 閉じるボタン */
.guide-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--pink-light);
  background: var(--bg);
  color: var(--pink-dark);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  font-family: var(--font-main);
}

.guide-close:hover,
.guide-close:focus-visible {
  background: var(--pink-light);
  transform: rotate(90deg);
  outline: none;
}

/* タイトル */
.guide-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--pink-dark);
  letter-spacing: 0.05em;
}

/* =====================================================
   ガイドスライド
   ===================================================== */
.guide-slides {
  width: 100%;
  min-height: 160px;
  position: relative;
  overflow: hidden;
}

.guide-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 0.2rem 0.5rem;
  animation: slide-fade-in 0.3s ease both;
}

.guide-slide.active {
  display: flex;
}

@keyframes slide-fade-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.guide-slide-icon {
  font-size: 3rem;
  line-height: 1;
}

.guide-slide-title {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
}

.guide-slide-body {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* =====================================================
   ドットナビ
   ===================================================== */
.guide-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink-light);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.guide-dot.active {
  background: var(--pink-dark);
  transform: scale(1.3);
}

/* =====================================================
   ← → ナビボタン
   ===================================================== */
.guide-nav {
  display: flex;
  gap: 1.2rem;
}

.guide-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2.5px solid var(--pink-light);
  background: var(--bg);
  color: var(--pink-dark);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 3px 8px rgba(255,143,171,0.2);
  font-family: var(--font-main);
}

.guide-nav-btn:active {
  transform: scale(0.92);
  box-shadow: none;
}

.guide-nav-btn:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

/* =====================================================
   レスポンシブ補足
   ===================================================== */
@media (min-width: 520px) {
  .guide-modal {
    align-items: center;
  }

  .guide-panel {
    border-radius: var(--radius);
    max-width: 420px;
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                opacity 0.3s;
  }

  .guide-modal.show .guide-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* =====================================================
   モードタブ — レスポンシブ対応
   PC (≥520px) : flex-wrap:wrap で複数行折り返し・中央揃え
   スマホ (<520px) : overflow-x:auto で横スクロール
   ===================================================== */
.mode-tabs {
  display: flex;
  flex-wrap: wrap;           /* PC: はみ出さず折り返す */
  justify-content: center;
  gap: 0.35rem;
  padding: 0.3rem 0.2rem;
  width: 100%;
}

.tab-btn {
  flex-shrink: 0;
  padding: 0.42rem 0.85rem;   /* 縦を広げてタップ面積を確保 */
  min-height: 44px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.18);
  transition: background 0.2s, color 0.2s, transform 0.12s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.tab-btn.active {
  background: #fff;
  color: var(--pink-dark);
  box-shadow: 0 2px 8px rgba(255,143,171,0.35);
  border-color: rgba(255,255,255,0.6);
}

.tab-btn:not(.active):hover {
  background: rgba(255,255,255,0.3);
  color: #fff;
}

.tab-btn:active {
  transform: scale(0.93);
  background: rgba(255,255,255,0.40);
}
.tab-btn.active:active {
  background: rgba(255,255,255,0.85);
}

/* スマホ: 横スクロール式に切り替え */
@media (max-width: 519px) {
  .mode-tabs {
    flex-wrap: nowrap;            /* 折り返しなし */
    overflow-x: auto;             /* 横スクロール */
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    padding-bottom: 0.4rem;       /* スクロールバー分の余白 */
    gap: 0.28rem;
  }
  .mode-tabs::-webkit-scrollbar {
    display: none;                /* Chrome/Safari */
  }
  .tab-btn {
    font-size: 0.74rem;
    padding: 0.38rem 0.65rem; /* スマホでも 44px 高さを維持 */
  }
}

/* =====================================================
   おおきなかず — ターゲットカード
   ===================================================== */
.ookii-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ookii-target-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 2.5px solid var(--pink-light);
  box-shadow: var(--shadow);
  padding: 0.9rem 1rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  overflow: hidden;
}

.ookii-target-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--pink) 0%, var(--yellow) 100%);
}

.ookii-target-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.ookii-target-num {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--pink-dark);
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.ookii-current-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.ookii-current-val {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text);
}

/* =====================================================
   おおきなかず — 位取りグリッド
   ===================================================== */
.place-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.place-unit {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 2.5px solid var(--pink-light);
  box-shadow: var(--shadow);
  padding: 0.55rem 0.3rem 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  transition: border-color 0.2s;
}

.place-label {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

.place-icons {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  align-content: center;
  justify-items: center;
  padding: 2px 0;
}

.place-icon-item {
  font-size: 1rem;
  line-height: 1;
  animation: icon-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.place-icon-empty {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.2;
  grid-column: 1 / -1;
  justify-self: center;
}

@keyframes icon-pop {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.place-count {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  min-height: 1.8rem;
}

.place-btns {
  display: flex;
  gap: 0.28rem;
}

.place-btn {
  width: 44px;        /* 全画面幅で 44px 以上を確保 */
  height: 44px;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.place-plus {
  background: linear-gradient(135deg, var(--yellow-light), var(--yellow));
  border: 2px solid var(--yellow-dark);
  color: var(--text);
  box-shadow: 0 3px 0 rgba(200,140,0,0.35);
}

.place-minus {
  background: linear-gradient(135deg, #ffe0e8, #ffc8d8);
  border: 2px solid var(--pink);
  color: var(--pink-dark);
  box-shadow: 0 3px 0 rgba(232,96,122,0.3);
}

.place-btn:active {
  transform: translateY(2px);
  box-shadow: none;
  filter: brightness(0.88);
  transition: filter 0s, transform 0s, box-shadow 0s;
}

.place-btn:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

/* =====================================================
   合体アニメーション
   ===================================================== */

/* 送り出し側 — pome-magic-merge */
@keyframes pome-magic-merge {
  0%   { transform: scale(1); border-color: var(--pink-light); }
  20%  { transform: scale(0.88) rotate(-4deg); border-color: var(--yellow); background: var(--yellow-light); }
  55%  { transform: scale(1.12) rotate(3deg); border-color: var(--yellow-dark); }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); border-color: var(--pink-light); }
}

.pome-magic-merge {
  animation: pome-magic-merge 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* 受け取り側 — place-receive */
@keyframes place-receive {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); box-shadow: 0 0 18px var(--yellow), var(--shadow); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); box-shadow: var(--shadow); }
}

.place-receive {
  animation: place-receive 0.45s ease both;
}

/* フライング吹き出し（JSで生成） */
.merge-bubble {
  font-size: 1.6rem;
  pointer-events: none;
  z-index: 500;
}

/* =====================================================
   レスポンシブ（位取り）
   ===================================================== */
@media (min-width: 400px) {
  .place-btn {
    width: 46px;
    height: 46px;
    font-size: 1.3rem;
  }

  .place-icon-item,
  .place-icon-empty {
    font-size: 1.1rem;
  }

  .ookii-target-num {
    font-size: 3.6rem;
  }
}

@media (min-width: 520px) {
  .place-btn {
    width: 44px;
    height: 44px;
  }

  .place-count {
    font-size: 1.9rem;
  }

  .place-icon-item {
    font-size: 1.2rem;
  }
}

/* =====================================================
   ひっ算モード
   ===================================================== */
.hissan-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hissan-card {
  background: #fffef5;
  background-image:
    linear-gradient(var(--yellow-light) 1px, transparent 1px);
  background-size: 100% 68px;
  border-radius: var(--radius);
  border: 2.5px solid var(--pink-light);
  box-shadow: var(--shadow);
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  position: relative;
  overflow: hidden;
}

.hissan-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--pink) 0%, var(--yellow) 100%);
}

.hissan-badge {
  background: linear-gradient(90deg, var(--yellow) 0%, var(--pink) 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(90,62,75,0.2);
}

/* ノート筆算グリッド */
.hissan-notebook {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hissan-carry-row,
.hissan-row {
  display: grid;
  grid-template-columns: 44px 64px 64px;
  gap: 3px;
  align-items: center;
}

.hissan-line-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 3px;
  align-items: center;
}

.hissan-col-op {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  height: 64px;
}

.hissan-plus {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--pink-dark);
}

.hissan-col-space {
  width: 64px;
  height: 32px;
}

/* くり上がり「魔法の窓」 */
.hissan-carry-cell {
  width: 64px;
  height: 32px;
  border: 2px dashed var(--pink-light);
  border-radius: 8px;
  background: var(--yellow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--pink-dark);
  transition: box-shadow 0.3s, border-color 0.3s, background 0.3s;
}

.hissan-carry-cell.carry-glow {
  border: 2.5px solid var(--yellow-dark);
  background: var(--yellow);
  box-shadow: 0 0 16px rgba(245,184,0,0.7), 0 0 6px var(--yellow-dark);
  animation: carry-glow 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes carry-glow {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35) rotate(5deg); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* 数字セル */
.hissan-cell {
  width: 64px;
  height: 64px;
  border: 2px solid var(--pink-light);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--text);
  position: relative;
  border-radius: 4px;
}

/* 答えセル */
.hissan-ans {
  background: var(--yellow-light);
  border: 2.5px solid var(--yellow-dark);
}

.hissan-ans-active {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,143,171,0.35);
  background: #fff9ec;
}

.hissan-ans-done {
  background: #f0fff8;
  border-color: var(--correct);
  color: var(--correct);
}

/* 百の位（必要なときだけ表示） */
.hissan-ans-h {
  background: transparent;
  border-color: transparent;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--pink-dark);
}

/* 区切り線 */
.hissan-line {
  height: 4px;
  background: var(--text);
  border-radius: 2px;
}

/* ステップラベル */
.hissan-step-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.03em;
}

/* カーソル */
.h-cursor {
  font-size: 1.5rem;
  color: var(--pink-dark);
  font-weight: 300;
  animation: cursor-blink 1s step-end infinite;
  position: absolute;
  right: 4px;
  bottom: 4px;
}

/* 励ましフィードバック */
.question-feedback.hissan-encourage {
  color: var(--pink-dark);
}

/* carry star アニメーション */
.pome-carry-star {
  pointer-events: none;
  z-index: 500;
  line-height: 1;
}

/* =====================================================
   レスポンシブ（ひっ算）
   ===================================================== */
@media (min-width: 420px) {
  .hissan-carry-row,
  .hissan-row {
    grid-template-columns: 48px 72px 72px;
  }

  .hissan-col-op,
  .hissan-cell,
  .hissan-carry-cell,
  .hissan-col-space {
    width: 72px;
  }

  .hissan-cell,
  .hissan-ans-h {
    height: 72px;
    font-size: 2.6rem;
  }

  .hissan-col-op {
    height: 72px;
  }

  .hissan-col-space {
    height: 36px;
  }
}

/* =====================================================
   ひっ算（ひきざん）モード 専用スタイル
   ===================================================== */

/* 引き算マイナス記号 */
.hissan-minus {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--pink-dark);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  height: 64px;
}

@media (min-width: 420px) {
  .hissan-minus { height: 72px; }
}

/* くり下がり行のセル — 初期は非表示（スペース確保でレイアウト維持） */
.hk-borrow-cell,
.hk-ten-box {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.28s ease, visibility 0.28s;
  font-size: 1.15rem;
  color: var(--pink-dark);
}

.hk-borrow-cell.hk-borrow-active,
.hk-ten-box.hk-borrow-active {
  visibility: visible;
  opacity: 1;
  background: var(--yellow);
  border-color: var(--yellow-dark);
  box-shadow: 0 0 14px rgba(245,184,0,0.65), 0 0 4px var(--yellow-dark);
  animation: carry-glow 0.48s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* タップ可能ヒント（くり下げ前） */
.hk-tappable-hint {
  cursor: pointer;
  border-color: var(--yellow-dark);
  background: var(--yellow-light);
  box-shadow: 0 0 0 3px rgba(245,184,0,0.45);
  animation: hk-tappable-pulse 1.1s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

@keyframes hk-tappable-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(245,184,0,0.45); }
  50%      { box-shadow: 0 0 0 7px rgba(245,184,0,0.65), 0 0 14px rgba(245,184,0,0.4); }
}

/* タップ促しシェイク（入力ブロック時） */
.hk-tappable-pulse {
  animation: hk-tappable-shake 0.5s ease both !important;
}

@keyframes hk-tappable-shake {
  0%,100% { transform: rotate(0deg); }
  20%     { transform: rotate(-6deg) scale(1.06); }
  40%     { transform: rotate(6deg)  scale(1.06); }
  60%     { transform: rotate(-4deg); }
  80%     { transform: rotate(4deg); }
}

/* くり下げ済み（スラッシュオーバーレイ） */
.hk-borrowed {
  position: relative;
  opacity: 0.45;
  cursor: default;
}

.hk-borrowed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent        calc(50% - 2.5px),
    var(--wrong)       calc(50% - 2.5px),
    var(--wrong)       calc(50% + 2.5px),
    transparent        calc(50% + 2.5px)
  );
  border-radius: 4px;
  pointer-events: none;
}

/* くり下がり星アニメーション（JSで生成する div 要素） */
.pome-break-magic {
  pointer-events: none;
  z-index: 500;
  line-height: 1;
}

/* =====================================================
   とけいモード
   ===================================================== */
.tokei-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

/* サブモードタブ */
.tokei-submode-tabs {
  display: flex;
  gap: 0.4rem;
  width: 100%;
}

.tokei-sub-btn {
  flex: 1;
  padding: 0.5rem 0.4rem;
  border: 2px solid var(--pink-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.tokei-sub-btn.active {
  background: linear-gradient(135deg, var(--pink), var(--yellow));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow);
}

/* 時計ラッパー（夜モード切替） */
.tokei-clock-wrap {
  transition: background 0.6s ease;
  border-radius: 50%;
  padding: 6px;
  background: transparent;
}

.tokei-clock-wrap.tokei-night {
  background: radial-gradient(circle, #b8c9e8 0%, #8aaed4 100%);
  box-shadow: 0 0 28px rgba(100,140,200,0.45);
}

/* 文字盤 */
.tokei-clock {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fffef8 60%, #fff5f8 100%);
  border: 6px solid var(--pink);
  box-shadow:
    0 0 0 3px var(--yellow),
    0 6px 24px rgba(255,143,171,0.35),
    inset 0 2px 8px rgba(255,143,171,0.12);
  position: relative;
  overflow: hidden;
}

/* 数字コンテナ */
.tokei-numbers {
  position: absolute;
  inset: 0;
}

.tokei-num {
  position: absolute;
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  user-select: none;
}

/* 目盛りコンテナ */
.tokei-ticks {
  position: absolute;
  inset: 0;
}

.tokei-tick {
  position: absolute;
  width: 1.5px;
  height: 5px;
  background: var(--text-muted);
  left: calc(50% - 0.75px);
  top: 3px;
  transform-origin: 50% 107px;
  border-radius: 1px;
}

.tokei-tick-hour {
  width: 2.5px;
  height: 9px;
  background: var(--text);
  left: calc(50% - 1.25px);
}

/* 針の共通 */
.tokei-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  border-radius: 4px 4px 2px 2px;
  transform: rotate(0deg);
}

/* 短針 */
.tokei-hour {
  width: 7px;
  height: 64px;
  background: linear-gradient(to top, #e8607a, #ff8fab);
  margin-left: -3.5px;
  box-shadow: 0 2px 6px rgba(232,96,122,0.4);
}

/* 長針 */
.tokei-minute {
  width: 5px;
  height: 88px;
  background: linear-gradient(to top, #c89000, #ffd166);
  margin-left: -2.5px;
  box-shadow: 0 2px 6px rgba(200,144,0,0.35);
}

/* 中心点 */
.tokei-center {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  background: radial-gradient(circle, var(--yellow) 40%, var(--pink) 100%);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* 短針「連動バンプ」アニメ */
@keyframes tokei-hand-bump {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.5) drop-shadow(0 0 6px var(--pink)); transform: rotate(var(--deg, 0deg)) scale(1.06); }
  100% { filter: brightness(1); }
}

.tokei-hand-bump {
  animation: tokei-hand-bump 0.45s ease both;
}

/* ===== モードA：問題ラベル ===== */
.tokei-question-label {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ===== モードA：選択肢グリッド ===== */
.tokei-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  width: 100%;
}

.tokei-choice-btn {
  padding: 0.7rem 0.4rem;
  border: 2.5px solid var(--pink-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}

.tokei-choice-btn:active {
  transform: scale(0.95);
}

.tokei-choice-correct {
  background: #e8fff5;
  border-color: var(--correct);
  color: var(--correct);
  animation: stamp-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}

.tokei-choice-wrong {
  background: #fff0f0;
  border-color: var(--wrong);
  color: var(--wrong);
  animation: shake 0.4s ease both;
}

/* ===== モードB：調整グリッド ===== */
.tokei-adjust-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem 0.4rem;
  width: 100%;
  align-items: center;
}

.tokei-adj-sep {
  font-size: 1.3rem;
  text-align: center;
}

.tokei-adj-btn {
  padding: 0.65rem 0.5rem;
  min-width: 52px;
  border-radius: var(--radius-sm);
  border: 2px solid;
  font-family: var(--font-main);
  font-size: 0.92rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.tokei-adj-plus {
  background: linear-gradient(135deg, var(--yellow-light), var(--yellow));
  border-color: var(--yellow-dark);
  color: var(--text);
  box-shadow: 0 3px 0 rgba(200,140,0,0.3);
}

.tokei-adj-minus {
  background: linear-gradient(135deg, #ffe0e8, #ffc8d8);
  border-color: var(--pink);
  color: var(--pink-dark);
  box-shadow: 0 3px 0 rgba(232,96,122,0.25);
}

.tokei-adj-btn:active {
  transform: translateY(2px);
  box-shadow: none;
  filter: brightness(0.88);
  transition: filter 0s, transform 0s, box-shadow 0s;
}

.tokei-check-btn {
  width: 100%;
  padding: 0.7rem;
  margin-top: 0.2rem;
  border-radius: var(--radius-sm);
  border: none;
  background: linear-gradient(135deg, var(--pink), #e8607a);
  color: #fff;
  font-family: var(--font-main);
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(200,60,90,0.35);
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.tokei-check-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(200,60,90,0.35);
  filter: brightness(0.88);
  transition: filter 0s, transform 0s, box-shadow 0s;
}

/* ===== レスポンシブ補足 ===== */
@media (min-width: 380px) {
  .tokei-clock { width: 240px; height: 240px; }
  .tokei-tick  { transform-origin: 50% 117px; }
  .tokei-tick-hour { transform-origin: 50% 117px; }
  .tokei-hour  { height: 72px; }
  .tokei-minute { height: 98px; }
}

@media (min-width: 420px) {
  .tokei-clock { width: 260px; height: 260px; }
  .tokei-tick  { transform-origin: 50% 127px; }
  .tokei-tick-hour { transform-origin: 50% 127px; }
  .tokei-hour  { height: 78px; }
  .tokei-minute { height: 108px; }
  .tokei-num   { font-size: 1rem; }
}

/* =====================================================
   ながさ・かさモード (Round 8 — visual redesign)
   ===================================================== */

.hakari-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.hakari-q-label {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.03em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   ながさカード
   ━━━━━━━━━━━━━━━━━━━━━━━━━ */

.naga-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* ステージ：横スクロール可 */
.naga-stage {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.4rem 0 0.6rem;
  -webkit-overflow-scrolling: touch;
}

/* オブジェクト行 */
.naga-obj-row {
  display: flex;
  align-items: flex-end;
  min-width: max-content;
  padding: 0.4rem 0 0.3rem 6px;
}

/* オブジェクトコンテナ */
.naga-obj {
  position: relative;
  display: flex;
  align-items: center;
}

/* グラデーションバー本体（JS が width を設定） */
.naga-obj-body {
  display: flex;
  align-items: center;
  height: 38px;
  min-width: 48px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--pink) 0%, #ffb3ca 100%);
  box-shadow: 0 3px 10px rgba(255,143,171,0.45);
  transition: width 0.45s cubic-bezier(0.34,1.2,0.64,1);
  overflow: hidden;
}

/* 左右の先端アイコン */
.naga-obj-tip {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
  padding: 0 4px;
}
.naga-obj-tip-l { order: -1; }
.naga-obj-tip-r { margin-left: auto; }

/* バー内ラベル */
.naga-obj-label {
  font-size: 0.68rem;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  flex: 1;
  text-align: center;
  overflow: hidden;
}

/* ─── 定規 ─── */
.naga-ruler {
  position: relative;
  min-width: max-content;
  padding-top: 22px;
}

/* 定規本体 */
.naga-ruler-body {
  position: relative;
  height: 48px;
  background: linear-gradient(to bottom, #fffde7, #fff9c4);
  border: 2.5px solid var(--yellow-dark);
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(200,140,0,0.2);
  overflow: visible;
}

/* 目盛りコンテナ */
.naga-ruler-ticks {
  position: relative;
  height: 100%;
  padding-left: 6px;
}

/* 目盛り共通 */
.nrtick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 14px;
  background: rgba(0,0,0,0.25);
}

.nrtick-5mm {
  height: 20px;
  width: 1.5px;
  background: rgba(0,0,0,0.45);
}

.nrtick-cm {
  width: 2px;
  height: 30px;
  background: var(--text);
}

.nrtick-label {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
}

/* ▼ ポインター */
.naga-pointer {
  position: absolute;
  top: 2px;
  font-size: 1.25rem;
  color: #e84060;
  transform: translateX(-50%);
  transition: left 0.45s cubic-bezier(0.34,1.2,0.64,1);
  filter: drop-shadow(0 2px 4px rgba(232,64,96,0.55));
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

@keyframes naga-pointer-hit {
  0%   { transform: translateX(-50%) scale(1); }
  40%  { transform: translateX(-50%) scale(1.65) translateY(-5px);
         filter: drop-shadow(0 5px 10px rgba(232,64,96,0.85)); }
  70%  { transform: translateX(-50%) scale(0.88); }
  100% { transform: translateX(-50%) scale(1); }
}

.naga-pointer-hit {
  animation: naga-pointer-hit 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* 回答エリア */
#naga-answer-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.naga-choose-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.naga-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
}

.naga-choice-btn {
  padding: 0.65rem 0.4rem;
  border: 2.5px solid var(--pink-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}
.naga-choice-btn:active { transform: scale(0.95); }

.naga-choice-correct {
  background: #e8fff5;
  border-color: var(--correct);
  color: var(--correct);
  animation: stamp-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}

.naga-choice-wrong {
  background: #fff0f0;
  border-color: var(--wrong);
  color: var(--wrong);
  animation: shake 0.4s ease both;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   かさカード
   ━━━━━━━━━━━━━━━━━━━━━━━━━ */

.kasa-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.kasa-target-label {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--pink-dark);
  text-align: center;
  letter-spacing: 0.04em;
}

/* 2カラムステージ */
.kasa-stage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.8rem;
  width: 100%;
}

/* 各容器カラム */
.kasa-vessel-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.kasa-vessel-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

/* ─── 2L 大ビン ─── */
.kasa-bottle {
  position: relative;
  width: 72px;
  height: 220px;
  background: rgba(255,255,255,0.5);
  border: 3px solid #74b9ff;
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: visible;          /* スケールラベルを外にはみ出せるように */
  backdrop-filter: blur(3px);
  box-shadow: inset 0 -4px 12px rgba(116,185,255,0.15),
              0 4px 14px rgba(116,185,255,0.25);
}

/* ビン上部のネック */
.kasa-bottle::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 16px; right: 16px;
  height: 22px;
  background: rgba(255,255,255,0.5);
  border: 3px solid #74b9ff;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}

/* 水（高さは JS が設定） */
.kasa-bottle-water {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0%;
  transition: height 0.4s cubic-bezier(0.34,1.2,0.64,1),
              background 0.4s;
  overflow: hidden;
  z-index: 0;
}

/* 目盛りコンテナ */
.kasa-bottle-scale {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* 共通: すべての目盛り線 */
.kasa-scale-line {
  position: absolute;
  left: 0;
}

/* dL 目盛り（細い・短い） */
.kasa-scale-dL {
  width: 50%;
  height: 1.5px;
  background: rgba(116, 185, 255, 0.5);
  transition: background 0.3s, box-shadow 0.3s;
}

/* 1L・2L 目盛り（太い・全幅） */
.kasa-scale-L {
  width: 100%;
  height: 3.5px;
  background: rgba(37, 99, 235, 0.75);
  transition: background 0.3s, box-shadow 0.3s;
}

/* L 目盛りのラベル「1L」「2L」 */
.kasa-scale-L .scale-lbl-L {
  position: absolute;
  left: calc(100% + 5px);
  top: -9px;
  font-size: 0.78rem;
  font-weight: 900;
  color: #1d4ed8;
  white-space: nowrap;
  letter-spacing: -0.03em;
}

/* ── キラキラ光る演出 ── */
.kasa-scale-line.tick-highlight {
  animation: tickGlow 0.7s ease-out forwards;
}
.kasa-scale-L.tick-highlight {
  animation: tickGlowL 0.9s ease-out forwards;
}
@keyframes tickGlow {
  0%   { background: gold;           box-shadow: 0 0 10px 3px gold; }
  50%  { background: #facc15;        box-shadow: 0 0 14px 5px #fde68a; }
  100% { background: rgba(116,185,255,0.5); box-shadow: none; }
}
@keyframes tickGlowL {
  0%   { background: #fbbf24;        box-shadow: 0 0 14px 5px gold; height: 5px; }
  50%  { background: #f59e0b;        box-shadow: 0 0 18px 7px #fde68a; }
  100% { background: rgba(37,99,235,0.75); box-shadow: none; height: 3.5px; }
}

/* ── リアルタイム量ラベル（水面横） ── */
.kasa-level-label {
  position: absolute;
  right: calc(100% + 6px);
  font-size: 0.7rem;
  font-weight: 900;
  color: #0369a1;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid #7dd3fc;
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  display: none;
  transition: bottom 0.38s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ── 単位カラー（問題文用） ── */
.unit-L {
  color: #1d4ed8;
  font-weight: 900;
  font-size: 1.1em;
}
.unit-dL {
  color: #ea580c;
  font-weight: 900;
  font-size: 1.05em;
}

/* 泡コンテナ */
.kasa-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

/* 個別バブル */
.kasa-bubble {
  position: absolute;
  bottom: -12px;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.75);
  border: 1.5px solid rgba(116,185,255,0.65);
  border-radius: 50%;
  animation: bubble-rise 1.2s ease-in both;
}

@keyframes bubble-rise {
  0%   { bottom: 5%;   opacity: 0.9; transform: scale(1)   translateX(0); }
  50%  { opacity: 0.7; transform: scale(1.1) translateX(4px); }
  100% { bottom: 102%; opacity: 0;   transform: scale(0.7) translateX(-3px); }
}

/* ─── コップ（最大 9dL = ビンの 1L 分に相当） ─── */
.kasa-cup {
  position: relative;
  width: 56px;
  height: 198px;          /* ビンと同じ高さに揃える（9dL = ビン 9マス分） */
  background: rgba(255,255,255,0.5);
  border: 3px solid #a29bfe;
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: visible;      /* レベルラベルをはみ出させる */
  backdrop-filter: blur(3px);
  box-shadow: inset 0 -3px 8px rgba(162,155,254,0.15),
              0 3px 10px rgba(162,155,254,0.25);
}

/* コップ上部の口 */
.kasa-cup::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 8px; right: 8px;
  height: 18px;
  background: rgba(255,255,255,0.5);
  border: 3px solid #a29bfe;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  pointer-events: none;
}

/* コップ目盛りコンテナ */
.kasa-cup-scale {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* コップ dL 目盛り（細い・左半分） */
.kasa-cup-scale-dL {
  position: absolute;
  left: 0;
  width: 45%;
  height: 1.5px;
  background: rgba(162, 155, 254, 0.55);
}
.kasa-cup-scale-dL .cup-lbl-dL {
  position: absolute;
  left: calc(100% + 3px);
  top: -7px;
  font-size: 0.6rem;
  font-weight: 900;
  color: #7c3aed;
  white-space: nowrap;
}

/* コップ内水 */
.kasa-cup-water {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0%;
  transition: height 0.4s cubic-bezier(0.34,1.2,0.64,1),
              background 0.4s;
  overflow: hidden;
  z-index: 0;
}

/* コップ リアルタイム量ラベル */
.kasa-cup-level-label {
  position: absolute;
  right: calc(100% + 5px);
  font-size: 0.7rem;
  font-weight: 900;
  color: #5b21b6;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid #c4b5fd;
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  display: none;
  transition: bottom 0.38s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ─── ウェーブ ─── */
.kasa-wave {
  position: absolute;
  top: -6px;
  left: -50%;
  width: 200%;
  height: 14px;
  background: rgba(255,255,255,0.38);
  border-radius: 40%;
  animation: wave-move 2.2s linear infinite;
}

@keyframes wave-move {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 数量バッジ */
.kasa-count-badge {
  font-size: 1rem;
  font-weight: 900;
  color: var(--pink-dark);
  background: var(--bg-card);
  border: 2px solid var(--pink-light);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  box-shadow: var(--shadow);
  min-width: 3.5rem;
  text-align: center;
}

/* ＋／－ ボタン行 */
.kasa-bottle-btns {
  display: flex;
  gap: 0.35rem;
}

.kasa-pour-btn {
  padding: 0.6rem 0.7rem;
  min-width: 52px;
  border-radius: var(--radius-sm);
  border: 2.5px solid;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

/* =====================================================
   ずけいモード (Round 9)
   ===================================================== */

.zukei-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.zukei-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.zukei-q-label {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.03em;
}

/* ─── 図形グリッド ─── */
.zukei-shape-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  width: 100%;
}

.zk-shape-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  border: 2.5px solid var(--pink-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  aspect-ratio: 1 / 1;
}
.zk-shape-btn:active { transform: scale(0.94); }

.zk-shape-correct {
  border-color: var(--correct) !important;
  background: #e8fff5 !important;
}

.zk-shape-wrong {
  border-color: var(--wrong) !important;
  background: #fff0f0 !important;
  animation: shake 0.4s ease both;
}

/* ─── 辺グロー演出 ─── */
@keyframes edge-glow {
  0%   { stroke-width: 3.5; filter: none; }
  50%  { stroke-width: 7;   filter: drop-shadow(0 0 5px currentColor) brightness(1.55); }
  100% { stroke-width: 5;   filter: drop-shadow(0 0 3px currentColor); }
}

.zk-edge-glow {
  animation: edge-glow 0.22s ease forwards;
  stroke-width: 5 !important;
}

/* ─── 正解スピンアニメ ─── */
@keyframes zk-shape-win {
  0%   { transform: scale(1)    rotate(0deg); }
  30%  { transform: scale(1.18) rotate(-12deg); }
  60%  { transform: scale(1.22) rotate(12deg);
         filter: drop-shadow(0 0 10px gold) brightness(1.45); }
  80%  { transform: scale(1.14) rotate(-4deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

.zk-shape-win {
  animation: zk-shape-win 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ─── 角度ボタン（やや高め） ─── */
.zk-angle-btn {
  aspect-ratio: unset;
  min-height: 100px;
}

/* ─── L-ツール アニメ ─── */
@keyframes ltool-appear {
  0%   { opacity: 0; transform: scale(0.3); }
  70%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

.zk-ltool-anim {
  animation: ltool-appear 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
  transform-origin: 20px 78px; /* vertex */
}

/* ─── はこステージ ─── */
.hako-stage {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  min-height: 80px;
}

/* ─── はこ 選択ボタン ─── */
.hako-choices {
  display: flex;
  gap: 0.6rem;
  width: 100%;
}

.hako-choice-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.4rem;
  border: 2.5px solid var(--pink-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}

.hako-choice-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.hako-choice-btn:not(:disabled):active { transform: scale(0.95); }

.hako-choice-correct {
  border-color: var(--correct) !important;
  background: #e8fff5 !important;
  color: var(--correct) !important;
  animation: stamp-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}

.hako-choice-wrong {
  border-color: var(--wrong) !important;
  background: #fff0f0 !important;
  color: var(--wrong) !important;
  animation: shake 0.4s ease both;
}

.kasa-pour-plus {
  background: linear-gradient(135deg, var(--yellow-light), var(--yellow));
  border-color: var(--yellow-dark);
  color: var(--text);
  box-shadow: 0 3px 0 rgba(200,140,0,0.3);
}

.kasa-pour-minus {
  background: linear-gradient(135deg, #ffe0e8, #ffc8d8);
  border-color: var(--pink);
  color: var(--pink-dark);
  box-shadow: 0 3px 0 rgba(232,96,122,0.25);
}

.kasa-pour-btn:active {
  transform: translateY(2px);
  box-shadow: none;
  filter: brightness(0.88);
  transition: filter 0s, transform 0s, box-shadow 0s;
}

/* 合計エリア */
.kasa-total-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 900;
  background: var(--bg-card);
  border: 2px solid var(--pink-light);
  border-radius: var(--radius-sm);
  padding: 0.4rem 1rem;
  width: 100%;
  box-shadow: var(--shadow);
}

.kasa-total-label { color: var(--text-muted); }
.kasa-total-val   { color: var(--pink-dark); font-size: 1.15rem; }

/* ============================================================
   Round 10 ── まほうの カードずかん
   ============================================================ */

/* ---- ヘッダー図鑑ボタン ---- */
.zukan-btn {
  position: relative;
  background: linear-gradient(135deg, var(--yellow-light), var(--yellow));
  border: 2.5px solid var(--yellow-dark);
  border-radius: 50px;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 900;
  color: #7a5800;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(180,120,0,0.28);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, box-shadow 0.1s;
}
.zukan-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}
.zukan-btn-count {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  border-radius: 50px;
  padding: 0 0.4em;
  font-size: 0.72rem;
  margin-left: 0.3em;
  vertical-align: middle;
  min-width: 1.4em;
  text-align: center;
  line-height: 1.5;
}

/* ---- カード獲得オーバーレイ（旧動的クラス：非表示固定） ---- */
.card-overlay {
  display: none !important;
  pointer-events: none !important;
}

.card-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  animation: overlay-appear 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes overlay-appear {
  from { opacity: 0; transform: translateY(40px) scale(0.88); }
  to   { opacity: 1; transform: none; }
}

.card-overlay-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--yellow);
  text-shadow: 0 0 18px rgba(255,209,102,0.9), 0 2px 4px rgba(0,0,0,0.4);
  letter-spacing: 0.04em;
  text-align: center;
}

@keyframes pulse-glow {
  0%,100% { text-shadow: 0 0 10px rgba(255,209,102,0.7), 0 2px 4px rgba(0,0,0,0.4); }
  50%      { text-shadow: 0 0 28px rgba(255,209,102,1.0), 0 0 50px rgba(255,160,80,0.6), 0 2px 4px rgba(0,0,0,0.4); }
}
.pulse-glow { animation: pulse-glow 1.6s ease-in-out infinite; }

/* ---- ポメカード本体 ---- */
.pome-card {
  position: relative;
  width: 180px;
  height: 240px;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.35),
    0 0 0 1.5px rgba(255,255,255,0.2) inset;
  backface-visibility: hidden;
}

/* キラキラ shimmer */
.pome-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.38) 48%,
    rgba(255,255,255,0.55) 52%,
    transparent 70%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  border-radius: inherit;
  pointer-events: none;
  animation: card-shimmer 2.4s ease-in-out 0.6s infinite;
}

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

/* レア・シークレットの特別枠 */
.pome-card-rarity-rare {
  border-color: #74b9ff;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.38),
    0 0 18px rgba(116,185,255,0.55),
    0 0 0 1.5px rgba(255,255,255,0.25) inset;
}
.pome-card-rarity-secret {
  border-color: #a29bfe;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.5),
    0 0 28px rgba(162,155,254,0.7),
    0 0 0 1.5px rgba(255,255,255,0.18) inset;
}

/* カードフリップイン */
@keyframes card-flip-in {
  0%   { transform: rotateY(90deg) scale(0.8); opacity: 0; }
  60%  { transform: rotateY(-8deg) scale(1.05); opacity: 1; }
  80%  { transform: rotateY(4deg) scale(1.02); }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
.card-flip-in {
  animation: card-flip-in 0.65s cubic-bezier(0.34,1.3,0.64,1) both;
}

.pome-card-emoji {
  font-size: 3.4rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.22));
  z-index: 1;
}

.pome-card-cname {
  font-size: 0.88rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
  z-index: 1;
  text-align: center;
  padding: 0 0.5rem;
}

.pome-card-badge {
  font-size: 0.66rem;
  font-weight: 700;
  background: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.92);
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 50px;
  padding: 0.12em 0.65em;
  z-index: 1;
  letter-spacing: 0.05em;
}

/* 名前・説明テキスト (カード下) */
.card-name-reveal {
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  animation: overlay-appear 0.4s 0.7s both;
}
.card-desc-reveal {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  text-align: center;
  max-width: 260px;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  animation: overlay-appear 0.4s 0.95s both;
}

/* 閉じるボタン */
.card-overlay-close {
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.45);
  border-radius: 50px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.45rem 1.6rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  animation: overlay-appear 0.4s 1.2s both;
}
.card-overlay-close:active {
  background: rgba(255,255,255,0.35);
}

/* ---- 紙吹雪 confetti ---- */
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotateZ(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotateZ(720deg); opacity: 0; }
}
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 499;
  animation: confetti-fall linear forwards;
}

/* body に pome-congrats クラスで背景グロー */
@keyframes congrats-glow {
  0%   { background: rgba(0,0,0,0.72); }
  35%  { background: radial-gradient(ellipse at 50% 60%, rgba(255,209,102,0.18) 0%, rgba(0,0,0,0.72) 70%); }
  70%  { background: radial-gradient(ellipse at 50% 60%, rgba(255,143,171,0.16) 0%, rgba(0,0,0,0.72) 70%); }
  100% { background: rgba(0,0,0,0.72); }
}
/* 新静的クラスに対して congrats-glow を適用 */
body.pome-congrats .overlay-card-get {
  animation: congrats-glow 2.4s ease-in-out both;
}

/* ---- 図鑑モーダル（旧動的クラス：非表示固定） ---- */
.zukan-modal {
  display: none !important;
  pointer-events: none !important;
}

.zukan-panel {
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.2rem 1rem 2rem;
  box-shadow: 0 -6px 30px rgba(0,0,0,0.22);
  animation: slide-up 0.35s cubic-bezier(0.34,1.2,0.64,1) both;
}

@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

.zukan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.zukan-title {
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--pink-dark);
  animation: pulse-glow 2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255,143,171,0.5);
}

.zukan-close-btn {
  background: var(--bg-card);
  border: 2px solid var(--pink-light);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  color: var(--pink-dark);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.zukan-count {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-align: center;
}
.zukan-count span {
  color: var(--pink-dark);
  font-size: 1rem;
}

/* 3列グリッド */
.zukan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

/* カード共通 */
.zukan-card {
  aspect-ratio: 3/4;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  overflow: hidden;
  position: relative;
  border: 2.5px solid transparent;
  cursor: default;
  transition: transform 0.15s;
}
.zukan-card:active { transform: scale(0.96); }

/* 取得済み */
.zukan-card-acquired {
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.zukan-card-acquired::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 25%,
    rgba(255,255,255,0.32) 46%,
    rgba(255,255,255,0.45) 50%,
    transparent 72%
  );
  background-size: 220% 100%;
  background-position: 220% 0;
  pointer-events: none;
  border-radius: inherit;
  animation: card-shimmer 3s ease-in-out 1s infinite;
}

/* 未取得 */
.zukan-card-locked {
  background: #dfe6e9 !important;
  border-color: #b2bec3;
  box-shadow: none;
}

.zukan-card-emoji {
  font-size: 1.6rem;
  line-height: 1;
  z-index: 1;
}

.zukan-card-name {
  font-size: 0.58rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  text-align: center;
  padding: 0 0.25rem;
  z-index: 1;
  line-height: 1.3;
}

.zukan-card-badge {
  font-size: 0.5rem;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50px;
  padding: 0.08em 0.5em;
  z-index: 1;
}

/* 未取得の？表示 */
.zukan-unknown {
  font-size: 1.8rem;
  color: #b2bec3;
  z-index: 1;
  font-weight: 900;
  line-height: 1;
}

/* ---- レア枠ゴールド ---- */
.zukan-card-acquired.rarity-rare {
  border-color: #74b9ff;
  box-shadow: 0 3px 12px rgba(116,185,255,0.4), 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.zukan-card-acquired.rarity-secret {
  border-color: #a29bfe;
  box-shadow: 0 3px 14px rgba(162,155,254,0.55), 0 0 0 1px rgba(255,255,255,0.12) inset;
}

/* ============================================================
   静的 HTML クラス alias
   （index.html の overlay-card-get / modal-zukan / zukan-trigger-btn
     に対応するスタイル。.card-overlay / .zukan-modal に準拠）
   ============================================================ */

/*
 * z-index 階層まとめ
 * ─────────────────────────────────────
 * .app-header (タブ含む)  : 10
 * .overlay-correct        : 100
 * .guide-modal            : 200
 * .zukan-trigger-btn      : 200
 * .confetti-piece         : 499
 * .modal-zukan            : 400  ← 表示時のみ auto
 * .overlay-card-get       : 500  ← 表示時のみ auto
 * ─────────────────────────────────────
 * display:none + pointer-events:none の二重ガードで
 * 非表示中はタブボタン等への操作を一切ブロックしない。
 */

/* カード獲得オーバーレイ（静的版・JS で display 切替） */
.overlay-card-get {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 500;
  display: none;            /* 初期非表示 → JS: display:flex で表示 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  pointer-events: none;     /* 非表示中はクリックを透過（二重ガード） */
}

.card-get-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: overlay-appear 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

.card-get-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--yellow);
  text-shadow: 0 0 18px rgba(255,209,102,0.9), 0 2px 4px rgba(0,0,0,0.4);
  text-align: center;
  margin: 0;
  animation: pulse-glow 1.6s ease-in-out infinite;
}

.new-card-view {
  /* pome-card と同じ寸法になるよう .pome-card スタイルが適用される */
  width: 180px;
  min-height: 240px;
}

.card-get-name {
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  margin: 0;
  animation: overlay-appear 0.4s 0.7s both;
}

.card-get-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.88);
  text-align: center;
  max-width: 260px;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  margin: 0;
  animation: overlay-appear 0.4s 0.95s both;
}

.card-next-btn {
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.45);
  border-radius: 50px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.5rem 1.8rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  animation: overlay-appear 0.4s 1.2s both;
}
.card-next-btn:active {
  background: rgba(255,255,255,0.35);
}

/* 図鑑モーダル（静的版・JS で display 切替） */
.modal-zukan {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: 400;
  display: none;            /* 初期非表示 → JS: display:flex で表示 */
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none;     /* 非表示中はクリックを透過（二重ガード） */
}

.zukan-content {
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.2rem 1rem 2rem;
  box-shadow: 0 -6px 30px rgba(0,0,0,0.22);
  animation: slide-up 0.35s cubic-bezier(0.34,1.2,0.64,1) both;
}

/* 閉じるボタン（静的版） */
.zukan-close {
  background: var(--bg-card);
  border: 2px solid var(--pink-light);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--pink-dark);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

/* 図鑑起動ボタン（画面固定） */
.zukan-trigger-btn {
  position: fixed;
  bottom: 1.2rem;
  right: 1rem;
  background: linear-gradient(135deg, var(--yellow-light), var(--yellow));
  border: 2.5px solid var(--yellow-dark);
  border-radius: 50px;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 900;
  color: #7a5800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(180,120,0,0.32);
  white-space: nowrap;
  z-index: 200;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, box-shadow 0.1s;
}
.zukan-trigger-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 4px rgba(180,120,0,0.22);
}