:root{
  --bg1:#EAF6FF; --bg2:#FFF3E9;
  --card:#FFFFFF; --ink:#3A3845; --sub:#9A94A8;
  --sun:#FFC93C; --coral:#FF8BA7; --mint:#7ED9B4; --sky:#7FC8F8; --grape:#B79CED;
  --shadow:0 10px 30px rgba(58,56,69,.12);
  --r:28px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 100%);
  overflow:hidden; user-select:none;
}
button{font-family:inherit;border:none;cursor:pointer;background:none;color:inherit}

/* ---------- top bar ---------- */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;gap:8px;
}
/* 在首页iframe内运行时，给左上角🏠返回键让出空间 */
body.in-frame #topbar{padding-left:64px;}
#themeChip{
  background:var(--card);border-radius:999px;padding:8px 16px;
  font-weight:700;font-size:15px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:8px;flex:0 1 auto;max-width:30vw;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
#themeChip:active{transform:scale(.96)}
/* segmented tab（がくしゅう / クイズ） */
.seg{
  display:flex;background:var(--card);border-radius:999px;
  box-shadow:var(--shadow);padding:4px;gap:2px;flex:0 0 auto;
}
.seg button{
  border-radius:999px;padding:7px 15px;font-weight:800;font-size:13.5px;
  color:var(--sub);transition:.2s;white-space:nowrap;
}
.seg button.on{background:var(--sun);color:var(--ink)}
#topRight{display:flex;gap:10px;flex:0 0 auto}
#gearBtn,#listBtn{
  width:48px;height:48px;border-radius:50%;background:var(--card);
  box-shadow:var(--shadow);font-size:22px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
#listBtn:active{transform:scale(.92)}
#gearBtn:active{transform:rotate(40deg) scale(.92)}

/* ---------- stage ---------- */
#stage{
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:88px 20px 24px;gap:14px;
}
#card{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  width:min(92vw,560px);
  display:flex;flex-direction:column;align-items:center;
  padding:26px 24px 20px;position:relative;
  animation:pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
#emoji{
  font-size:clamp(90px,26vmin,190px);line-height:1.15;
  text-align:center;
  filter:drop-shadow(0 6px 10px rgba(58,56,69,.12));
}
#jp{
  font-size:clamp(30px,6.5vmin,46px);font-weight:900;
  text-align:center;margin-top:6px;line-height:1.4;
}
#en{
  font-family:"Baloo 2",sans-serif;font-weight:500;
  font-size:clamp(14px,3vmin,18px);color:var(--sub);
  margin-top:6px;text-align:center;
}
/* dialogue bubbles */
.bubbles{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}
.bub{
  max-width:86%;padding:10px 18px;border-radius:22px;
  font-size:clamp(19px,4.2vmin,27px);font-weight:700;line-height:1.45;
}
.bub.a{align-self:flex-start;background:#EAF3FF;border-bottom-left-radius:6px}
.bub.b{align-self:flex-end;background:#FFF0E3;border-bottom-right-radius:6px}
.bub.speaking{outline:3px solid var(--sun)}

#txt{display:flex;flex-direction:column;align-items:center;width:100%;}
/* rainbow countdown bar — the signature */
#timerWrap{
  width:70%;height:3px;border-radius:999px;background:transparent;
  margin-top:20px;overflow:hidden;opacity:.5;
}
#timerBar{
  height:100%;width:100%;border-radius:999px;
  background:#D8D3E0;
}
/* controls */
#controls{display:flex;gap:18px;align-items:center}
.ctl{
  width:64px;height:64px;border-radius:50%;background:var(--card);
  box-shadow:var(--shadow);font-size:26px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s;
}
.ctl:active{transform:scale(.9)}
.ctl.big{width:80px;height:80px;font-size:34px;background:var(--sun)}

