:root{
    --paper:#FBF6EC; --paper2:#F3EADA;
    --ink:#33312E; --ink-soft:#6E665B;
    --primary:#2FB39A; --primary-d:#1F8F7C;
    --accent:#FF8A5B; --accent-d:#F26B38;
    --hard1:#3A3357; --hard2:#5B4B8A; --gold:#FFD86B;
    --card:#FFFFFF; --line:#E7DDCC; --good:#2FB39A; --bad:#F2A03D;
    --shadow:0 14px 30px -12px rgba(70,55,30,.35);
    --r:26px;
    --font-d:'Noto Sans JP', sans-serif;
    --font-b:'Noto Sans JP', sans-serif;
    /* エイリアス（旧コードが参照する未定義変数の補完。教科色にも自動追従） */
    --brand:var(--primary);
    --sub:var(--ink-soft);
  }

  /* ====== 教科ごとのテーマ色（body[data-subject]で--primaryを上書き） ======
     数学(math)=緑は:root既定。英語/理科/社会/国語の4教科を切替時に着色。
     ※マスコットSVGは色がhex直書きのため、教科を変えても常に緑のまま。 */
  body[data-subject="eng"]{ --primary:#3B9BFF; --primary-d:#2C77D6; } /* 英語=青 */
  body[data-subject="sci"]{ --primary:#9B6BE3; --primary-d:#7A4FC2; } /* 理科=紫 */
  body[data-subject="soc"]{ --primary:#FF9F45; --primary-d:#E87A20; } /* 社会=橙 */
  body[data-subject="jpn"]{ --primary:#FF6B6B; --primary-d:#E24A4A; } /* 国語=赤 */
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    font-family:var(--font-b); color:var(--ink);
    background:
      radial-gradient(circle at 15% 0%, #FCEFD9 0%, transparent 45%),
      radial-gradient(circle at 90% 12%, #DFF3EE 0%, transparent 40%),
      var(--paper);
    min-height:100dvh; display:flex; align-items:flex-start; justify-content:center;
    padding:18px; overflow-x:hidden; transition:background .5s ease;
  }
  body[data-mode="hard"]{
    background:
      radial-gradient(circle at 15% 0%, #E8E2F7 0%, transparent 45%),
      radial-gradient(circle at 90% 12%, #FBEFD6 0%, transparent 40%),
      #F4F1EC;
  }
  body[data-mode="test"]{
    background:
      radial-gradient(circle at 15% 0%, #FFE9D6 0%, transparent 45%),
      radial-gradient(circle at 90% 12%, #FCE3D3 0%, transparent 40%),
      #FBF3EA;
  }
  .wrap{width:100%;max-width:430px;position:relative;}
  .blob{position:fixed;border-radius:50%;filter:blur(46px);opacity:.45;z-index:-1;pointer-events:none;}
  .blob.b1{width:260px;height:260px;background:#CFF0E6;left:-90px;top:-60px;animation:drift1 16s ease-in-out infinite;}
  .blob.b2{width:300px;height:300px;background:#FBE6CF;right:-120px;bottom:-80px;animation:drift2 19s ease-in-out infinite;}
  @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
  @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-30px)}}

  .btn{font-family:var(--font-b);font-weight:700;font-size:1.02rem;border:none;border-radius:18px;
    padding:15px 18px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;}
  .btn:active{transform:translateY(2px) scale(.99);}
  .btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 0 0 var(--primary-d);}
  .btn-primary:active{box-shadow:0 2px 0 0 var(--primary-d);}
  .btn-accent{background:var(--accent);color:#fff;box-shadow:0 6px 0 0 var(--accent-d);}
  .btn-accent:active{box-shadow:0 2px 0 0 var(--accent-d);}
  .btn-ghost{background:#fff;color:var(--ink-soft);border:2px solid var(--line);}
  .btn[disabled]{opacity:.4;cursor:default;box-shadow:none;transform:none;}
  .pulse{animation:pulse 1.2s ease-in-out infinite;}
  @keyframes pulse{0%,100%{box-shadow:0 6px 0 0 var(--primary-d),0 0 0 0 rgba(47,179,154,.35)}50%{box-shadow:0 6px 0 0 var(--primary-d),0 0 0 9px rgba(47,179,154,0)}}

  .screen{display:none;animation:pop .35s ease both;}
  .screen.active{display:block;}
  @keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}

  /* ====== ログイン ====== */
  .login-card{background:var(--card);border-radius:var(--r);padding:34px 26px 30px;
    box-shadow:var(--shadow);text-align:center;border:1px solid var(--line);}
  .mascot{width:104px;height:104px;margin:0 auto 6px;display:block;animation:bob 3s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
  .brand{font-family:var(--font-d);font-weight:900;font-size:2.1rem;color:var(--ink);letter-spacing:.04em;}
  .brand .dot{color:var(--accent);}
  .tag{display:inline-block;margin-top:8px;background:var(--paper2);color:var(--ink-soft);
    font-weight:700;font-size:.82rem;padding:6px 14px;border-radius:99px;}
  .field{text-align:left;margin-top:20px;}
  .field label{font-weight:700;font-size:.86rem;color:var(--ink-soft);margin-left:6px;}
  .field input{width:100%;margin-top:6px;font-family:var(--font-b);font-size:1.05rem;font-weight:500;
    padding:14px 16px;border:2px solid var(--line);border-radius:16px;background:#FFFDF8;color:var(--ink);
    transition:border-color .15s ease, box-shadow .15s ease;}
  .field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(47,179,154,.16);}
  .login-card .btn{width:100%;margin-top:24px;font-size:1.1rem;padding:16px;}
  .note{margin-top:14px;font-size:.74rem;color:var(--ink-soft);line-height:1.6;}

  /* ====== ホーム ====== */
  .home-hello{padding:2px 6px 14px;}
  .home-hello h1{font-family:var(--font-d);font-weight:900;font-size:1.35rem;}
  .home-hello p{color:var(--ink-soft);font-weight:600;font-size:.85rem;margin-top:3px;}
  .ptcard{background:linear-gradient(135deg,#2FB39A,#37C9A9);border-radius:var(--r);color:#fff;
    padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
  .ptcard::after{content:"";position:absolute;top:-50%;right:-15%;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.13);}
  .ptcard .pt{font-family:var(--font-d);font-weight:900;font-size:2rem;line-height:1;}
  .ptcard .pt small{font-size:.9rem;font-weight:700;}
  .ptcard .rank{margin-top:6px;font-weight:800;font-size:.92rem;}
  .ptcard .rbar{margin-top:10px;height:9px;background:rgba(255,255,255,.3);border-radius:99px;overflow:hidden;}
  .ptcard .rbar i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .6s ease;}
  .ptcard .rnext{margin-top:6px;font-size:.72rem;font-weight:700;opacity:.95;}
  .weekcard{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    padding:20px;box-shadow:var(--shadow);}
  .weekcard .wno{font-family:var(--font-d);font-weight:900;color:var(--accent-d);font-size:.92rem;}
  .weekcard h2{font-family:var(--font-d);font-weight:900;font-size:1.4rem;margin-top:4px;}
  .weekcard .winfo{margin-top:6px;color:var(--ink-soft);font-weight:600;font-size:.85rem;line-height:1.6;}
  .weekcard .btn{width:100%;margin-top:16px;}
  .testflag{display:inline-block;background:linear-gradient(135deg,#FF8A5B,#FF6B6B);color:#fff;
    font-weight:800;font-size:.72rem;padding:4px 12px;border-radius:99px;margin-left:6px;}
  .hardrow{margin-top:12px;}
  .hardrow .btn{width:100%;background:linear-gradient(135deg,var(--hard1),var(--hard2));color:var(--gold);box-shadow:0 6px 0 0 #2A2440;}
  .wghead{margin:20px 6px 8px;font-weight:800;font-size:.88rem;color:var(--ink-soft);}
  .weekgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;}
  .wk{aspect-ratio:1;border:none;border-radius:10px;background:#fff;border:1.5px solid var(--line);
    font-family:var(--font-d);font-weight:700;font-size:.78rem;color:var(--ink-soft);cursor:pointer;transition:transform .1s;}
  .wk:active{transform:scale(.9);}
  .wk.test{background:#FFF0D6;border-color:#F4DCAE;color:#C9821E;}
  .wk.cur{background:var(--primary);border-color:var(--primary-d);color:#fff;box-shadow:0 3px 0 var(--primary-d);}
  .home-note{margin:16px 4px 70px;font-size:.72rem;color:var(--ink-soft);line-height:1.7;}

  /* ====== アプリ ====== */
  .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 4px;gap:8px;}
  .topbar .who{font-weight:700;font-size:.92rem;color:var(--ink);min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar .who span{display:none;}   /* 問題画面では挨拶文を隠して名前だけスッキリ（縦長潰れ防止） */
  .top-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .setbadge{font-family:var(--font-d);font-weight:700;font-size:.78rem;color:#fff;background:var(--primary);
    padding:7px 12px;border-radius:99px;white-space:nowrap;max-width:44vw;overflow:hidden;text-overflow:ellipsis;}
  body[data-mode="hard"] .setbadge{background:linear-gradient(135deg,var(--hard1),var(--hard2));color:var(--gold);}
  body[data-mode="test"] .setbadge{background:linear-gradient(135deg,#FF8A5B,#FF6B6B);}
  .mute,.homebtn{width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:#fff;cursor:pointer;
    font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .progress-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:0 4px;}
  .bar{flex:1;height:12px;background:var(--paper2);border-radius:99px;overflow:hidden;border:1px solid var(--line);}
  .bar i{display:block;height:100%;width:5%;background:linear-gradient(90deg,var(--primary),#5CD0BA);
    border-radius:99px;transition:width .35s cubic-bezier(.4,1.3,.5,1);}
  body[data-mode="hard"] .bar i{background:linear-gradient(90deg,var(--hard2),#8E79C9);}
  body[data-mode="test"] .bar i{background:linear-gradient(90deg,#FF8A5B,#FFB07C);}
  .count{font-family:var(--font-d);font-weight:700;font-size:.92rem;color:var(--ink-soft);white-space:nowrap;}
  .count b{color:var(--accent-d);font-size:1.15rem;}
  .combo{font-family:var(--font-d);font-weight:900;font-size:.85rem;color:#fff;background:linear-gradient(135deg,#FF8A5B,#FF6B6B);
    padding:4px 11px;border-radius:99px;display:none;animation:comboIn .3s cubic-bezier(.3,1.6,.5,1) both;white-space:nowrap;}
  .combo.show{display:inline-block;}
  @keyframes comboIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

  .card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
    border:1px solid var(--line);padding:24px 22px;min-height:430px;
    display:flex;flex-direction:column;position:relative;overflow:hidden;}
  .card::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;
    background:linear-gradient(90deg,var(--accent),#FFB07C);}
  body[data-mode="hard"] .card::before{background:linear-gradient(90deg,var(--hard2),var(--gold));}
  body[data-mode="test"] .card::before{background:linear-gradient(90deg,#FF6B6B,#FFD86B);}
  .card.out-l{animation:outL .18s ease-in both;}
  .card.out-r{animation:outR .18s ease-in both;}
  .card.in-r{animation:inR .26s cubic-bezier(.2,1.2,.4,1) both;}
  .card.in-l{animation:inL .26s cubic-bezier(.2,1.2,.4,1) both;}
  @keyframes outL{to{transform:translateX(-46px) rotate(-2deg);opacity:0}}
  @keyframes outR{to{transform:translateX(46px) rotate(2deg);opacity:0}}
  @keyframes inR{from{transform:translateX(46px) rotate(2deg);opacity:0}to{transform:none;opacity:1}}
  @keyframes inL{from{transform:translateX(-46px) rotate(-2deg);opacity:0}to{transform:none;opacity:1}}

  .qhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;margin-top:4px;}
  .qno{font-family:var(--font-d);font-weight:900;font-size:1.45rem;color:var(--ink);}
  .qtype{font-weight:700;font-size:.74rem;padding:5px 11px;border-radius:99px;}
  .t-基礎{background:#E4F4F0;color:var(--primary-d);}
  .t-標準{background:#FFF0D6;color:#C9821E;}
  .t-文章題{background:#FBE3DA;color:var(--accent-d);}
  .t-チャレンジ{background:#EDE6FA;color:#7A5BC2;}
  .t-テスト{background:linear-gradient(135deg,#FF8A5B,#FF6B6B);color:#fff;}
  .t-整数,.t-図形,.t-関数,.t-確率,.t-場合の数{background:#2E2A45;color:var(--gold);}

  .qbody{flex:1;display:flex;flex-direction:column;justify-content:center;}
  .prompt{font-weight:700;font-size:1rem;color:var(--ink-soft);margin-bottom:14px;}
  .eqs{display:flex;flex-direction:column;gap:10px;align-items:center;}
  .eq{font-family:var(--font-d);font-weight:800;font-size:1.42rem;letter-spacing:.01em;color:var(--ink);
    background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:14px 18px;min-width:60%;text-align:center;box-shadow:0 3px 10px -6px rgba(70,55,30,.18);}
  .wordq{font-size:1.06rem;line-height:1.75;font-weight:500;color:var(--ink);background:var(--paper);
    border-radius:16px;padding:18px 20px;border:1px solid var(--line);}
  .wordq .ask{display:block;margin-top:10px;font-weight:700;color:var(--accent-d);}

  .choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
  .choice-btn{padding:13px 10px;border-radius:14px;border:2px solid var(--line);background:#fff;
    font-size:.88rem;font-weight:700;cursor:pointer;transition:all .15s ease;
    text-align:center;line-height:1.4;color:var(--ink);width:100%;}
  .choice-btn:active{transform:scale(.97);}
  .choices.answered .choice-btn{cursor:default;pointer-events:none;}
  .choice-btn.choice-correct{border-color:var(--good) !important;background:#EAF7F3;color:var(--primary-d);}
  .choice-btn.choice-wrong{border-color:var(--bad) !important;background:#FFF3E2;color:#C9821E;}

  .answer{margin-top:18px;border-top:1.5px solid var(--line);padding-top:18px;display:none;animation:slidein .3s ease both;}
  .answer.show{display:block;}
  @keyframes slidein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  .ans-label{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-weight:900;
    color:#fff;background:var(--good);padding:6px 14px;border-radius:99px;font-size:.86rem;}
  .ans-val{margin-top:10px;font-family:var(--font-d);font-weight:900;font-size:1.3rem;color:var(--primary-d);
    background:#EAF7F3;border-radius:14px;padding:12px 16px;text-align:center;letter-spacing:.04em;line-height:1.5;}
  .steps-title{margin-top:18px;font-weight:700;font-size:.92rem;color:var(--ink-soft);display:flex;align-items:center;gap:7px;}

  .judge{margin-top:14px;display:none;gap:10px;}
  .judge.show{display:flex;}
  .judge button{flex:1;font-family:var(--font-b);font-weight:800;font-size:.98rem;border-radius:16px;
    padding:13px 8px;cursor:pointer;border:2.5px solid transparent;transition:all .15s ease;}
  .j-ok{background:#EAF7F3;color:var(--primary-d);border-color:#CBE9E1 !important;}
  .j-ng{background:#FFF3E2;color:#C9821E;border-color:#F4E0BF !important;}
  .j-ok.sel{background:var(--good);color:#fff;border-color:var(--primary-d) !important;transform:scale(1.03);}
  .j-ng.sel{background:var(--bad);color:#fff;border-color:#D88A2B !important;transform:scale(1.03);}
  .judge button:active{transform:scale(.97);}

  .controls{display:flex;gap:8px;margin-top:14px;align-items:stretch;}
  .controls .btn{flex:1;padding:13px 6px;font-size:.92rem;white-space:nowrap;overflow:hidden;}
  .btn-reveal{flex:1.3 !important;}
  .hint-swipe{text-align:center;font-size:.72rem;color:var(--ink-soft);margin-top:11px;opacity:.8;}

  /* 問題画面はマスコットを少し小さめにし、カード下に余白を作って操作ボタンと被らせない
     （透過や非表示はしない＝いつも通りの色で、ちゃんと喋る） */
  #app.screen{padding-bottom:96px;}
  body[data-screen="app"] #buddy{width:74px;height:74px;right:10px;bottom:10px;}
  body[data-screen="login"] #buddy{display:none;}   /* ログイン画面は右下マスコットを出さない（ログインカード内のマスコットのみ表示） */
  /* 英単語帳（iframe）＝画面いっぱい。body/wrapの余白を外し、戻る🏠だけ左上にフロート */
  body[data-screen="vocab"]{padding:0;}
  body[data-screen="vocab"] .wrap{max-width:none;}
  #vocab.screen{padding:0;}
  .vocab-bar{position:fixed;top:8px;left:8px;z-index:60;margin:0;padding:0;background:none;}
  .vocab-bar .vocab-title{display:none;}
  .vocab-bar .homebtn{box-shadow:0 2px 10px rgba(0,0,0,.18);}
  .vocab-frame{display:block;width:100vw;height:100dvh;border:none;background:#fff;}
  body[data-screen="vocab"] #buddy, body[data-screen="vocab"] #bubble{display:none;}

  /* ====== 結果 ====== */
  .done-card{background:var(--card);border-radius:var(--r);padding:30px 24px;box-shadow:var(--shadow);
    text-align:center;border:1px solid var(--line);margin-bottom:70px;}
  .done-card h2{font-family:var(--font-d);font-weight:900;font-size:1.55rem;margin-top:14px;}
  .done-card .msg{margin-top:10px;color:var(--ink-soft);line-height:1.85;font-weight:500;font-size:.92rem;}
  .ring-wrap{position:relative;width:138px;height:138px;margin:4px auto 0;}
  .ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
  .ring-bg{fill:none;stroke:var(--paper2);stroke-width:13;}
  .ring-fg{fill:none;stroke:url(#ringGrad);stroke-width:13;stroke-linecap:round;
    stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.8,.3,1);}
  .ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .ring-num b{font-family:var(--font-d);font-weight:900;font-size:2rem;color:var(--ink);}
  .ring-num b small{font-size:1rem;}
  .ring-num span{font-size:.72rem;font-weight:700;color:var(--ink-soft);}
  .ptget{margin-top:14px;display:inline-block;font-family:var(--font-d);font-weight:900;font-size:1.05rem;
    color:#fff;background:linear-gradient(135deg,#FF8A5B,#FF6B6B);padding:9px 20px;border-radius:99px;
    animation:comboIn .4s cubic-bezier(.3,1.6,.5,1) both;}
  .rankup{margin-top:10px;font-weight:800;color:var(--primary-d);font-size:.95rem;}
  .res-stats{display:flex;gap:8px;margin-top:18px;}
  .stat{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px 6px;}
  .stat b{font-family:var(--font-d);font-weight:900;font-size:1.3rem;display:block;}
  .stat span{font-size:.7rem;font-weight:700;color:var(--ink-soft);}
  .s-ok b{color:var(--primary-d);} .s-ng b{color:#C9821E;} .s-skip b{color:var(--ink-soft);}
  .chip-grid{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:18px;}
  .chip{width:34px;height:34px;border-radius:11px;font-family:var(--font-d);font-weight:700;font-size:.82rem;
    display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;color:#fff;transition:transform .12s;}
  .chip:active{transform:scale(.9);}
  .c-ok{background:var(--good);} .c-ng{background:var(--bad);} .c-skip{background:#CFC6B8;}
  .done-card .btn{width:100%;margin-top:12px;}
  .done-card .btn:first-of-type{margin-top:22px;}
  .mode-back{display:block;margin:14px auto 0;background:none;border:none;color:var(--ink-soft);
    font-family:var(--font-b);font-weight:700;font-size:.86rem;cursor:pointer;text-decoration:underline;}

  /* ====== マスコット ====== */
  #buddy{position:fixed;right:14px;bottom:14px;width:96px;height:96px;z-index:50;pointer-events:none;
    animation:floatY 3.4s ease-in-out infinite;}
  #buddy svg{width:100%;height:100%;display:block;overflow:visible;pointer-events:auto;cursor:pointer;
    filter:drop-shadow(0 8px 10px rgba(16,138,102,.30));
    animation:squish 3.4s ease-in-out infinite;transform-origin:50% 85%;}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
  @keyframes squish{0%,100%{transform:scale(1,1)}25%{transform:scale(1.05,.95)}50%{transform:scale(.96,1.06)}75%{transform:scale(1.03,.98)}}
  #buddy.jump svg{animation:jumpy .55s cubic-bezier(.3,1.5,.5,1);}
  @keyframes jumpy{0%{transform:scale(1,1)}30%{transform:translateY(-22px) scale(.94,1.1)}60%{transform:translateY(0) scale(1.08,.9)}100%{transform:scale(1,1)}}
  @media (max-width:380px){#buddy{width:80px;height:80px;}}
  .buddy-shadow{animation:shadowPulse 3.4s ease-in-out infinite;transform-origin:center;}
  @keyframes shadowPulse{0%,100%{opacity:.18;transform:scaleX(1)}50%{opacity:.09;transform:scaleX(.8)}}
  .eyes-normal{animation:blink 4.8s infinite;transform-box:fill-box;transform-origin:center;}
  @keyframes blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}97%{transform:scaleY(1)}}
  .mouth-talk{transform-box:fill-box;transform-origin:center;}
  #buddy.talking .mouth-talk{animation:talk .25s ease-in-out infinite;}
  @keyframes talk{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1.15)}}
  .mood{display:none;}
  #buddy[data-mood="normal"] .m-normal{display:block;}
  #buddy[data-mood="happy"] .m-happy{display:block;}
  #buddy[data-mood="surprised"] .m-surprised{display:block;}
  #buddy[data-mood="think"] .m-think{display:block;}
  #bubble{position:fixed;right:98px;bottom:74px;z-index:51;max-width:198px;
    background:#fff;border:2px solid var(--line);border-radius:18px 18px 4px 18px;
    padding:11px 14px;font-family:var(--font-b);font-weight:700;font-size:.9rem;line-height:1.55;color:var(--ink);
    box-shadow:0 12px 24px -12px rgba(70,55,30,.45);opacity:0;transform:translateY(8px) scale(.88);
    transform-origin:bottom right;transition:opacity .25s ease, transform .25s cubic-bezier(.3,1.4,.5,1);pointer-events:none;}
  #bubble.show{opacity:1;transform:translateY(0) scale(1);}
  #bubble::after{content:"";position:absolute;right:-9px;bottom:9px;border:9px solid transparent;border-left-color:#fff;border-right:0;}
  #bubble::before{content:"";position:absolute;right:-12px;bottom:7px;border:11px solid transparent;border-left-color:var(--line);border-right:0;}
  @media (max-width:380px){#bubble{right:84px;bottom:64px;max-width:170px;font-size:.84rem;}}
  #fx{position:fixed;inset:0;pointer-events:none;z-index:60;}

  /* ====== 教科タブ・単元グリッド（フォルダ版で追加） ====== */
  .stabs{display:flex;gap:8px;overflow-x:auto;padding:2px 4px 10px;-webkit-overflow-scrolling:touch;}
  .stab{flex-shrink:0;border:2px solid var(--line);background:#fff;border-radius:99px;
    padding:9px 16px;font-family:var(--font-b);font-weight:800;font-size:.9rem;color:var(--ink-soft);cursor:pointer;
    transition:all .15s ease;}
  .stab.on{background:var(--primary);border-color:var(--primary-d);color:#fff;box-shadow:0 3px 0 var(--primary-d);}
  .unit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;}
  .ucard{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:14px 13px;
    text-align:left;cursor:pointer;font-family:var(--font-b);transition:transform .12s ease;position:relative;
    box-shadow:0 4px 10px -6px rgba(70,55,30,.18);}
  .ucard:active{transform:scale(.96);}
  .ucard .ue{font-size:1.5rem;}
  .ucard .un{display:block;margin-top:6px;font-weight:800;font-size:.86rem;color:var(--ink);line-height:1.4;}
  .ucard .ub{position:absolute;top:9px;right:9px;font-size:.6rem;font-weight:900;color:#fff;
    background:var(--accent);padding:3px 8px;border-radius:99px;}
  .ucard.u-done{border-color:var(--good);}
  .ucard .ub-done{position:absolute;bottom:9px;right:9px;width:20px;height:20px;display:flex;
    align-items:center;justify-content:center;font-size:.72rem;font-weight:900;color:#fff;
    background:var(--good);border-radius:99px;line-height:1;}
  .ucard.u-test{background:linear-gradient(135deg,#FF8A5B,#FF6B6B);border:none;}
  .ucard.u-test .un{color:#fff;}
  .ucard.u-hard{background:linear-gradient(135deg,var(--hard1),var(--hard2));border:none;}
  .ucard.u-hard .un{color:var(--gold);}
  /* ⭐スペシャル問題（入試発展）＝紫→金の豪華カード */
  .ucard.u-special{background:linear-gradient(135deg,#6E4FB8,#9B6BE3 50%,#FFD86B);border:none;
    box-shadow:0 8px 22px -8px rgba(110,79,184,.55);overflow:hidden;}
  .ucard.u-special .un{color:#fff;text-shadow:0 1px 2px rgba(50,30,5,.3);}
  .ucard.u-special .ue{filter:drop-shadow(0 2px 3px rgba(50,30,5,.25));}
  .ub-special{background:linear-gradient(135deg,#FFE08A,#FF9F45) !important;color:#6A4200 !important;letter-spacing:.04em;}
  .rand-note{margin:14px 4px 8px;background:#EAF7F3;border:1px solid #CBE9E1;
    border-radius:14px;padding:11px 14px;font-size:.82rem;font-weight:700;color:var(--primary-d);line-height:1.7;}
  .coming{background:var(--card);border:1.5px dashed var(--line);border-radius:var(--r);padding:34px 22px;
    text-align:center;color:var(--ink-soft);}
  .coming .ce{font-size:2.4rem;}
  .coming p{margin-top:10px;font-weight:700;font-size:.9rem;line-height:1.8;}
  .coming small{display:block;margin-top:8px;font-size:.72rem;font-weight:500;line-height:1.7;}

  /* グラフ・証明の図 */
  .gwrap{display:flex;justify-content:center;margin:6px 0 12px;}
  .gsvg{width:min(100%, 270px);height:auto;}

  /* 結果画面の再挑戦ボタン */
  .btn-regen{background:linear-gradient(135deg,#5B4B8A,#7A66B5);color:#fff;box-shadow:0 6px 0 0 #463A6E;}
  .btn-regen:active{box-shadow:0 2px 0 0 #463A6E;}

  /* ====== リッチ解説（方針・ステップカード・なんで？・型） ====== */
  .policy{margin-bottom:14px;background:#EAF7F3;border-left:5px solid var(--primary);border-radius:0 14px 14px 0;
    padding:11px 14px;font-size:.88rem;font-weight:700;line-height:1.85;color:#1c5a4d;}
  .policy::before{content:"💡 方針：";font-weight:900;}
  .policy em{font-style:normal;background:linear-gradient(transparent 62%, #BDEBDD 62%);}
  .stepc{display:flex;gap:11px;margin-top:13px;}
  .stepc .n{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;
    font-family:var(--font-d);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.86rem;
    box-shadow:0 3px 0 var(--accent-d);}
  .stepc .c{flex:1;background:#fff;border:1px solid var(--line);border-radius:15px;padding:11px 13px;
    font-size:.92rem;line-height:1.95;font-weight:500;min-width:0;}
  .stepc .c .calc{display:block;font-family:var(--font-d);font-weight:700;background:var(--paper);
    border-radius:10px;padding:7px 12px;margin:7px 0 2px;font-size:.97rem;letter-spacing:.02em;overflow-x:auto;}
  .stepc .c .why{display:block;margin-top:7px;font-size:.8rem;color:var(--ink-soft);background:#FDF3EC;
    border-radius:10px;padding:7px 11px;line-height:1.8;}
  .stepc .c .why::before{content:"🤔 なんで？ ";font-weight:800;color:var(--accent-d);}
  .kata{margin-top:16px;background:#FFF8E8;border:1.5px solid #F2E2B8;border-radius:15px;padding:11px 14px;}
  .kata::before{content:"📘 この「型」をおぼえよう";display:block;font-family:var(--font-d);font-weight:900;
    font-size:.82rem;color:#B07F1E;margin-bottom:5px;}
  .kata{font-size:.84rem;font-weight:600;line-height:1.9;color:#7A5F23;}
  .ans-val{font-size:1.18rem;}
  /* KaTeX のサイズ調整 */
  .katex{font-size:1.06em;}
  .eq .katex{font-size:1.15em;}

  /* ====== 章アコーディオン・小単元グリッド ====== */
  .chap-block{margin:0 0 11px;}
  .chap-head{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
    font-family:var(--font-d);font-weight:900;font-size:1rem;color:var(--ink);
    background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:15px 16px;
    transition:.15s;box-shadow:0 1px 0 rgba(0,0,0,.02);}
  .chap-head:active{transform:scale(.985);}
  .chap-head .ce{font-size:1.3rem;line-height:1;}
  .chap-head .cn{flex:1;}
  .chap-head .cmeta{font-size:.68rem;font-weight:800;color:var(--sub);background:var(--paper);
    border-radius:9px;padding:3px 8px;}
  .chap-head .carrow{font-size:.85rem;color:var(--sub);transition:transform .2s;}
  .chap-head.chap-headopen{background:linear-gradient(135deg,#EAF7F3,#F4FAF7);border-color:var(--brand);color:var(--brand);}
  .chap-head.chap-headopen .carrow{transform:rotate(180deg);color:var(--brand);}
  .chap-head.chap-headopen .cmeta{background:#fff;color:var(--brand);}
  .chap-units{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .chap-units.chap-collapsed{display:none;}
  .chap-units.chap-open{display:grid;animation:chapOpen .22s ease;margin-top:10px;padding:2px;}
  @keyframes chapOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
  .ucard.u-soon{opacity:.55;background:repeating-linear-gradient(45deg,#F3F0E9,#F3F0E9 8px,#EDE9E0 8px,#EDE9E0 16px);
    border-style:dashed;cursor:default;}
  .ucard.u-soon:active{transform:none;}
  .ub-soon{background:#A89F8E !important;}

  /* ====== 証明じっくりモード ====== */
  .proof-goal{background:linear-gradient(135deg,#FFF3E8,#FFE9D6);border:1.5px solid #F2C9A0;
    border-radius:14px;padding:11px 14px;font-weight:800;color:#9A5B2E;font-size:.9rem;margin-bottom:12px;}
  .proof-goal b{color:#E0702F;}
  .proof-step .proof-t{font-weight:800;color:var(--ink);line-height:1.5;}
  .proof-step.proof-last{background:linear-gradient(135deg,#EAF7F3,#F4FAF7);border-color:var(--brand);}
  .proof-step.proof-last .proof-t{color:var(--brand);}
  .proof-why-btn{margin-top:8px;background:#FBEEE6;border:1px solid #F2C9A0;color:#C25E2A;
    font-weight:800;font-size:.72rem;border-radius:999px;padding:5px 12px;cursor:pointer;transition:.12s;}
  .proof-why-btn:active{transform:scale(.95);}
  .proof-reason{margin-top:8px;background:#FFF8F2;border-left:3px solid #F2A86A;border-radius:8px;
    padding:9px 11px;font-size:.8rem;color:#7A6A58;line-height:1.55;animation:chapOpen .18s ease;}
  .proof-tip{margin-top:12px;background:#FFFBEA;border:1.5px dashed #E6C760;border-radius:12px;
    padding:11px 14px;font-size:.82rem;color:#8A6D1E;font-weight:700;line-height:1.5;}

  /* ====== 授業スクリーン ====== */
  .ls-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:0 4px;}
  .ls-unitname{flex:1;font-family:var(--font-d);font-weight:900;font-size:1rem;color:var(--ink);
    line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ls-skip{font-size:.76rem!important;padding:8px 14px!important;flex-shrink:0;}

  .ls-viewer{position:relative;min-height:340px;}
  .ls-slide{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
    border:1px solid var(--line);padding:20px 20px 24px;display:none;}
  .ls-slide.ls-active{display:flex;flex-direction:column;gap:14px;animation:pop .28s ease both;}

  .ls-chip{display:inline-flex;align-items:center;background:linear-gradient(135deg,var(--primary),#5CD0BA);
    color:#fff;font-family:var(--font-d);font-weight:900;font-size:.82rem;padding:7px 16px;
    border-radius:99px;align-self:flex-start;}

  .ls-visual{display:flex;justify-content:center;align-items:center;
    background:var(--paper);border-radius:18px;border:1px solid var(--line);
    overflow:hidden;padding:10px;}
  .ls-visual svg{width:100%;height:auto;display:block;}

  .ls-body{font-size:.93rem;font-weight:500;line-height:1.95;color:var(--ink);}
  .ls-body strong{font-weight:900;color:var(--primary-d);}
  .ls-body em{font-style:normal;background:linear-gradient(transparent 62%,#BDEBDD 62%);}
  .ls-body p{margin-bottom:8px;}
  .ls-body p:last-child{margin-bottom:0;}
  .ls-point{background:#EAF7F3;border-left:4px solid var(--primary);border-radius:0 12px 12px 0;
    padding:9px 13px;margin:6px 0;font-weight:700;font-size:.87rem;line-height:1.65;}
  .ls-warn{background:#FFF3E8;border-left:4px solid var(--accent);border-radius:0 12px 12px 0;
    padding:9px 13px;margin:6px 0;font-weight:700;font-size:.87rem;line-height:1.65;color:#8A4A2A;}
  .ls-body table{width:100%;border-collapse:collapse;margin:8px 0;font-size:.83rem;border-radius:12px;overflow:hidden;}
  .ls-body th{background:var(--primary);color:#fff;padding:8px 10px;font-weight:800;text-align:center;}
  .ls-body td{border:1px solid var(--line);padding:7px 10px;text-align:center;}
  .ls-body tr:nth-child(even) td{background:var(--paper);}

  .ls-foot{margin-top:14px;display:flex;flex-direction:column;gap:11px;align-items:center;
    padding-bottom:80px;}
  .ls-dots{display:flex;gap:7px;align-items:center;}
  .ls-dot{width:10px;height:10px;border-radius:5px;background:var(--line);border:none;cursor:pointer;
    padding:0;transition:all .22s ease;}
  .ls-dot.ls-dot-on{background:var(--primary);width:26px;}
  .ls-nav{display:flex;gap:10px;width:100%;}
  .ls-nav .btn{flex:1;padding:14px 10px;}
  .ls-nav .btn-accent{flex:1.5!important;}

  /* ===================================================================
     ポップ・ゲーム感の磨き（世界観は保持・transform/opacity中心）
  =================================================================== */

  /* --- ボタン：内側ハイライトで一段立体に＋ホバーで浮く --- */
  .btn-primary,.btn-accent{position:relative;}
  .btn-primary{box-shadow:0 6px 0 0 var(--primary-d), inset 0 1px 0 rgba(255,255,255,.28);}
  .btn-accent{box-shadow:0 6px 0 0 var(--accent-d), inset 0 1px 0 rgba(255,255,255,.28);}
  @media (hover:hover){
    .btn-primary:hover,.btn-accent:hover{transform:translateY(-1px);}
    .ucard:hover{transform:translateY(-2px);box-shadow:0 10px 18px -8px rgba(70,55,30,.32);}
    .stat:hover{transform:translateY(-2px);}
    .stab:hover{transform:translateY(-1px);}
  }
  .btn-primary:active{box-shadow:0 2px 0 0 var(--primary-d), inset 0 1px 0 rgba(255,255,255,.2);}
  .btn-accent:active{box-shadow:0 2px 0 0 var(--accent-d), inset 0 1px 0 rgba(255,255,255,.2);}

  /* --- ポイントカード：教科色に追従＋ランクバーに光沢が流れる --- */
  .ptcard{background:linear-gradient(135deg,var(--primary),var(--primary-d));}
  .ptcard .rbar{position:relative;}
  .ptcard .rbar i{position:relative;overflow:hidden;}
  .ptcard .rbar i::after{content:"";position:absolute;top:0;left:0;width:42%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
    transform:skewX(-18deg);animation:rbarShine 3.4s ease-in-out infinite;}
  @keyframes rbarShine{0%{left:-50%}55%,100%{left:120%}}
  .ptcard .pt{font-size:2.15rem;}

  /* --- 教科タブ：ONで少し大きく弾む --- */
  .stab{transition:transform .15s cubic-bezier(.34,1.5,.5,1), background .15s ease, color .15s ease, border-color .15s ease;}
  .stab.on{transform:scale(1.05);}

  /* --- 単元カード：絵文字を少し大きく＆ふわっと --- */
  .ucard{transition:transform .14s cubic-bezier(.34,1.4,.5,1), box-shadow .14s ease;}
  .ucard .ue{font-size:1.62rem;}

  /* --- 授業スライドのタイトルチップに微光沢 --- */
  .ls-chip{box-shadow:0 3px 8px -3px rgba(47,179,154,.5), inset 0 1px 0 rgba(255,255,255,.3);}

  /* ===================================================================
     レスポンシブ補強
  =================================================================== */
  @media (max-width:360px){
    .wrap{max-width:100%;}
    .home-hello h1{font-size:1.2rem;}
    .unit-grid,.chap-units{gap:8px;}
    .ucard{padding:12px 11px;}
    .ucard .un{font-size:.8rem;}
    .stabs{gap:6px;padding:2px 2px 9px;}
    .stab{padding:8px 13px;font-size:.84rem;}
    .ptcard{padding:16px 17px;}
  }
  @media (min-width:520px){
    .wrap{max-width:470px;}
  }