:root{
    --bg1:#fff4d6; --bg2:#ffe2ef; --bg3:#d9f0ff;
    --ink:#3a2f55; --pink:#ff7eb3; --pink-d:#e85f97;
    --blue:#4aa8ff; --blue-d:#2f86db; --green:#46c98b; --green-d:#2fa971;
    --yellow:#ffd84d; --purple:#9b6bff; --card:#ffffff;
    --shadow:0 6px 0 rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.12);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation;}
  html,body{margin:0;}
  body{
    font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI",sans-serif;
    color:var(--ink);
    background:linear-gradient(160deg,var(--bg1),var(--bg2) 50%,var(--bg3));
    background-attachment:fixed;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;   /* 中身を たてに 中央バランスで */
    -webkit-user-select:none; user-select:none;
    overflow-x:hidden;
  }
  /* せなかの はいけいを 画面全体に 固定で 敷く（下まで すきまなく） */
  #bgLayer{
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(160deg,var(--bg1),var(--bg2) 50%,var(--bg3));
    background-size:cover; background-position:center top;
  }
  .wrap{width:100%;max-width:560px;margin:0 auto;padding:14px 14px 30px;}
  h1,h2,h3{margin:0;}
  button{font-family:inherit;cursor:pointer;border:none;}

  /* 上のバー（コイン表示など） */
  .topbar{
    display:flex;align-items:center;gap:10px;
    background:var(--card);border-radius:20px;padding:10px 14px;
    box-shadow:var(--shadow);margin-bottom:14px;
  }
  .coin-badge{display:flex;align-items:center;gap:6px;font-weight:800;font-size:22px;}
  .coin-badge .c{font-size:26px;}
  .spacer{flex:1;}
  .icon-btn{
    background:var(--bg2);border-radius:14px;width:46px;height:46px;
    font-size:24px;box-shadow:0 4px 0 rgba(0,0,0,.1);
  }
  .icon-btn:active{transform:translateY(3px);box-shadow:none;}

  /* タブ（がめんきりかえ） */
  .tabs{display:flex;gap:10px;margin-bottom:14px;}
  .tab{
    flex:1;background:var(--card);border-radius:16px;padding:12px 4px;
    font-size:17px;font-weight:800;color:#9a90b0;box-shadow:var(--shadow);
    display:flex;flex-direction:column;align-items:center;gap:2px;
  }
  .tab .em{font-size:24px;}
  .tab.active{color:#fff;background:var(--purple);}
  .tab:active{transform:translateY(3px);}

  .screen{display:none;}
  .screen.active{display:block;animation:pop .25s ease;}
  @keyframes pop{from{transform:scale(.97);opacity:.4;}to{transform:scale(1);opacity:1;}}

  /* === けいさん画面 === */
  .stat-row{display:flex;gap:10px;margin-bottom:12px;}
  .stat{
    flex:1;background:var(--card);border-radius:16px;padding:8px;text-align:center;
    box-shadow:var(--shadow);
  }
  .stat .n{font-size:24px;font-weight:900;line-height:1;}
  .stat .l{font-size:12px;color:#9a90b0;margin-top:3px;}

  .problem-card{
    background:var(--card);border-radius:26px;box-shadow:var(--shadow);
    padding:20px 16px 18px;text-align:center;margin-bottom:12px;position:relative;overflow:hidden;
  }
  .kind-tag{
    display:inline-block;font-weight:800;font-size:14px;color:#fff;
    padding:4px 14px;border-radius:999px;margin-bottom:6px;
  }
  .kind-mul{background:var(--blue);}
  .kind-sub{background:var(--pink);}
  .kind-div{background:var(--green);}
  .problem{font-size:54px;font-weight:900;letter-spacing:1px;margin:4px 0 2px;}
  .problem.eq{font-size:30px;line-height:1.35;letter-spacing:0;}   /* かけ算のきまり の式（長め）用 */
  /* 2桁×2桁の「やり方」ボタン＆お手本 */
  .howto-btn{position:absolute;top:10px;right:12px;background:var(--yellow);color:#7a5a00;
    border-radius:12px;font-size:13px;font-weight:800;padding:5px 11px;box-shadow:0 3px 0 #d9b22f;z-index:2;}
  .howto-btn:active{transform:translateY(2px);box-shadow:none;}
  .modal.howto{max-width:390px;text-align:left;}
  .modal.howto h2{text-align:center;font-size:22px;margin-bottom:2px;}
  .howto-ex{text-align:center;font-size:20px;font-weight:900;margin:2px 0 10px;color:var(--purple);}
  .hissan-demo{font-family:"SFMono-Regular",Menlo,Consolas,monospace;white-space:pre;text-align:right;
    font-size:23px;font-weight:900;line-height:1.5;color:var(--ink);
    background:#f7f4ff;border-radius:14px;padding:12px 22px;width:fit-content;margin:0 auto 12px;}
  .howto-steps{font-size:15px;line-height:1.95;font-weight:700;background:#fff7ea;border-radius:14px;padding:10px 14px;}
  .howto-steps b.b1{color:var(--blue);}
  .howto-steps b.b2{color:var(--pink-d);}
  .answer-row{display:flex;gap:12px;justify-content:center;margin:10px 0 2px;}
  .ans-field{flex:1;max-width:340px;}
  .ans-field.rem{max-width:150px;flex:0 0 auto;}
  .ans-label{font-size:14px;font-weight:800;color:#9a90b0;margin-bottom:4px;}
  .answer-box{
    min-height:64px;
    background:#f3f0fb;border:3px dashed #cdbff2;border-radius:18px;
    font-size:44px;font-weight:900;color:var(--purple);
    display:flex;align-items:center;justify-content:center;
  }
  .answer-box.empty{color:#c4bbd8;}
  .answer-box.active{border-style:solid;border-color:var(--purple);background:#ebe3ff;box-shadow:0 0 0 4px rgba(155,107,255,.18);}

  /* わり算の ひっ算（くもんと同じ かたち） */
  .hissan{display:none;align-items:center;justify-content:center;gap:4px;margin:8px 0 4px;color:var(--ink);}
  .hs-dv{font-size:46px;font-weight:900;align-self:flex-end;padding-bottom:6px;}
  .hs-paren{font-size:104px;font-weight:300;line-height:.7;align-self:flex-end;
    transform:translateY(8px) scaleX(.7);margin:0 -4px 0 2px;}
  .hs-col{display:flex;flex-direction:column;align-items:stretch;}
  .hs-quot{display:flex;justify-content:center;align-items:flex-end;min-height:60px;margin-bottom:3px;}
  .hs-dividend{border-top:5px solid currentColor;padding:6px 10px 0;font-size:46px;font-weight:900;
    letter-spacing:12px;text-align:center;}
  .hs-rem{display:flex;flex-direction:column;align-items:center;align-self:flex-end;margin-left:8px;}
  .hissan .ans-field{flex:0 0 auto;width:auto;max-width:none;}
  .hissan .ans-label{font-size:13px;}
  .hissan .answer-box{min-width:120px;min-height:54px;font-size:38px;padding:0 14px;}
  .hs-rem .answer-box{min-width:74px;}

  /* かけ算・ひき算の たて書き筆算（1の位から入力） */
  .tate{display:none;flex-direction:column;align-items:center;margin:8px 0 2px;color:var(--ink);--tcellw:46px;}
  .trow{display:grid;gap:4px;justify-content:center;align-items:center;}
  .tcell{width:var(--tcellw);height:54px;display:flex;align-items:center;justify-content:center;
    font-size:40px;font-weight:900;line-height:1;}
  .tcell.op{font-size:34px;}
  .tline{height:5px;border-radius:3px;background:currentColor;align-self:stretch;margin:4px 4px 7px;}
  .tans-cell{width:var(--tcellw);height:54px;display:flex;align-items:center;justify-content:center;
    font-size:38px;font-weight:900;color:var(--purple);
    background:#f3f0fb;border:3px dashed #cdbff2;border-radius:12px;}
  .tans-cell.empty{color:#c4bbd8;}
  .tans-cell.active{border-style:solid;border-color:var(--purple);background:#ebe3ff;
    box-shadow:0 0 0 4px rgba(155,107,255,.18);}
  .feedback{min-height:30px;font-size:20px;font-weight:800;margin-top:8px;}
  .feedback.ok{color:var(--green-d);}
  .feedback.ng{color:var(--pink-d);}

  /* テンキー */
  .pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;}
  .key{
    background:var(--card);border-radius:18px;font-size:30px;font-weight:900;
    padding:16px 0;box-shadow:var(--shadow);color:var(--ink);
  }
  .key:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.12);}
  .key.fn{font-size:22px;}
  .key.back{color:var(--pink-d);}
  .key.clear{color:#9a90b0;}
  .check-btn{
    width:100%;background:var(--green);color:#fff;font-size:26px;font-weight:900;
    border-radius:20px;padding:16px;box-shadow:0 6px 0 var(--green-d);
  }
  .check-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-d);}
  .check-btn.next{background:var(--blue);box-shadow:0 6px 0 var(--blue-d);}

  /* ごほうび（コインが飛ぶ） */
  .coinfly{position:fixed;font-size:30px;pointer-events:none;z-index:50;animation:fly .9s ease forwards;}
  @keyframes fly{0%{transform:translate(0,0) scale(.6);opacity:0;}20%{opacity:1;}100%{transform:translate(var(--dx),var(--dy)) scale(1.1);opacity:0;}}

  /* === なかま図鑑 === */
  .section-title{font-size:20px;font-weight:900;margin:4px 2px 10px;display:flex;align-items:center;gap:8px;}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .mon{
    background:var(--card);border-radius:20px;box-shadow:var(--shadow);
    padding:12px 6px 10px;text-align:center;position:relative;
  }
  .mon.locked{filter:grayscale(1);opacity:.45;}
  .mon .face{font-size:46px;line-height:1;}
  .mon .nm{font-size:13px;font-weight:800;margin-top:4px;}
  .mon .lv{font-size:11px;color:#9a90b0;margin-top:2px;}
  .mon .xpbar{height:7px;background:#eee;border-radius:99px;margin:6px 6px 0;overflow:hidden;}
  .mon .xpbar i{display:block;height:100%;background:var(--yellow);}
  .mon .star{position:absolute;top:6px;right:8px;font-size:13px;}
  .mon.evo-ready::after{content:"しんか!";position:absolute;top:6px;left:8px;background:var(--pink);color:#fff;font-size:10px;font-weight:900;padding:2px 6px;border-radius:99px;}
  .mon:active{transform:scale(.96);}

  /* たまご画面 */
  .egg-card{
    background:var(--card);border-radius:26px;box-shadow:var(--shadow);
    padding:22px 16px;text-align:center;margin-bottom:14px;
  }
  .egg{font-size:90px;line-height:1;animation:wob 2.2s ease-in-out infinite;}
  @keyframes wob{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}
  .big-btn{
    width:100%;color:#fff;font-size:23px;font-weight:900;border-radius:20px;padding:15px;
  }
  .big-btn.pink{background:var(--pink);box-shadow:0 6px 0 var(--pink-d);}
  .big-btn.yellow{background:var(--yellow);color:#7a5a00;box-shadow:0 6px 0 #d9b22f;}
  .big-btn:disabled{background:#d8d2e6;color:#fff;box-shadow:0 6px 0 #bdb6cf;}
  .big-btn:active:not(:disabled){transform:translateY(4px);}
  .hint{font-size:14px;color:#7a708f;text-align:center;line-height:1.5;}

  /* モーダル */
  .modal-bg{
    position:fixed;inset:0;background:rgba(40,30,60,.55);display:none;
    align-items:center;justify-content:center;z-index:100;padding:20px;
  }
  .modal-bg.show{display:flex;animation:pop .2s ease;}
  .modal{
    background:#fff;border-radius:26px;max-width:340px;width:100%;
    padding:22px 20px;text-align:center;box-shadow:var(--shadow);
  }
  .modal .big-face{font-size:90px;line-height:1;animation:bounce .6s ease;cursor:pointer;}
  @keyframes bounce{0%{transform:scale(.2) rotate(-20deg);}60%{transform:scale(1.2);}100%{transform:scale(1);}}
  .modal h2{font-size:24px;margin:8px 0 4px;}
  .modal p{font-size:16px;color:#6a5f80;margin:4px 0 16px;}
  .modal .big-btn{margin-top:6px;}
  .modal .row{display:flex;gap:10px;}

  /* おうちの人せってい */
  .settings .opt-row{margin:14px 0;}
  .settings .opt-label{font-weight:800;font-size:15px;margin-bottom:8px;}
  .bg-choices{display:flex;flex-wrap:wrap;gap:8px;}
  .bg-choice{flex:1 1 28%;min-width:90px;height:84px;border-radius:14px;background-size:cover;background-position:center top;
    position:relative;border:3px solid transparent;overflow:hidden;box-shadow:0 3px 0 rgba(0,0,0,.1);background-color:#eee;}
  .bg-choice span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.42);color:#fff;
    font-size:12px;font-weight:800;padding:3px 0;text-align:center;}
  .bg-choice.on{border-color:var(--purple);box-shadow:0 0 0 3px rgba(155,107,255,.32);}
  .bg-choice.locked{filter:grayscale(.55) brightness(.85);}
  .bg-choice.locked span{background:rgba(80,40,30,.62);}
  .bg-choice:active{transform:scale(.96);}
  .chips{display:flex;flex-wrap:wrap;gap:8px;}
  .chip{
    background:#f0ecfa;border-radius:12px;padding:9px 14px;font-weight:800;font-size:15px;color:#8a80a5;
  }
  .chip.on{background:var(--purple);color:#fff;}
  .seg{display:flex;gap:8px;}
  .seg .chip{flex:1;text-align:center;}

  .footnote{font-size:11px;color:#a99fbe;text-align:center;margin-top:18px;line-height:1.6;}

  /* あそびかた説明書 */
  .modal.help{max-width:420px;text-align:left;}
  .modal.help h2{text-align:center;font-size:24px;margin-bottom:6px;}
  .help-scroll{max-height:62vh;overflow-y:auto;padding:4px 2px;}
  .help-step{
    display:flex;gap:12px;align-items:flex-start;
    background:#f7f4ff;border-radius:16px;padding:12px 14px;margin:10px 0;
  }
  .help-step .he{font-size:34px;line-height:1.1;flex:0 0 auto;}
  .help-step .ht{font-size:16px;line-height:1.6;font-weight:700;}
  .help-step .ht b{color:var(--purple);}

  /* 画像そざい用 */
  .picwrap{position:relative;display:inline-flex;align-items:center;justify-content:center;}
  .picwrap>img:first-child{height:100%;width:auto;max-width:100%;object-fit:contain;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.18));}
  .crown-ov{position:absolute;top:-20%;left:50%;transform:translateX(-50%);
    height:42% !important;width:auto !important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
  /* きらきら進化（金・虹のかがやき） */
  .picwrap.shiny>img:first-child{
    filter:drop-shadow(0 0 7px #ffdf57) drop-shadow(0 0 13px rgba(255,210,70,.6)) saturate(1.3) brightness(1.07);
    animation:shinyHue 4s linear infinite;}
  @keyframes shinyHue{0%{filter:drop-shadow(0 0 7px #ffdf57) drop-shadow(0 0 13px rgba(255,210,70,.6)) saturate(1.35) brightness(1.07) hue-rotate(0deg);}
    100%{filter:drop-shadow(0 0 7px #ffdf57) drop-shadow(0 0 13px rgba(255,210,70,.6)) saturate(1.35) brightness(1.07) hue-rotate(360deg);}}
  .picwrap.shiny::after{content:"✨";position:absolute;top:-4%;right:-4%;font-size:38%;
    animation:sparkleSpin 2.2s ease-in-out infinite;pointer-events:none;}
  @keyframes sparkleSpin{0%,100%{transform:scale(.8) rotate(-10deg);opacity:.7}50%{transform:scale(1.25) rotate(15deg);opacity:1}}
  .coinico{height:1em;width:auto;vertical-align:-0.15em;}
  .coin-badge .coinico{height:30px;}
  #helpMascot{text-align:center;margin:-4px 0 4px;}
  #helpMascot img{height:120px;width:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));}
  .egg img{height:118px;width:auto;}