/* ---------- quiz stage（問題モード） ---------- */
#quizStage{
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:92px 20px 24px;gap:22px;
}
#quizTop{display:flex;align-items:center;gap:20px}
#qReplay{
  width:74px;height:74px;border-radius:50%;background:var(--sun);
  box-shadow:var(--shadow);font-size:34px;
  display:flex;align-items:center;justify-content:center;transition:transform .15s;
}
#qReplay:active{transform:scale(.9)}
#quizScore{font-weight:900;font-size:22px;color:var(--coral)}
#quizGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(92vw,460px)}
.qCard{
  background:var(--card);border-radius:26px;box-shadow:var(--shadow);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border:4px solid transparent;transition:transform .12s,border-color .2s,background .2s;
}
.qCard:active{transform:scale(.95)}
.qCard .qemoji{font-size:clamp(56px,16vmin,96px);line-height:1}
.qCard.right{border-color:var(--mint);background:#EAFBF3;animation:rightPop .4s}
.qCard.wrong{border-color:#FF6B6B;background:#FFECEC;animation:shake .4s}
@keyframes rightPop{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}60%{transform:translateX(7px)}}
#quizEmpty{display:none;text-align:center;font-weight:700;color:var(--sub);font-size:18px;padding:40px 10px}

/* ---------- start overlay ---------- */

/* ---------- 🎉 お祝いエフェクト / 庆祝特效 ---------- */
#fxCanvas{position:fixed;inset:0;z-index:45;pointer-events:none;display:block}
#fxFlash{position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0;transition:opacity .18s}
#fxFlash.on{opacity:1}
#fxBanner{
  position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.2);
  z-index:47;pointer-events:none;opacity:0;text-align:center;
  font-weight:900;letter-spacing:.04em;white-space:nowrap;
  text-shadow:0 6px 0 rgba(0,0,0,.10),0 10px 26px rgba(0,0,0,.18);
}
#fxBanner.show{animation:bnr 1.9s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes bnr{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-12deg)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(4deg)}
  30%{transform:translate(-50%,-50%) scale(1) rotate(0)}
  75%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1.1)}
}
#streakRow,#streakRow2{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:1px;min-height:30px;max-width:94vw;line-height:1;
}
#streakRow .sst,#streakRow2 .sst{display:inline-block;animation:sstPop .45s cubic-bezier(.2,1.5,.4,1)}
#streakRow .sstn,#streakRow2 .sstn{
  font-weight:900;color:var(--coral);margin-left:6px;
  font-size:18px;animation:sstPop .45s cubic-bezier(.2,1.5,.4,1)
}
@keyframes sstPop{0%{transform:scale(0) rotate(-120deg);opacity:0}
  60%{transform:scale(1.45) rotate(12deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}}
#quizScore.pulse{animation:scPulse .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes scPulse{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ---------- 🎤 はなすモード / 说一说模式 ---------- */
#speakStage{
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:92px 20px 24px;gap:16px;
}
#spkScore{font-weight:900;font-size:22px;color:var(--coral)}
#spkCard{
  background:var(--card);border-radius:34px;box-shadow:var(--shadow);
  width:min(74vw,340px);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  border:6px solid transparent;transition:border-color .2s,background .2s,transform .12s;
}
#spkCard .qemoji{font-size:clamp(76px,26vmin,150px);line-height:1}
#spkCard.right{border-color:var(--mint);background:#EAFBF3;animation:rightPop .45s}
#spkCard.wrong{border-color:#FF6B6B;background:#FFECEC;animation:shake .4s}
#spkCard.listening{border-color:var(--sky);animation:micPulse 1.1s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 10px 30px rgba(58,56,69,.14),0 0 0 0 rgba(127,200,248,.55)}
  50%{box-shadow:0 10px 30px rgba(58,56,69,.14),0 0 0 22px rgba(127,200,248,0)}}
#spkWord{font-size:26px;font-weight:900;min-height:34px;text-align:center}
#spkWord.hidden{color:transparent}
#spkStatus{color:var(--sub);font-size:15px;font-weight:700;min-height:22px;text-align:center}
#spkHeard{color:var(--sub);font-size:13px;min-height:18px;text-align:center;opacity:.8}
#spkCtl{display:flex;gap:20px;align-items:center}
#spkMic.armed{animation:bounce 1.4s ease-in-out infinite}
#spkNo{
  display:none;text-align:center;color:var(--sub);font-weight:700;
  font-size:15px;padding:10px 16px;line-height:1.6;max-width:min(88vw,420px);
}
#spkManual{
  display:none;
  background:var(--mint);border-radius:999px;padding:12px 26px;
  font-size:17px;font-weight:900;box-shadow:var(--shadow);margin-top:10px;
}
#speakEmpty{display:none;text-align:center;font-weight:700;color:var(--sub);font-size:18px;padding:40px 10px}
@media (max-height:600px),(orientation:landscape) and (max-height:500px){
  #speakStage{padding:56px 16px 10px;gap:10px}
  #spkCard{width:min(46vh,300px)}
  #spkCard .qemoji{font-size:clamp(56px,20vh,120px)}
  #spkWord{font-size:21px;min-height:26px}
  #spkStatus{font-size:13px}
}


