:root{
    --board:#1e3b32;
    --board-2:#16302a;
    --paper:#fbf3de;
    --paper-2:#f3e9cc;
    --ink:#2b2a25;
    --chalk:#f5f1e6;
    --chalk-dim:rgba(245,241,230,.55);
    --yellow:#ffc94a;
    --coral:#ff6b5e;
    --teal:#57c7b8;
    --line:rgba(245,241,230,.32);
  }
  *{box-sizing:border-box;}
  [hidden]{display:none!important;}
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh;
    background:
      radial-gradient(circle at 15% 10%, rgba(255,255,255,.05), transparent 40%),
      radial-gradient(circle at 85% 90%, rgba(255,255,255,.04), transparent 45%),
      repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.015) 0 2px, transparent 2px 4px),
      linear-gradient(180deg, var(--board), var(--board-2));
    font-family:'Noto Sans TC', sans-serif;
    color:var(--chalk);
    display:flex;
    justify-content:center;
    padding:24px 14px 60px;
    position:relative;
    overflow-x:hidden;
  }
  .doodle{position:fixed;opacity:.16;pointer-events:none;stroke:var(--chalk);fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:6 6;}
  .doodle.gear{top:6%;left:4%;width:90px;animation:spin 40s linear infinite;}
  .doodle.star{bottom:8%;right:6%;width:60px;animation:twinkle 5s ease-in-out infinite;}
  .doodle.frac{top:12%;right:8%;width:70px;animation:float 7s ease-in-out infinite;}
  .doodle.swirl{bottom:14%;left:6%;width:70px;animation:float 8s ease-in-out infinite reverse;}
  @keyframes spin{to{transform:rotate(360deg);}}
  @keyframes twinkle{0%,100%{opacity:.10;}50%{opacity:.28;}}
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

  .app{width:100%;max-width:640px;position:relative;z-index:1;}

  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;margin-bottom:14px;
    border:2px dashed var(--line);
    border-radius:16px;
    font-family:'ZCOOL KuaiLe', sans-serif;
    font-size:15px;
    flex-wrap:wrap;
    gap:8px;
  }
  .topbar .group{display:flex;align-items:center;gap:8px;}
  .hearts{display:flex;gap:4px;}
  .heart{width:20px;height:20px;transition:opacity .3s, transform .3s;}
  .heart svg{width:100%;height:100%;}
  .heart.lost{opacity:.25;transform:scale(.85);}
  .streak{color:var(--yellow);display:flex;align-items:center;gap:4px;}
  .progress-track{flex:1 1 100%;display:flex;gap:4px;order:5;}
  .progress-dash{flex:1;height:6px;border-radius:4px;background:rgba(245,241,230,.18);transition:background .3s;}
  .progress-dash.done{background:var(--yellow);}

  .crumb{
    display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;
    font-size:13px;color:var(--chalk-dim);margin-bottom:10px;
  }
  .crumb button{background:none;border:none;color:var(--teal);cursor:pointer;font-family:'Noto Sans TC', sans-serif;font-size:13px;text-decoration:underline;padding:2px 2px;}
  .crumb button:hover{color:var(--yellow);}
  .crumb span.sep{opacity:.5;}

  .board{
    background:transparent;
    border:3px dashed var(--line);
    border-radius:22px;
    padding:26px 22px;
    position:relative;
    min-height:420px;
  }
  .board::before{
    content:"";
    position:absolute;inset:8px;
    border:1px solid rgba(245,241,230,.08);
    border-radius:16px;
    pointer-events:none;
  }

  .screen{display:none;flex-direction:column;align-items:center;text-align:center;gap:16px;animation:fadeIn .4s ease;}
  .screen.active{display:flex;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

  h1.title{
    font-family:'ZCOOL KuaiLe', sans-serif;
    font-size:clamp(24px,6vw,34px);
    color:var(--yellow);
    margin:4px 0 0;
    text-shadow:0 2px 0 rgba(0,0,0,.25);
  }
  .subtitle{color:var(--chalk-dim);font-size:15px;line-height:1.7;max-width:460px;}
  .chalk-badge{
    font-family:'ZCOOL KuaiLe', sans-serif;
    font-size:13px;color:var(--teal);
    border:2px dashed var(--teal);padding:4px 14px;border-radius:999px;display:inline-block;
  }

  .btn{
    font-family:'ZCOOL KuaiLe', sans-serif;
    font-size:18px;padding:12px 30px;border-radius:14px;
    border:2.5px dashed var(--chalk);background:rgba(245,241,230,.05);color:var(--chalk);
    cursor:pointer;transition:transform .15s, background .2s, border-color .2s;transform:rotate(-.6deg);
  }
  .btn:hover{background:rgba(255,201,74,.12);border-color:var(--yellow);transform:rotate(0deg) scale(1.03);}
  .btn:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}
  .btn:active{transform:scale(.97);}
  .btn.primary{background:var(--yellow);color:var(--ink);border-style:solid;border-color:var(--yellow);font-weight:700;}
  .btn.primary:hover{background:#ffd873;}
  .btn.small{font-size:14px;padding:8px 18px;}
  .demo-card .btn{color:var(--ink);border-color:rgba(43,42,37,.5);background:rgba(43,42,37,.05);}
  .demo-card .btn:hover{background:rgba(255,201,74,.35);border-color:var(--coral);color:var(--ink);}

  .btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

  /* grade grid */
  .grid-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:420px;}
  .pick-card{
    background:var(--paper);color:var(--ink);border:none;border-radius:14px;
    padding:18px 8px;font-family:'ZCOOL KuaiLe',sans-serif;font-size:18px;font-weight:700;
    cursor:pointer;box-shadow:0 6px 0 var(--paper-2);transition:transform .12s, box-shadow .12s;
  }
  .pick-card:hover{transform:translateY(-2px);}
  .pick-card:active{transform:translateY(3px);box-shadow:0 3px 0 var(--paper-2);}
  .pick-card small{display:block;font-family:'Noto Sans TC',sans-serif;font-size:11px;font-weight:400;color:#7a765f;margin-top:2px;}

  .semester-row{display:flex;gap:16px;}
  .semester-row .pick-card{padding:22px 34px;font-size:20px;}

  /* chapter list */
  .chapter-list{display:flex;flex-direction:column;gap:10px;width:100%;max-width:480px;}
  .chapter-card{
    display:flex;align-items:center;gap:12px;text-align:left;
    background:var(--paper);color:var(--ink);border:none;border-radius:14px;
    padding:14px 16px;cursor:pointer;box-shadow:0 5px 0 var(--paper-2);
    transition:transform .12s, box-shadow .12s;font-family:'Noto Sans TC',sans-serif;
  }
  .chapter-card:hover:not(.locked){transform:translateY(-2px);}
  .chapter-card:active:not(.locked){transform:translateY(2px);box-shadow:0 3px 0 var(--paper-2);}
  .chapter-card.locked{
    cursor:not-allowed;background:rgba(245,241,230,.05);color:var(--chalk-dim);
    box-shadow:none;border:2px dashed var(--line);
  }
  .chapter-num{
    font-family:'ZCOOL KuaiLe',sans-serif;font-size:20px;color:var(--teal);
    min-width:30px;text-align:center;
  }
  .chapter-card.locked .chapter-num{color:var(--chalk-dim);}
  .chapter-body{flex:1;}
  .chapter-body .ct{font-weight:700;font-size:15px;}
  .chapter-body .cf{font-size:12.5px;color:#7a765f;margin-top:2px;line-height:1.5;}
  .chapter-card.locked .chapter-body .cf{color:var(--chalk-dim);}
  .chapter-tag{
    font-size:11px;padding:3px 9px;border-radius:999px;background:var(--yellow);color:var(--ink);
    font-family:'ZCOOL KuaiLe',sans-serif;white-space:nowrap;
  }
  .chapter-tag.soon{background:transparent;border:1px dashed var(--chalk-dim);color:var(--chalk-dim);}

  /* fraction rendering */
  .frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1;vertical-align:middle;margin:0 3px;}
  .frac .num{padding:0 4px 3px;border-bottom:3px solid currentColor;}
  .frac .den{padding:3px 4px 0;}
  .whole{display:inline-block;margin:0 3px;}
  .op{font-weight:900;margin:0 6px;color:var(--yellow);}

  .expr-row{
    font-family:'Noto Sans TC', sans-serif;font-weight:700;font-size:clamp(22px,6vw,30px);
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--chalk);padding:10px;
  }
  .expr-row .op.morph{transition:transform .5s, color .5s;}
  .expr-row .op.morph.morphed{transform:rotate(180deg) scale(1.2);color:var(--coral);}

  .demo-card{
    background:var(--paper);color:var(--ink);border-radius:18px;padding:22px 18px;
    box-shadow:0 10px 0 rgba(0,0,0,.25);width:100%;max-width:420px;position:relative;
  }
  .demo-card .expr-row{color:var(--ink);}
  .demo-card .op{color:var(--coral);}
  .demo-caption{font-size:14px;color:#5a5648;min-height:40px;line-height:1.6;}
  .flip-target{display:inline-flex;transition:transform .7s cubic-bezier(.34,1.56,.64,1);}
  .flip-target.spin{transform:rotateX(360deg);}
  .flip-badge{
    position:absolute;top:-10px;right:-10px;background:var(--coral);color:#fff;font-size:11px;border-radius:999px;
    padding:2px 7px;font-family:'ZCOOL KuaiLe',sans-serif;transform:rotate(8deg);opacity:0;transition:opacity .3s;
  }
  .flip-badge.show{opacity:1;}

  .prompt-label{font-family:'ZCOOL KuaiLe',sans-serif;color:var(--teal);font-size:15px;}
  .options{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:460px;}
  @media (max-width:400px){.options{grid-template-columns:1fr;}}
  .opt-btn{
    background:var(--paper);color:var(--ink);border:none;border-radius:14px;padding:14px 8px;
    font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 6px 0 var(--paper-2);
    transition:transform .12s, box-shadow .12s, background .3s;position:relative;
  }
  .opt-btn .expr-row{padding:0;font-size:clamp(18px,5vw,22px);color:var(--ink);}
  .opt-btn .expr-row .op{color:var(--coral);}
  .opt-btn:hover:not(:disabled){transform:translateY(-2px);}
  .opt-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px 0 var(--paper-2);}
  .opt-btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;}
  .opt-btn.correct{background:#dff4d8;box-shadow:0 6px 0 #b9e2ab;animation:pop .4s ease;}
  .opt-btn.wrong{background:#f7d9d6;box-shadow:0 6px 0 #e8b0aa;animation:shake .4s ease;}
  .opt-btn:disabled{cursor:default;}
  @keyframes pop{0%{transform:scale(1);}50%{transform:scale(1.06);}100%{transform:scale(1);}}
  @keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

  .feedback{min-height:26px;font-family:'ZCOOL KuaiLe',sans-serif;font-size:16px;}
  .feedback.ok{color:var(--teal);}
  .feedback.no{color:var(--coral);}
  .explain-box{
    background:rgba(255,201,74,.08);border:2px dashed var(--yellow);border-radius:12px;
    padding:10px 14px;font-size:13.5px;color:var(--chalk-dim);max-width:460px;line-height:1.7;text-align:left;
  }
  .story-box{
    background:var(--paper);color:var(--ink);border-radius:14px;padding:14px 18px;
    max-width:460px;font-size:14.5px;line-height:1.8;text-align:left;box-shadow:0 5px 0 var(--paper-2);
  }
  .story-box .frac{transform:scale(.85);}
  .chapter-record{font-size:11.5px;color:var(--teal);margin-top:4px;}

  .particle-layer{position:fixed;inset:0;pointer-events:none;z-index:50;}
  .particle{position:absolute;border-radius:50%;background:var(--yellow);opacity:0;}
  @keyframes burst{0%{opacity:1;transform:translate(0,0) scale(1);}100%{opacity:0;transform:var(--pend) scale(.3);}}

  .stars{font-size:40px;letter-spacing:6px;}
  .stat-row{display:flex;gap:18px;font-family:'ZCOOL KuaiLe',sans-serif;font-size:15px;flex-wrap:wrap;justify-content:center;}
  .stat-row b{color:var(--yellow);font-size:19px;display:block;}

  footer{text-align:center;color:rgba(245,241,230,.48);font-size:12px;margin-top:18px;padding-bottom:max(88px,calc(env(safe-area-inset-bottom) + 28px));}

  .home-studio-credit{
    margin-top:14px;
    padding-bottom:max(2px,env(safe-area-inset-bottom));
    color:rgba(255,255,255,.76);
    text-align:center;
    font-size:11px;
    font-weight:600;
    letter-spacing:.05em;
    text-shadow:0 1px 4px rgba(0,0,0,.7);
  }

/* V3.5.5：遊戲內隨時返回玩家選擇 */
.global-switch-player{
  position:fixed;right:14px;top:max(12px,env(safe-area-inset-top));z-index:1200;
  border:2px solid rgba(255,255,255,.72);border-radius:999px;padding:9px 13px;
  background:rgba(24,50,74,.94);color:#fff;font:700 14px/1.2 inherit;
  box-shadow:0 4px 12px rgba(0,0,0,.28);cursor:pointer;backdrop-filter:blur(6px);
}
.global-switch-player[hidden]{display:none!important}
.global-switch-player:active{transform:translateY(1px)}
@media(max-width:600px){.global-switch-player{right:10px;padding:8px 11px;font-size:13px}}

/* V3.5.6：舊玩家資料緊急解鎖 */
.profile-emergency-actions{margin:18px 0 8px;display:flex;flex-direction:column;align-items:center;gap:8px}.profile-emergency-actions .danger{background:#8f2d2d;color:#fff;border-color:#b94a4a;max-width:360px}.profile-emergency-actions small{color:var(--muted);text-align:center}.profile-delete{background:#7d2929!important;color:#fff!important;border-color:#a34242!important}

/* V4.5 國中課程：長篇教學與錯題解析依內容自動增高 */
.chapter-detail-note{margin-top:6px;font-size:11.5px;color:#f4d36d;line-height:1.5}
.junior-chapter-card{align-items:flex-start}
.demo-card.junior-detailed{max-width:720px;padding:22px;width:100%}
.junior-lesson-preview,.junior-lesson-expanded{display:block;width:100%;padding:4px;text-align:left;font-weight:400}
.junior-lesson-preview>div{width:100%}
.lesson-preview-label{display:inline-block;padding:4px 9px;border-radius:999px;background:#e7f1ff;color:#315985;font-size:12px;font-weight:800;margin-bottom:10px}
.lesson-preview-example{font-size:clamp(20px,4.6vw,27px);line-height:1.7;font-weight:800;color:var(--ink);text-align:center;padding:12px 8px}
.junior-lesson-detail{display:grid;gap:12px;width:100%;font-size:15px;line-height:1.85;color:var(--ink)}
.lesson-section{border-radius:14px;padding:14px 15px;background:#fffaf0;border:1px solid rgba(84,72,48,.15)}
.lesson-section h3{margin:0 0 7px;font-size:16px;color:#315985}
.lesson-section p{margin:0;white-space:normal;overflow:visible}
.lesson-section.example{background:#eef6ff}
.lesson-section.mistakes{background:#fff0ee}
.lesson-section.takeaway{background:#eef9ef}
.lesson-example{font-size:19px;font-weight:800;line-height:1.7;text-align:center;padding:6px}
.lesson-section ol,.lesson-section ul{margin:0;padding-left:22px;display:grid;gap:9px}
.lesson-section.steps li{padding-left:3px}
.lesson-section.steps li b{display:block;color:#b95545;margin-bottom:2px}
.lesson-section.steps li span{display:block}
.demo-card.junior-detailed .demo-caption{min-height:0;margin-bottom:14px}

.explain-box.detailed{width:100%;max-width:720px;padding:16px;font-size:15px;line-height:1.85;overflow:visible;max-height:none;white-space:normal;background:rgba(255,255,255,.06)}
.explain-heading{font-size:18px;font-weight:900;color:var(--yellow);margin-bottom:12px}
.explain-section{padding:12px 13px;border-radius:12px;background:rgba(255,255,255,.07);margin-top:10px;border-left:4px solid rgba(255,255,255,.22)}
.explain-section h3{font-size:15px;margin:0 0 6px;color:#fff}
.explain-section p{margin:0;color:var(--chalk);white-space:normal;overflow:visible}
.explain-section.selected-wrong{background:rgba(255,107,94,.13);border-left-color:var(--coral)}
.explain-section.answer{background:rgba(91,209,188,.12);border-left-color:var(--teal)}
.explain-section.key-point{background:rgba(255,201,74,.13);border-left-color:var(--yellow)}
.explain-section.steps ol{margin:0;padding-left:22px;display:grid;gap:9px}
.explain-section.steps li{color:var(--chalk)}
.explain-section.steps li b{display:block;color:var(--yellow);margin-bottom:2px}
.explain-section.steps li span{display:block}
.explain-next-btn{display:block;margin:16px auto 2px;min-width:210px}

@media(max-width:520px){
  .demo-card.junior-detailed{padding:16px 13px}
  .junior-lesson-detail{font-size:14px}
  .lesson-section{padding:12px}
  .explain-box.detailed{padding:12px;font-size:14px}
  .explain-section{padding:10px}
  .explain-next-btn{width:100%;min-width:0}
}