/* PUSHU Web版 スタイル */
  :root {
    --accent: #7c6cf0;        /* メインのパープル */
    --accent-strong: #6a58e8;
    --accent-soft: #f0edfd;
    --accent2: #ff7fb6;       /* ポップなピンク */
    --accent3: #ffcb47;       /* たのしい黄色 */
    --accent4: #58c7f3;       /* 空色 */
    --green: #2fbd7e;
    --bg: #f7f6fb;
    --card: #ffffff;
    --text: #2b2b34;
    --muted: #9a9aab;
    --line: #ecebf4;
    --warn: #e8873a;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif;
    color: var(--text);
    /* 遊び心のある、淡いパステルのブロブ背景 */
    background:
      radial-gradient(38vw 38vw at 8% 4%, rgba(124,108,240,.16), transparent 60%),
      radial-gradient(34vw 34vw at 98% 12%, rgba(255,127,182,.16), transparent 60%),
      radial-gradient(40vw 40vw at 88% 98%, rgba(88,199,243,.15), transparent 60%),
      radial-gradient(30vw 30vw at 2% 92%, rgba(255,203,71,.15), transparent 60%),
      var(--bg);
    background-attachment: fixed;
  }

  /* ==== 遊び心アニメーション ==== */
  @keyframes pop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
  @keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-3deg)} 75%{transform:rotate(3deg)} }
  @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
  @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
  @keyframes confetti-fall { 0%{transform:translateY(-10vh) rotate(0);opacity:1} 100%{transform:translateY(100vh) rotate(720deg);opacity:.9} }

  /* ==== アプリの器（モバイル優先: 縦積み・下タブ） ==== */
  .app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--bg);
  }
  .content { order: 1; flex: 1; overflow-y: auto; padding: 8px 16px 20px; }
  .screen { max-width: 640px; margin: 0 auto; }
  .content::-webkit-scrollbar { width: 8px; }
  .content::-webkit-scrollbar-thumb { background: #dcd9ea; border-radius: 8px; }

  .navtitle { font-size: 26px; font-weight: 800; padding: 12px 4px 12px; }

  /* ==== ホームのブランドヘッダー（ロゴ＋PUSHUタイトル） ==== */
  .home-brand { display: flex; align-items: center; gap: 12px; padding: 14px 4px 10px; }
  .home-logo {
    width: 56px; height: 56px; border-radius: 16px; flex: 0 0 auto;
    box-shadow: 0 6px 16px rgba(124,108,240,.35);
    animation: floaty 3.5s ease-in-out infinite;
  }
  .home-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
  .home-wordmark {
    font-size: 30px; font-weight: 900; letter-spacing: .5px;
    background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 60%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent);
  }
  .home-wordmark .puff { -webkit-text-fill-color: initial; margin-left: 2px; display: inline-block; animation: wiggle 2.5s ease-in-out infinite; }
  .home-tagline { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 3px; }

  /* ==== ホーム: あなたの成績 ==== */
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 14px 6px; border-radius: 16px; background: linear-gradient(135deg, #f6f4ff, #fbf0f6);
    border: 1px solid rgba(124,108,240,.08);
  }
  .stat-num { font-size: 26px; font-weight: 900; color: var(--accent); line-height: 1; }
  .stat-num small { font-size: 15px; font-weight: 800; }
  .stat-num.sm { font-size: 17px; color: var(--accent-strong); text-align: center; line-height: 1.15; }
  .stat-lbl { font-size: 11px; color: var(--muted); font-weight: 700; text-align: center; }

  /* ==== ホーム: 今日の雑学 ==== */
  .today-cat { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; padding: 3px 12px; border-radius: 999px; margin-bottom: 10px; }
  .today-title { font-size: 17px; font-weight: 800; line-height: 1.45; }
  .today-detail { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 8px; }
  .today-card #todayNext { margin-top: 12px; }

  /* タイトル画面ではナビ枠を隠して完全な全画面に */
  .app.title-fullscreen .sidebar { display: none; }

  /* ==== ホーム＝ゲームのタイトル画面（タップでスタート） ==== */
  @keyframes titleblink { 0%,100%{opacity:1; transform:translateY(0)} 50%{opacity:.4; transform:translateY(2px)} }
  @keyframes titlepop { 0%{transform:scale(.8);opacity:0} 100%{transform:scale(1);opacity:1} }
  #screen-title { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(92vh, 800px); gap: 6px; }
  .title-screen {
    width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    border: none; background: transparent; cursor: pointer; font: inherit; color: var(--text);
    padding: 24px 16px; text-align: center; -webkit-tap-highlight-color: transparent;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  }
  .title-screen:hover { transform: scale(1.015); }
  .title-screen:active { transform: scale(.97); }
  .title-mascot img {
    width: 132px; height: 132px; border-radius: 34px;
    box-shadow: 0 16px 40px rgba(124,108,240,.4);
    animation: floaty 3.2s ease-in-out infinite;
  }
  .title-logo {
    font-size: 60px; font-weight: 900; letter-spacing: 1px; line-height: 1; margin-top: 4px;
    background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 55%, var(--accent4) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent);
    animation: titlepop .5s ease both;
  }
  .title-logo .puff { -webkit-text-fill-color: initial; margin-left: 4px; display: inline-block; animation: wiggle 2.4s ease-in-out infinite; }
  .title-sub { font-size: 14px; color: var(--muted); font-weight: 700; }
  .title-tap {
    margin-top: 18px; font-size: 16px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    padding: 14px 30px; border-radius: 999px;
    box-shadow: 0 8px 22px rgba(124,108,240,.4);
    animation: titleblink 1.5s ease-in-out infinite;
  }

  /* ==== Googleログインボタン（タイトル・設定 共通） ==== */
  .google-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 1.5px solid #dcdce4; background: #fff; color: #3c4043;
    font: inherit; font-weight: 700; font-size: 15px; padding: 12px 16px; border-radius: 12px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(60,64,67,.12); transition: background .15s, box-shadow .15s, transform .1s;
  }
  .google-btn:hover { background: #f7f8fa; box-shadow: 0 4px 12px rgba(60,64,67,.18); }
  .google-btn:active { transform: scale(.98); }
  .google-btn svg { flex: 0 0 auto; }
  .acc-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; margin: 12px 0; }
  .acc-or::before, .acc-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

  /* ==== タイトル画面のログイン欄 ==== */
  .title-account { width: 100%; max-width: 340px; margin: 6px auto 0; text-align: center; }
  .title-acc-row { display: flex; gap: 8px; }
  .title-acc-row input {
    flex: 1; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px;
    font: inherit; background: rgba(255,255,255,.85); color: var(--text);
  }
  .title-acc-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
  .title-acc-btn {
    flex: 0 0 auto; border: none; border-radius: 12px; padding: 0 18px; cursor: pointer;
    font: inherit; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent2), var(--accent));
    box-shadow: 0 4px 12px rgba(124,108,240,.3);
  }
  .title-acc-btn:active { transform: scale(.94); }
  .title-acc-msg { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
  .title-acc-user { font-size: 13px; color: var(--muted); font-weight: 700; }
  .title-acc-logout {
    display: inline-block; margin-top: 8px; border: 1.5px solid var(--line); background: rgba(255,255,255,.8);
    color: var(--muted); font: inherit; font-weight: 700; font-size: 13px; padding: 7px 16px; border-radius: 999px; cursor: pointer;
  }
  .title-acc-logout:hover { color: var(--text); background: #fff; }

  /* ==== 設定ヘッダー（タイトル＋右上「保存」ボタン） ==== */
  .settings-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .settings-header .navtitle { padding-right: 0; }
  .save-area { display: flex; align-items: center; gap: 8px; }
  .save-status { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
  .cloud-save-btn {
    flex: 0 0 auto; border: none; cursor: pointer; font: inherit; font-weight: 800; font-size: 14px;
    color: #fff; padding: 9px 16px; border-radius: 999px;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    box-shadow: 0 4px 12px rgba(124,108,240,.32); transition: transform .12s ease, box-shadow .12s ease;
  }
  .cloud-save-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(124,108,240,.4); }
  .cloud-save-btn:active { transform: scale(.94); }

  .card {
    background: var(--card); border-radius: 20px; padding: 16px; margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(124, 108, 240, .08);
    border: 1px solid rgba(124, 108, 240, .06);
  }
  .section-title { font-size: 13px; font-weight: 700; color: var(--muted); margin: 4px 4px 8px; }
  .footnote { font-size: 12px; color: var(--muted); margin: 6px 4px 0; }
  .warn { color: var(--warn); }

  /* 10枠バー */
  .slots { display: flex; gap: 7px; }
  .slot {
    flex: 1; height: 15px; border-radius: 999px; background: #eeedf6;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
  }
  .slot.filled {
    background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
    box-shadow: 0 2px 8px rgba(124, 108, 240, .35);
    animation: pop .35s ease;
  }
  .slot-count { font-size: 12px; color: var(--muted); margin-top: 12px; font-weight: 500; }

  /* ==== ジャンルを選んでクイズ（ランチャーチップ） ==== */
  .genres { display: flex; flex-wrap: wrap; gap: 9px; }
  .genre-chip {
    --c: var(--accent);
    display: inline-flex; align-items: center; gap: 6px;
    border: 2px solid var(--c); background: #fff; color: var(--c);
    font: inherit; font-weight: 800; font-size: 14px;
    padding: 9px 15px 9px 12px; border-radius: 999px; cursor: pointer;
    box-shadow: 0 3px 10px rgba(124,108,240,.10);
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), background .15s, color .15s, box-shadow .15s;
  }
  .genre-chip .ge { font-size: 17px; line-height: 1; transition: transform .2s ease; }
  .genre-chip:hover { background: var(--c); color: #fff; transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 8px 18px rgba(124,108,240,.22); }
  .genre-chip:hover .ge { transform: scale(1.2) rotate(-10deg); }
  .genre-chip:active { transform: scale(.9); }
  .genre-count { font-size: 12px; color: var(--muted); margin-top: 12px; font-weight: 500; line-height: 1.5; }

  /* クイズ開始画面の「全ジャンルに戻す」控えめボタン */
  .ghost-btn {
    border: none; background: transparent; color: var(--muted);
    font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
    padding: 6px 12px; border-radius: 999px; transition: color .15s, background .15s;
  }
  .ghost-btn:hover { color: var(--accent); background: var(--accent-soft); }

  /* ==== 通知するジャンル（複数選択トグル） ==== */
  .gtog {
    --c: var(--accent);
    display: inline-flex; align-items: center; gap: 6px;
    border: 2px solid var(--line); background: #faf9fd; color: var(--muted);
    font: inherit; font-weight: 700; font-size: 14px;
    padding: 8px 14px 8px 11px; border-radius: 999px; cursor: pointer;
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), border-color .15s, background .15s, color .15s, box-shadow .15s;
  }
  .gtog .ge { font-size: 16px; line-height: 1; transition: transform .2s ease; }
  .gtog:hover { transform: translateY(-2px); }
  .gtog:active { transform: scale(.9); }
  .gtog.on {
    color: #fff; border-color: transparent; background: var(--c);
    box-shadow: 0 5px 14px rgba(124,108,240,.24); animation: pop .35s ease;
  }
  .gtog.on .ge { transform: scale(1.15) rotate(-8deg); }
  @keyframes nudge { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
  .genres.nudge { animation: nudge .3s ease; }

  /* ホーム見出し横のキラキラ */
  .title-puff { display: inline-block; margin-left: 6px; font-size: 20px; animation: floaty 3s ease-in-out infinite; }

  /* 入力 */
  .addrow { display: flex; gap: 8px; align-items: flex-start; }
  textarea, input[type="time"], input[type="number"], select {
    font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%;
    background: #faf9fd; color: var(--text); resize: none;
  }
  textarea:focus, input[type="time"]:focus, input[type="number"]:focus, select:focus {
    outline: none; border-color: var(--accent); background: #fff;
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  /* トグルスイッチ */
  .switch { display: inline-flex; cursor: pointer; }
  .switch input { display: none; }
  .switch .track {
    position: relative; width: 48px; height: 28px; background: #d7d5e4;
    border-radius: 999px; transition: background .2s;
  }
  .switch .thumb {
    position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
    background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
  }
  .switch input:checked ~ .track { background: var(--accent); }
  .switch input:checked ~ .track .thumb { transform: translateX(20px); }
  textarea { min-height: 44px; line-height: 1.4; }
  .addbtn {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; border: none;
    background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff;
    font-size: 24px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 12px rgba(124,108,240,.35); transition: transform .12s ease;
  }
  .addbtn:hover:not(:disabled) { transform: scale(1.08) rotate(90deg); }
  .addbtn:active:not(:disabled) { transform: scale(.92); }
  .addbtn:disabled { background: #c7ccdd; box-shadow: none; cursor: default; }

  /* 問題リスト */
  .q { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-top: 1px solid var(--line); }
  .q:first-child { border-top: none; }
  .q-text { flex: 1; font-size: 15px; line-height: 1.4; }
  .learned {
    flex: 0 0 auto; border: none; background: rgba(35,178,109,.14); color: var(--green);
    font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  }
  .learned:hover { background: rgba(35,178,109,.22); }
  .empty { color: var(--muted); font-size: 14px; padding: 8px 4px; }

  /* 設定 行 */
  .row { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-top: 1px solid var(--line); gap: 12px; }
  .row:first-child { border-top: none; }
  .row label { font-size: 15px; }
  .row .control { flex: 0 0 auto; min-width: 130px; }
  select { width: auto; min-width: 130px; }
  input[type="time"] { width: auto; }

  /* セグメント（モード） */
  .segment { display: flex; background: #f0eff7; border-radius: 12px; padding: 4px; gap: 4px; }
  .segment button {
    flex: 1; border: none; background: transparent; padding: 8px 6px; border-radius: 9px;
    font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer;
  }
  .segment button.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

  .btn-line {
    display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: transparent;
    padding: 12px 4px; border-top: 1px solid var(--line); font: inherit; font-size: 15px; color: var(--accent);
    cursor: pointer; text-align: left;
  }
  .btn-line:first-child { border-top: none; }
  .btn-line:hover { color: var(--accent-strong); }

  .status-pill { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
  .ok { background: rgba(35,178,109,.14); color: var(--green); }
  .ng { background: rgba(232,135,58,.16); color: var(--warn); }

  .upcoming { font-size: 13px; color: var(--muted); line-height: 1.7; }
  .banner {
    background: #fff7ee; border: 1px solid #f2ddc2; color: #8a5a1e; font-size: 12px;
    border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.5;
  }

  /* ==== iPhone向け ホーム画面追加ガイド ==== */
  .ios-guide {
    background: var(--accent-soft); border: 1px solid #ddd6fb; color: var(--text);
    border-radius: 16px; padding: 14px 16px; margin-bottom: 14px;
  }
  .ios-guide h4 { margin: 0 0 4px; font-size: 14px; color: var(--accent-strong); display: flex; align-items: center; gap: 6px; }
  .ios-guide .lead { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
  .ios-guide ol { margin: 0; padding: 0; list-style: none; counter-reset: step; }
  .ios-guide li {
    counter-increment: step; position: relative; padding: 6px 0 6px 30px;
    font-size: 13px; line-height: 1.5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  }
  .ios-guide li::before {
    content: counter(step); position: absolute; left: 0; top: 6px;
    width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff;
    font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  .ios-guide .share-ico { width: 16px; height: 16px; vertical-align: -3px; color: var(--accent-strong); }

  /* ==== ナビ（モバイル: 下タブ） ==== */
  .sidebar {
    order: 2; display: flex; flex-direction: row;
    border-top: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
    height: 62px; flex: 0 0 auto;
  }
  .brand { display: none; }
  .brand-sub { display: none; }
  .tab {
    flex: 1; border: none; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); font-size: 11px; font-family: inherit;
  }
  .tab.active { color: var(--accent); }
  .tab .ico { display: flex; align-items: center; justify-content: center; }
  .tab .ico svg { width: 23px; height: 23px; display: block; }

  /* ==== クイズ ==== */
  .primary-btn {
    border: none; background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff;
    font: inherit; font-weight: 800; letter-spacing: .02em;
    padding: 13px 28px; border-radius: 999px; cursor: pointer;
    box-shadow: 0 6px 16px rgba(124,108,240,.35);
    transition: transform .14s ease, box-shadow .14s ease;
  }
  .primary-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 22px rgba(124,108,240,.42); }
  .primary-btn:active { transform: scale(.96); }
  .quiz-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px; }
  .quiz-emoji { font-size: 52px; animation: floaty 3s ease-in-out infinite; }
  .quiz-title { font-size: 22px; font-weight: 800; }
  .quiz-lead { font-size: 14px; color: var(--muted); line-height: 1.6; }
  .quiz-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 700; margin: 4px 4px 8px; }
  .qh-right { display: inline-flex; align-items: center; gap: 10px; }
  .quiz-close {
    border: none; background: #f0eff7; color: var(--muted);
    width: 27px; height: 27px; border-radius: 50%; cursor: pointer;
    font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, transform .12s ease;
  }
  .quiz-close:hover { background: #e6e3f2; color: var(--text); }
  .quiz-close:active { transform: scale(.85) rotate(90deg); }

  /* ==== 2階層ジャンルピッカー（画像準拠・緑アクセント） ==== */
  .gp-head { font-size: 15px; font-weight: 800; color: var(--text); margin: 4px 2px 12px; }
  .gp-tabs {
    display: flex; gap: 4px; background: #f0eff7; border-radius: 16px; padding: 5px;
    margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .gp-tabs::-webkit-scrollbar { height: 0; }
  .gp-tab {
    position: relative; flex: 1 0 auto; min-width: 60px; border: none; background: transparent; color: var(--muted);
    font: inherit; font-weight: 800; font-size: 15px; padding: 11px 12px; border-radius: 12px; cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .gp-tab.on { background: var(--green); color: #fff; box-shadow: 0 3px 10px rgba(47,189,126,.3); }
  .gp-ribbon {
    position: absolute; top: -7px; left: -4px; background: #ff5a7a; color: #fff; font-size: 10px; font-weight: 800;
    padding: 1px 7px; border-radius: 8px 8px 8px 2px; box-shadow: 0 2px 5px rgba(255,90,122,.4);
  }
  .gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .gp-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    min-height: 66px; padding: 12px 10px; border: 2px solid #efe9fb; background: #fff; border-radius: 16px; cursor: pointer;
    transition: transform .12s ease, border-color .15s, box-shadow .15s;
  }
  .gp-card:hover { border-color: #d9cff5; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(124,108,240,.12); }
  .gp-card:active { transform: scale(.96); }
  .gp-card.on { border-color: var(--green); box-shadow: 0 6px 16px rgba(47,189,126,.22); }
  .gp-name { font-weight: 800; font-size: 15px; color: var(--text); text-align: center; line-height: 1.25; }
  .gp-card.on .gp-name { color: #23a86a; }
  .gp-acc { font-size: 12px; color: var(--muted); font-weight: 600; }
  .gp-more, .gp-mix {
    width: 100%; border: 2px solid var(--line); background: #fff; color: var(--text);
    font: inherit; font-weight: 700; font-size: 15px; padding: 13px; border-radius: 14px; cursor: pointer;
    margin-top: 14px; transition: background .15s, border-color .15s;
  }
  .gp-more:hover { background: #f6f5fb; }
  .gp-mix { border-color: #cfeede; color: #23a86a; }
  .gp-mix:hover { background: #f0faf5; }
  .gp-start { width: 100%; margin-top: 12px; border-radius: 16px; background: var(--green); box-shadow: 0 6px 16px rgba(47,189,126,.32); }
  .gp-start:hover { background: #2aa870; transform: translateY(-2px) scale(1.01); box-shadow: 0 10px 22px rgba(47,189,126,.4); }

  .quiz-bar { height: 10px; background: #ecebf4; border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
  .quiz-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent3), var(--accent2), var(--accent)); border-radius: 999px; transition: width .4s cubic-bezier(.34,1.56,.64,1); }
  .quiz-cat { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; padding: 3px 12px; border-radius: 999px; margin-bottom: 12px; }
  .quiz-q { font-size: 18px; font-weight: 800; line-height: 1.5; margin-bottom: 16px; }
  .quiz-choices { display: flex; flex-direction: column; gap: 11px; }
  .choice {
    border: 2px solid var(--line); background: #fbfaff; color: var(--text); font: inherit; font-weight: 600;
    text-align: left; padding: 14px 16px; border-radius: 16px; cursor: pointer;
    transition: transform .12s ease, border-color .15s, background .15s;
  }
  .choice:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); transform: translateX(4px); }
  .choice:active:not(:disabled) { transform: scale(.98); }
  .choice:disabled { cursor: default; }
  .choice.correct { border-color: var(--green); background: rgba(47,189,126,.16); color: #1f9c66; font-weight: 800; animation: pop .4s ease; }
  .choice.wrong { border-color: #ee6a7f; background: rgba(238,106,127,.14); color: #d23a54; font-weight: 800; animation: shake .4s ease; }
  .quiz-exp { margin-top: 16px; font-size: 14px; line-height: 1.6; background: #f7f6fb; border-radius: 12px; padding: 12px 14px; }
  .exp-ok { color: var(--green); }
  .exp-ng { color: #c0392b; }
  #quizNext { margin-top: 16px; width: 100%; }

  /* 紙吹雪 */
  #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
  #confetti i {
    position: absolute; top: -10vh; width: 10px; height: 14px; border-radius: 2px;
    animation: confetti-fall linear forwards;
  }

  .learned { transition: transform .12s ease, background .15s; }
  .learned:active { transform: scale(.9); }

  .hidden { display: none !important; }

  /* ==== デスクトップ（横並び: 左サイドバー） ==== */
  @media (min-width: 820px) {
    body {
      display: flex; align-items: center; justify-content: center;
      /* 淡いパープルのグラデ背景 */
      background: linear-gradient(135deg, #efeafb 0%, #e9eaf5 100%);
      padding: 24px;
    }
    .app {
      flex-direction: row;
      width: min(1080px, 96vw);
      height: min(880px, 92vh);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(90, 70, 180, .12);
      border: 1px solid rgba(124, 108, 240, .08);
    }
    .sidebar {
      order: 0; flex-direction: column; align-items: stretch;
      width: 236px; height: auto; flex: 0 0 236px;
      border-top: none; border-right: 1px solid var(--line);
      background: #fff; padding: 24px 14px; gap: 4px;
    }
    /* 左上のPUSHUブランドは非表示（ホーム内のロゴ＋タイトルに集約したため） */
    .brand { display: none; }
    .brand-sub { display: none; }
    .tab {
      flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px;
      padding: 12px 14px; border-radius: 14px; font-size: 15px; font-weight: 700;
      transition: background .15s, color .15s, transform .15s;
    }
    .tab .ico svg { width: 19px; height: 19px; }
    .tab.active { background: var(--accent-soft); color: var(--accent); transform: translateX(3px); }
    .tab.active .ico { animation: wiggle .5s ease; }
    .tab:hover:not(.active) { background: #f6f5fb; color: var(--text); }
    .content { padding: 26px 34px 34px; }
    .navtitle { padding-top: 4px; }
  }