.qCard.press{transform:scale(.95)}
.ctl.press,#qReplay.press{transform:scale(.9)}
.seg button.press{opacity:.7}


/* ---------- 小さい画面での トップバー / 小屏顶栏防溢出 ---------- */
.seg{min-width:0;flex:0 1 auto}
.seg button{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:430px){
  #topbar{padding:8px 10px;gap:6px}
  body.in-frame #topbar{padding-left:52px}
  .seg{padding:3px}
  .seg button{padding:6px 9px;font-size:11.5px}
  #gearBtn,#listBtn{width:38px;height:38px;font-size:17px}
  #topRight{gap:7px}
  #themeChip{padding:5px 10px;font-size:11.5px;max-width:22vw}
}
@media (max-width:390px){
  .tabIc{display:none}
}
@media (max-width:365px){
  #topbar{padding:6px 5px;gap:3px}
  body.in-frame #topbar{padding-left:50px}
  .seg{padding:2px}
  .seg button{padding:5px 6px;font-size:10px}
  #gearBtn,#listBtn{width:31px;height:31px;font-size:14px}
  #topRight{gap:4px}
}
@media (max-width:340px){
  body.in-frame #topbar{padding-left:48px}
  .seg button{padding:4px 5px;font-size:9.5px}
  #gearBtn,#listBtn{width:29px;height:29px;font-size:13px}
}

