:root{
    color-scheme: light;
    --navy:#2b3a55;
    --navy-light:#4a5d80;
    --paper:#fbf9f4;
    --line:#dcd6c8;
    --ok:#3c9d6e;
    --ok-bg:#e3f5eb;
    --ng:#d1573f;
    --ng-bg:#fbe8e4;
    --key-bg:#ffffff;
    --key-shadow:#c9c2b0;
    --accent:#e8a33d;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  html{
    background:#fbf9f4;
    color-scheme: light;
    position:fixed;
    overflow:hidden;
    width:100%;
  }
  body{
    margin:0;
    font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
    background:var(--paper);
    color:var(--navy);
    display:flex;
    flex-direction:column;
    align-items:center;
    overscroll-behavior:none;
    user-select:none;
    position:fixed;
    inset:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .app{
    width:100%;
    max-width:480px;
    padding:calc(16px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    min-height:100vh;
  }

  /* ---------- 共通ヘッダー ---------- */
  h1{
    text-align:center;
    font-size:26px;
    font-weight:900;
    letter-spacing:.05em;
    margin:8px 0 2px;
    color:var(--navy);
  }
  .version-label{
    text-align:center;
    font-size:11px;
    font-weight:700;
    color:#b9b2a0;
    margin:0 0 20px;
  }

  /* ---------- 画面切り替え ---------- */
  .screen{display:none; flex:1; flex-direction:column;}
  .screen.active{display:flex;}

  /* ---------- 設定画面 ---------- */
  .section-label{
    font-size:15px;
    font-weight:700;
    color:var(--navy-light);
    margin:18px 0 8px 4px;
  }
  .choice-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .choice-grid.ops{grid-template-columns:repeat(4,1fr);}
  .choice-btn{
    border:2px solid var(--line);
    background:var(--key-bg);
    border-radius:16px;
    padding:16px 8px;
    font-family:inherit;
    font-size:22px;
    font-weight:700;
    color:var(--navy-light);
    cursor:pointer;
    transition:transform .08s ease, border-color .08s ease, background .08s ease;
  }
  .choice-btn:active{transform:scale(.95);}
  .choice-btn.selected{
    border-color:var(--navy);
    background:var(--navy);
    color:#fff;
  }
  .section-hint{
    font-size:12px;
    font-weight:700;
    color:#b9b2a0;
    margin:-4px 4px 8px;
  }
  .section-hint .hint-icon{ font-size:13px; }
  .start-btn{
    margin-top:auto;
    padding-top:24px;
  }
  .history-box{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .history-row{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:2px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    font-size:14px;
    font-weight:700;
    color:var(--navy-light);
    cursor:pointer;
  }
  .history-row:active{ transform:scale(.98); }
  .history-row.current{
    border-color:var(--navy);
    background:#f4f6fb;
  }
  .hr-dot{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid var(--line);
    flex-shrink:0;
  }
  .history-row.current .hr-dot{
    background:var(--navy);
    border-color:var(--navy);
  }
  .history-row .hr-level{
    color:var(--navy);
    min-width:56px;
    font-size:15px;
  }
  .history-row .hr-star{
    display:inline-block;
    color:var(--accent);
    font-size:30px;
    line-height:1;
    margin-left:10px;
    filter:drop-shadow(0 2px 2px rgba(232,163,61,0.45));
    vertical-align:middle;
  }
  .history-row .hr-record{ color:var(--navy-light); flex:1; text-align:right; }
  .history-row .hr-record .hr-score{color:var(--ok); font-weight:900;}
  .history-row .hr-record .hr-none{color:#b9b2a0;}
  .hr-analysis-btn{
    width:36px;
    height:36px;
    flex-shrink:0;
    border:none;
    border-radius:50%;
    background:#f3f1ea;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .hr-analysis-btn:active{ transform:scale(.9); }
  .big-btn{
    width:100%;
    padding:20px;
    font-family:inherit;
    font-size:22px;
    font-weight:900;
    letter-spacing:.05em;
    color:#fff;
    background:var(--navy);
    border:none;
    border-radius:18px;
    box-shadow:0 4px 0 var(--navy-light);
    cursor:pointer;
  }
  .big-btn:active{transform:translateY(4px); box-shadow:none;}
  .big-btn:disabled{
    background:#c9c2b0;
    box-shadow:0 4px 0 #b4ad9a;
    cursor:default;
  }

  /* ---------- カウントダウン画面 ---------- */
  .countdown-wrap{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .countdown-number{
    font-size:120px;
    font-weight:900;
    color:var(--navy);
    animation:pop .5s ease;
  }
  .countdown-number.go{
    font-size:56px;
    color:var(--accent);
  }
  @keyframes pop{
    0%{ transform:scale(.4); opacity:0; }
    60%{ transform:scale(1.15); opacity:1; }
    100%{ transform:scale(1); opacity:1; }
  }

  /* ---------- プレイ画面 ---------- */
  .progress-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:15px;
    font-weight:700;
    color:var(--navy-light);
    margin-bottom:10px;
    gap:8px;
  }
  .quit-btn{
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    color:var(--navy-light);
    background:#fff;
    border:2px solid var(--line);
    border-radius:20px;
    padding:5px 14px;
    cursor:pointer;
  }
  .quit-btn:active{transform:scale(.95);}
  .progress-bar{
    height:8px;
    background:var(--line);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:24px;
  }
  .progress-fill{
    height:100%;
    background:var(--accent);
    width:0%;
    transition:width .25s ease;
  }

  .question-card{
    background:#fff;
    border:2px solid var(--line);
    border-radius:22px;
    padding:26px 10px;
    text-align:center;
    margin-bottom:18px;
    position:relative;
  }
  .mul-lines{
    display:none;
    align-items:center;
    justify-content:center;
  }
  .mul-two-line{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
  }
  .mul-row1, .mul-row2{
    font-size:28px;
    font-weight:900;
    color:var(--navy);
    letter-spacing:.01em;
    display:flex;
    align-items:baseline;
    gap:6px;
  }
  .mul-blank{
    display:inline-block;
    min-width:52px;
    text-align:center;
  }
  .mul-blank.pending{ color:#c9c2b0; }
  .mul-blank.done{ color:var(--navy); }
  /* 入力中(answer-box)と回答済み(mul-blank)で枠の幅を揃え、答えるたびに式が動かないようにする */
  .mul-lines .answer-box{
    min-width:52px;
    padding:0 2px;
  }
  .question-text{
    font-size:44px;
    font-weight:900;
    letter-spacing:.02em;
    color:var(--navy);
    display:flex;
    justify-content:center;
    align-items:baseline;
    gap:10px;
    flex-wrap:wrap;
  }
  .answer-box{
    display:inline-block;
    min-width:80px;
    border-bottom:4px solid var(--navy);
    padding:0 6px;
    color:var(--navy);
  }
  .answer-box.empty{color:#b9b2a0;}

  .question-card.submitted{
    animation:submit-pulse .3s ease;
  }
  @keyframes submit-pulse{
    0%{ border-color:var(--line); }
    40%{ border-color:var(--navy-light); background:#f3f1ea; }
    100%{ border-color:var(--line); background:#fff; }
  }

  .question-hint{
    text-align:center;
    font-size:15px;
    font-weight:700;
    color:var(--accent);
    margin:-10px 0 14px;
    min-height:20px;
  }
  .digit-split{ display:inline-flex; }
  .digit-split .digit{ display:inline-block; padding:0 2px; }
  .digit-split .digit.hl{
    color:var(--accent);
    background:#fdecc9;
    border-radius:8px;
    padding:0 6px;
  }

  /* ---------- テンキー ---------- */
  .mul-back-btn{
    display:block;
    margin:-6px auto 14px;
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    color:var(--navy-light);
    background:#f3f1ea;
    border:none;
    border-radius:20px;
    padding:6px 16px;
    cursor:pointer;
  }
  .mul-back-btn:active{ transform:scale(.95); }
  .mul-back-btn.disabled{
    opacity:.35;
    pointer-events:none;
  }
  .play-body{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:0;
  }
  .keypad{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:8px;
    touch-action:manipulation;
  }
  .key{
    font-family:inherit;
    font-size:26px;
    font-weight:700;
    padding:20px 0;
    border:none;
    border-radius:16px;
    background:var(--key-bg);
    color:var(--navy);
    box-shadow:0 3px 0 var(--key-shadow);
    cursor:pointer;
    touch-action:manipulation;
  }
  .key:active{transform:translateY(3px); box-shadow:none;}
  .key.wide{grid-column:span 1;}
  .key.clear{color:var(--ng); font-size:18px;}
  .key.back{color:var(--navy-light); font-size:20px;}
  .key.enter{
    background:var(--navy);
    color:#fff;
    box-shadow:0 3px 0 var(--navy-light);
    font-size:18px;
  }
  .key:disabled{opacity:.4;}

  /* ---------- 結果画面 ---------- */
  .result-wrap{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:12px 0;
  }
  .result-score{
    font-size:64px;
    font-weight:900;
    color:var(--navy);
    margin:6px 0;
  }
  .result-score span{font-size:28px; color:var(--navy-light);}
  .result-sub{
    font-size:16px;
    color:var(--navy-light);
    font-weight:700;
    margin-bottom:6px;
  }
  .result-msg{
    font-size:20px;
    font-weight:900;
    color:var(--accent);
    margin:14px 0 30px;
  }
  .result-buttons{width:100%; display:flex; flex-direction:column; gap:12px;}
  .ghost-btn{
    width:100%;
    padding:16px;
    font-family:inherit;
    font-size:17px;
    font-weight:700;
    color:var(--navy);
    background:#fff;
    border:2px solid var(--line);
    border-radius:16px;
    cursor:pointer;
  }
  .ghost-btn:active{transform:scale(.97);}

  /* ---------- こたえ合わせ画面 ---------- */
  .check-summary{
    text-align:center;
    font-size:16px;
    font-weight:900;
    color:var(--navy);
    background:#fff;
    border:2px solid var(--line);
    border-radius:16px;
    padding:14px;
    margin-bottom:14px;
  }
  .check-summary .cs-score{ color:var(--ok); font-size:24px; margin:0 4px; }
  .check-list{
    flex:1;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:16px;
  }
  .check-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:12px;
  }
  /* 正解：目立たせない(淡く・小さく) */
  .check-item.correct{
    background:transparent;
    border:none;
    padding:5px 14px;
    font-size:12px;
    font-weight:600;
    color:#c2bcac;
  }
  .check-item.correct .ci-mark{ color:#c2bcac; font-size:12px; margin-right:6px; }
  .check-item.correct .ci-question{ color:#c2bcac; }

  /* 間違い：強調して視線を集める */
  .check-item.wrong{
    background:#fdeae5;
    border:2px solid var(--ng);
    border-left:7px solid var(--ng);
    border-radius:14px;
    padding:14px 16px;
    font-size:17px;
    font-weight:900;
    box-shadow:0 3px 0 #f0c4b8;
    margin:4px 0;
  }
  .check-item.wrong .ci-mark{ color:var(--ng); font-size:22px; margin-right:10px; }
  .check-item.wrong .ci-question{ color:var(--navy); }

  .ci-question{ flex:1; }
  .ci-answers{ text-align:right; font-size:13px; }
  .check-item.wrong .ci-answers{ font-size:14px; font-weight:700; }
  .ci-answers .ci-user{ color:var(--ng); }
  .ci-answers .ci-correct-val{ color:var(--ok); font-weight:900; }

  /* 複数ステップ問題(かけ算レベル3など)の内訳表示 */
  .check-item.multi{
    flex-direction:column;
    align-items:stretch;
  }
  .check-item.multi .ci-question{
    font-size:17px;
    display:flex;
    align-items:center;
  }
  .ci-steps{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-top:4px;
    padding-top:8px;
    border-top:1px dashed #f0c4b8;
  }
  .ci-step{
    display:flex;
    align-items:center;
    font-size:13px;
    font-weight:700;
    gap:6px;
  }
  .ci-step-mark{ font-size:14px; font-weight:900; width:16px; flex-shrink:0; }
  .ci-step-mark.ok{ color:var(--ok); }
  .ci-step-mark.ng{ color:var(--ng); }
  .ci-step-label{ color:var(--navy-light); flex:1; }
  .ci-step-val{ text-align:right; color:var(--ok); font-weight:900; }
  .ci-step-val .ci-user{ color:var(--ng); font-weight:900; }
  .ci-step-val .ci-correct-val{ color:var(--ok); font-weight:900; }

  /* ---------- ぶんせき画面 ---------- */
  .analysis-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  .analysis-header #analysis-title{
    font-size:17px;
    font-weight:900;
    color:var(--navy);
  }
  .demo-banner{
    font-size:12px;
    font-weight:700;
    color:var(--navy-light);
    background:#fff7e6;
    border:2px solid #f2dfae;
    border-radius:12px;
    padding:8px 12px;
    margin-bottom:16px;
  }
  .demo-banner.hidden{ display:none; }

  .stat-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:18px;
  }
  .stat-card{
    background:#fff;
    border:2px solid var(--line);
    border-radius:16px;
    padding:12px 14px;
  }
  .stat-label{
    font-size:11px;
    font-weight:700;
    color:var(--navy-light);
    margin-bottom:4px;
  }
  .stat-value{
    font-size:22px;
    font-weight:900;
    color:var(--navy);
  }
  .stat-value .unit{ font-size:13px; font-weight:700; color:var(--navy-light); margin-left:2px; }
  .stat-value .stat-sub{ font-size:13px; font-weight:700; color:var(--ok); margin-left:6px; }

  .chart-card{
    background:#fff;
    border:2px solid var(--line);
    border-radius:20px;
    padding:16px 12px 10px;
    margin-bottom:16px;
  }
  .chart-title{
    font-size:15px;
    font-weight:700;
    margin:0 4px 8px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:var(--navy);
  }
  .chart-title .trend-ok{
    font-size:12px;
    font-weight:900;
    color:var(--ok);
    background:var(--ok-bg);
    border-radius:20px;
    padding:3px 10px;
  }
  svg.chart-svg{ width:100%; height:auto; display:block; }
  .legend{
    display:flex;
    gap:14px;
    justify-content:center;
    font-size:11px;
    font-weight:700;
    color:var(--navy-light);
    margin-top:6px;
    flex-wrap:wrap;
  }
  .legend-item{ display:flex; align-items:center; gap:5px; }
  .legend-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }

  .log-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
  .log-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff;
    border:2px solid var(--line);
    border-radius:14px;
    padding:10px 14px;
    font-size:14px;
    font-weight:700;
  }
  .log-item .li-date{ color:var(--navy-light); min-width:60px; font-size:13px; }
  .log-item .li-time{ color:var(--navy); font-size:16px; }
  .log-item .li-score{ font-size:12px; color:var(--navy-light); }
  .log-item.cleared{ border-color:var(--accent); background:#fffaf0; }
  .li-star{ color:var(--accent); margin-right:2px; }
  .log-item .li-score.li-fail{ color:var(--ng); }
  .log-item .li-score.li-perfect{ color:var(--ok); font-weight:900; }

  @media (max-height:700px){
    .question-text{font-size:36px;}
    .key{padding:14px 0;}
  }