#startOverlay{
  position:fixed;inset:0;z-index:50;
  background:linear-gradient(160deg,var(--bg1),var(--bg2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
#startOverlay .logo{font-size:80px;animation:bounce 1.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
#startOverlay h1{font-size:30px;font-weight:900}
#startOverlay p{color:var(--sub);font-size:15px}
#startBtn{
  background:var(--sun);border-radius:999px;padding:18px 54px;
  font-size:24px;font-weight:900;box-shadow:var(--shadow);
  transition:transform .15s;
}
#startBtn:active{transform:scale(.94)}

/* ---------- settings ---------- */
#settings{
  position:fixed;inset:0;z-index:40;background:rgba(58,56,69,.35);
  display:none;align-items:flex-end;justify-content:center;
}
#settings.open{display:flex}
#panel{
  background:var(--card);width:min(100vw,640px);max-height:88vh;
  border-radius:28px 28px 0 0;padding:22px 22px 30px;
  display:flex;flex-direction:column;gap:14px;
  animation:up .25s ease-out;
}
@keyframes up{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
#panel h2{font-size:20px;font-weight:900;display:flex;justify-content:space-between;align-items:center}
#closeBtn{font-size:22px;width:40px;height:40px;border-radius:50%;background:#F1EEF7}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row label{font-weight:700;font-size:15px}
#waitRange,#rateRange{flex:1;accent-color:var(--coral);min-width:120px}
#waitVal,#rateVal{font-weight:900;color:var(--coral);min-width:48px;text-align:right}
.mini{
  background:#F1EEF7;border-radius:999px;padding:8px 16px;
  font-weight:700;font-size:14px;
}
#poolInfo{font-size:13px;color:var(--sub)}
#themeGrid{
  overflow-y:auto;display:grid;gap:8px;
  grid-template-columns:1fr;
  padding-bottom:6px;
}
@media(min-width:520px){#themeGrid{grid-template-columns:1fr 1fr}}
.tItem{
  display:flex;align-items:center;gap:8px;
  background:#FAF8FF;border:2px solid #EDE9F7;border-radius:16px;
  padding:9px 10px;font-size:13.5px;font-weight:700;cursor:pointer;
}
.tItem.on{background:#FFF7E0;border-color:var(--sun)}
.tItem .ic{font-size:19px}
.tItem .code{color:var(--sub);font-family:"Baloo 2",sans-serif;font-size:11px;font-weight:700}
.tItem .upto{
  margin-left:auto;flex-shrink:0;
  background:#EDE9F7;border-radius:999px;padding:4px 10px;
  font-size:11.5px;color:#6B6580;font-weight:700;
}
.tItem .upto:active{background:var(--sky);color:#fff}
#emptyMsg{
  display:none;text-align:center;font-weight:700;color:var(--sub);
  font-size:18px;padding:40px 10px;
}

/* ---------- browse list（もくじ） ---------- */
#browse{
  position:fixed;inset:0;z-index:40;background:rgba(58,56,69,.35);
  display:none;align-items:flex-end;justify-content:center;
}
#browse.open{display:flex}
#bPanel{
  background:var(--card);width:min(100vw,640px);height:88vh;
  border-radius:28px 28px 0 0;padding:22px 22px 8px;
  display:flex;flex-direction:column;gap:10px;
  animation:up .25s ease-out;
}
#bPanel h2{font-size:20px;font-weight:900;display:flex;justify-content:space-between;align-items:center}
#bCloseBtn{font-size:22px;width:40px;height:40px;border-radius:50%;background:#F1EEF7}
#bList{overflow-y:auto;padding-bottom:24px;-webkit-overflow-scrolling:touch}
.lsn{padding:12px 2px;border-bottom:1px dashed #EDE9F7}
.lHead{font-weight:900;font-size:16px;margin-bottom:6px;display:flex;gap:8px;align-items:center}
.lHead .code{color:var(--sub);font-family:"Baloo 2",sans-serif;font-size:12px;font-weight:700}
.wRow{display:flex;gap:10px;align-items:baseline;font-size:15.5px;padding:3px 2px}
.wRow .we{font-size:17px}
.wRow .wja{font-weight:700;min-width:5em}
.wRow .wen{color:var(--sub);font-family:"Baloo 2",sans-serif;font-size:12.5px;margin-left:auto;text-align:right}
.dRow{background:#FAF8FF;border-radius:12px;padding:8px 12px;margin:5px 0;font-size:14.5px;line-height:1.7;font-weight:700}
.dRow .den{color:var(--sub);font-family:"Baloo 2",sans-serif;font-size:12px;display:block;margin-top:2px;font-weight:500}

/* Shared saved-word controls for listening and speaking. */
#vocabTools{
  position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;gap:8px;max-width:calc(100vw - 20px);
}
.vocabBtn{
  height:44px;min-width:44px;padding:0 13px;border-radius:16px;background:var(--card);
  box-shadow:var(--shadow);font-size:13px;font-weight:700;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.vocabBtn:active{transform:scale(.95)}
.vocabBtn[aria-pressed="true"]{background:#FFF3C6;color:#8C5B00}
.vocabBtn:disabled{opacity:.4;cursor:default}
.bookmarkIcon{width:22px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
[aria-pressed="true"] .bookmarkIcon,.vocabRemove .bookmarkIcon{fill:var(--sun)}
#stage,#speakStage{padding-top:136px;overflow-y:auto;justify-content:safe center}
#speakStage{gap:10px}
#spkCard{width:min(66vw,300px,30vh)}
#vocabList{
  position:fixed;inset:0;z-index:48;background:rgba(58,56,69,.35);
  display:none;align-items:flex-end;justify-content:center;
}
#vocabList.open{display:flex}
#vocabPanel{
  background:var(--card);width:min(100vw,640px);max-height:85vh;
  border-radius:28px 28px 0 0;padding:20px;display:flex;flex-direction:column;gap:12px;
}
#vocabPanel h2{font-size:20px;display:flex;justify-content:space-between;align-items:center}
#vocabCloseBtn{width:44px;height:44px;border-radius:50%;background:#F1EEF7;font-size:22px}
#vocabRows{overflow-y:auto;-webkit-overflow-scrolling:touch}
.vocabRow{display:flex;align-items:center;gap:14px;padding:10px 2px;border-bottom:1px solid #EDE9F7}
.vocabText{flex:1;min-width:0;overflow-wrap:anywhere}
.vocabWord{font-size:20px;font-weight:700}
.vocabMeaning{font-family:"Baloo 2",sans-serif;font-size:14px;color:var(--sub)}
.vocabRemove{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#FFF7E0;color:#8C5B00}
#vocabEmpty{padding:24px 4px;text-align:center;line-height:1.8;color:var(--sub)}
@media(max-width:430px){
  #vocabTools{top:58px;gap:6px}
  .vocabBtn{padding:0 11px;font-size:12px}
  #stage,#speakStage{padding-top:116px}
}
@media(max-height:600px){
  #speakStage{gap:5px;padding-bottom:10px}
  #spkCard{width:min(54vw,26vh)}
  #spkCtl{gap:14px}
  #speakStage .ctl{width:48px;height:48px;font-size:22px}
  #speakStage .ctl.big{width:58px;height:58px;font-size:27px}
  #spkNo{font-size:12px;padding:4px 8px}
  #spkManual{font-size:14px;padding:8px 18px;margin-top:0}
}

/* ============ 横屏 / 矮屏适配 ============ */
@media (orientation:landscape) and (max-height:600px){
  #stage{padding:52px 16px 10px;gap:6px;justify-content:center;}
  #card{
    width:auto;max-width:96vw;
    flex-direction:row;align-items:center;justify-content:center;
    flex-wrap:wrap;
    padding:12px 26px;gap:12px 24px;
  }
  #emoji{font-size:clamp(70px,34vh,140px);flex:0 0 auto;margin:0;}
  #txt{flex:0 1 auto;align-items:center;width:auto;max-width:min(60vw,520px);}
  #jp{font-size:clamp(30px,9vh,52px);text-align:center;margin-top:0;}
  #en{font-size:clamp(13px,3vh,18px);text-align:center;margin-top:4px;}
  .bub{font-size:clamp(17px,4.6vh,26px);padding:7px 15px;}
  #bubbles{margin-top:0;}
  #timerWrap{flex-basis:100%;width:100%;margin-top:6px;}
  #topbar{padding:8px 14px;}
  #gearBtn,#listBtn{width:42px;height:42px;font-size:19px;}
  #themeChip{padding:6px 12px;font-size:12.5px;max-width:26vw;}
  .seg button{padding:6px 11px;font-size:12px;}
  #controls{gap:14px;}
  .ctl{width:52px;height:52px;font-size:22px;}
  .ctl.big{width:64px;height:64px;font-size:28px;}
  #quizStage{padding:56px 16px 10px;gap:12px;}
  #quizGrid{width:min(74vh,430px);gap:12px;}
  .qCard .qemoji{font-size:clamp(40px,13vh,84px);}
  #qReplay{width:56px;height:56px;font-size:26px;}
  #quizScore{font-size:19px;}
  #vocabTools{top:62px}
  #stage{padding-top:116px;justify-content:safe center}
  body[data-mode="speak"] #speakStage{
    display:grid!important;padding:116px 20px 10px;gap:4px 20px;
    grid-template-columns:min(42vh,190px) minmax(230px,360px);
    grid-template-rows:repeat(5,auto) 58px auto auto;
    justify-content:center;align-content:safe center;justify-items:center;
  }
  #spkCard{width:min(42vh,190px);grid-column:1;grid-row:1 / 7}
  #spkScore,#spkWord,#streakRow2,#spkStatus,#spkHeard,#spkCtl{grid-column:2}
  #spkScore{grid-row:1}#spkWord{grid-row:2}#streakRow2{grid-row:3}
  #spkStatus{grid-row:4}#spkHeard{grid-row:5}#spkCtl{grid-row:6}
  #spkNo,#spkManual,#speakEmpty{grid-column:1 / -1}
  #speakEmpty{grid-row:1 / 7}
}
/* 平板横屏（高度较充裕）：保持竖排，仅微调 */
@media (orientation:landscape) and (min-height:601px) and (max-height:1000px){
  #stage{padding-top:78px;}
  #emoji{font-size:clamp(90px,20vh,170px);}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}