/* SHADO — POP theme · neo-brutalism */
:root{
  --bg:#FFFDF5; --surface:#FFFFFF; --ink:#141414; --border:#141414;
  --muted:#6B6B6B;
  --a1:#FFE600; --a2:#FF4D8D; --a3:#19D3C5; --a4:#7B61FF;
  --on-a1:#141414; --on-a2:#141414; --on-a3:#141414; --on-a4:#FFFFFF;
  --shadow:#141414;
  --good:#2BD46A; --bad:#FF4D6A;
  --soft:0 6px 20px rgba(20,20,20,.10);
  --r:18px; --bw:3px; --sh:5px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"Zen Maru Gothic","Space Grotesk",sans-serif;
  background:var(--bg); color:var(--ink);
  font-weight:700; overflow:hidden;
}
button,select{font-family:inherit;font-weight:700;cursor:pointer;color:var(--ink);}
.app{
  height:100vh; height:100dvh; max-width:430px; margin:0 auto;
  display:flex; flex-direction:column; position:relative;
  background:var(--bg);
}
.app::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--border) 1.2px, transparent 1.2px);
  background-size:22px 22px; opacity:.06;
}

/* ============ TOP BAR ============ */
.topbar{
  position:relative; z-index:3; flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 12px;
}
.logo{
  font-family:"Mochiy Pop One",sans-serif; font-size:21px; letter-spacing:.5px;
  display:flex; align-items:center; gap:8px;
}
.logo .mark{
  width:34px;height:34px;border:var(--bw) solid var(--border);border-radius:10px;
  background:var(--a1); color:var(--on-a1);
  display:grid;place-items:center;font-size:18px;
  box-shadow:var(--sh) var(--sh) 0 var(--shadow);
}
.streak{
  margin-left:auto; display:flex;align-items:center;gap:6px;
  border-radius:999px;
  padding:6px 13px; background:var(--a3); color:var(--on-a3);
  font-size:14px;
}

/* ============ SCREENS ============ */
.scroll{position:relative;z-index:2;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.scroll::-webkit-scrollbar{width:0;}
.screen{display:none;position:relative;padding:4px 16px 28px;animation:pop .35s cubic-bezier(.2,1.2,.4,1);}
.app-version{position:absolute;top:4px;right:16px;font-size:11px;font-weight:700;color:var(--muted);}
.screen.active{display:block;}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}

.hello{font-family:"Mochiy Pop One",sans-serif;font-size:26px;line-height:1.25;margin:6px 2px 4px;}
.hello small{display:block;font-family:"Zen Maru Gothic";font-weight:700;font-size:13px;color:var(--muted);margin-top:6px;}

/* progress card on home */
.daycard{
  border-radius:var(--r);
  background:var(--a4); color:var(--on-a4);
  padding:18px 20px; margin:14px 2px 24px;
  display:flex; align-items:center; gap:14px;
}
.daycard .big{font-family:"Mochiy Pop One";font-size:34px;line-height:1;}
.daycard .lbl{font-size:13px;opacity:.92;}
.ring{
  margin-left:auto;width:58px;height:58px;border-radius:50%;
  background:conic-gradient(var(--a1) var(--pct,0%), rgba(255,255,255,.38) 0);
  display:grid;place-items:center;
}
.ring b{font-family:"Mochiy Pop One";font-size:13px;color:var(--ink);background:var(--surface);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;}

.sec-label{font-family:"Mochiy Pop One";font-size:15px;margin:4px 2px 12px;display:flex;align-items:center;gap:8px;}
.sec-label::after{content:"";height:var(--bw);background:var(--border);flex:1;border-radius:2px;}

/* theme cards grid */
.themes{display:grid;grid-template-columns:1fr 1fr;gap:14px;list-style:none;}
.tcard{
  border:var(--bw) solid var(--border); border-radius:var(--r);
  background:var(--surface);
  box-shadow:var(--sh) var(--sh) 0 var(--shadow);
  padding:14px; text-align:left; position:relative; overflow:hidden;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tcard:active{transform:translate(var(--sh),var(--sh));box-shadow:0 0 0 var(--shadow);}
.tcard .emoji{
  width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;font-size:24px;margin-bottom:10px;
}
.tcard h3{font-family:"Mochiy Pop One";font-size:16px;line-height:1.2;}
.tcard .meta{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;}
.tcard .chip{border-radius:999px;padding:3px 9px;background:var(--bg);}
.tcard .done{margin-left:auto;}

/* ============ PRACTICE ============ */
.prac-head{display:flex;align-items:center;gap:10px;margin:2px 2px 12px;}
.iconbtn{
  width:42px;height:42px;flex:0 0 auto;border:var(--bw) solid var(--border);border-radius:12px;
  background:var(--surface);box-shadow:3px 3px 0 var(--shadow);font-size:18px;
  display:grid;place-items:center;transition:transform .1s,box-shadow .1s;
}
.iconbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow);}
.prac-head .titles{min-width:0;}
.prac-head h2{font-family:"Mochiy Pop One";font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prac-head .sub{font-size:12px;color:var(--muted);}

/* step rail */
.rail{display:flex;gap:6px;margin:0 2px 16px;}
.rail .seg{flex:1;height:8px;border-radius:6px;background:rgba(20,20,20,.12);overflow:hidden;}
.rail .seg.done{background:var(--a3);}
.rail .seg.cur{background:var(--a1);}

/* step header (inline, no box) */
.stepcard{
  padding:2px;display:flex;align-items:center;gap:13px;margin-bottom:18px;
  color:var(--ink);
}
.stepcard .num{
  font-family:"Mochiy Pop One";font-size:22px;width:44px;height:44px;flex:0 0 auto;
  border-radius:13px;background:var(--a1);color:var(--on-a1);
  display:grid;place-items:center;
}
.stepcard h3{font-family:"Mochiy Pop One";font-size:18px;}
.stepcard p{font-size:12.5px;font-weight:700;margin-top:3px;line-height:1.4;}

/* phrase / text */
.phrasebox{
  padding:6px 2px 4px;margin-bottom:18px;position:relative;min-height:92px;
}
.en-text{font-size:25px;line-height:1.4;font-weight:700;letter-spacing:.2px;}
.karaoke-word{
  --fill:0%;
  background-image:linear-gradient(to right, var(--a2) var(--fill), var(--ink) var(--fill));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ja-text{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.5;}
.phrasebox.blurred .en-text,.phrasebox.blurred .ja-text{filter:blur(9px);user-select:none;}
.reveal-hint{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-family:"Mochiy Pop One";font-size:14px;color:var(--ink);text-align:center;padding:20px;
  cursor:pointer;
}
.phrasebox.blurred .reveal-hint{display:flex;}
.reveal-hint span{font-size:30px;}

/* vocab chips (step1) */
.vocab{display:flex;flex-wrap:wrap;gap:8px;margin-top:-4px;margin-bottom:18px;}
.vocab .v{border-radius:10px;padding:7px 11px;background:var(--surface);box-shadow:var(--soft);font-size:12px;}
.vocab .v b{color:var(--a2);}

/* play / speed controls */
.playrow{display:flex;gap:10px;margin-bottom:14px;}
.playbtn{
  flex:1;border:var(--bw) solid var(--border);border-radius:var(--r);
  background:var(--a2);color:var(--on-a2);box-shadow:var(--sh) var(--sh) 0 var(--shadow);
  padding:15px;font-family:"Mochiy Pop One";font-size:17px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .1s,box-shadow .1s;
}
.playbtn:active{transform:translate(var(--sh),var(--sh));box-shadow:0 0 0 var(--shadow);}
.playbtn.playing{background:var(--a3);color:var(--on-a3);}
.speed{
  flex:0 0 auto;border:var(--bw) solid var(--border);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--sh) var(--sh) 0 var(--shadow);
  display:flex;align-items:center;padding:0 8px 0 12px;gap:4px;font-size:13px;
}
.speed select{border:none;background:transparent;font-size:13px;padding:14px 4px;appearance:none;outline:none;}

/* mumbling visual */
.mumble{
  border-radius:var(--r);background:var(--surface);box-shadow:var(--soft);
  padding:18px;margin-bottom:16px;
  display:flex;align-items:center;gap:14px;
}
.wave{display:flex;align-items:center;gap:4px;height:42px;flex:1;}
.wave i{width:6px;background:var(--a4);border-radius:3px;height:30%;display:block;transition:height .08s ease;}
.mumble .lbl{font-size:12px;color:var(--muted);max-width:120px;}

/* eval (step5) */
.eval{margin-bottom:8px;}
.recbtn{
  width:100%;border:var(--bw) solid var(--border);border-radius:var(--r);
  background:var(--a2);color:var(--on-a2);box-shadow:var(--sh) var(--sh) 0 var(--shadow);
  padding:18px;font-family:"Mochiy Pop One";font-size:18px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .1s,box-shadow .1s;
}
.recbtn:active{transform:translate(var(--sh),var(--sh));box-shadow:0 0 0 var(--shadow);}
.recbtn.rec{background:var(--bad);color:#fff;}
.recbtn .dot{width:14px;height:14px;border-radius:50%;background:currentColor;}
.recbtn.rec .dot{animation:blink .8s infinite;}
@keyframes blink{50%{opacity:.25;}}

.cap{font-size:11px;color:var(--muted);font-weight:700;margin:12px 2px 6px;letter-spacing:.4px;text-align:center;}

.result{margin-top:16px;}
.rcard{border-radius:var(--r);background:var(--surface);overflow:hidden;box-shadow:var(--soft);}
.rsec{padding:16px 18px;}
.rsec + .rsec{border-top:2px dashed var(--border);}

.r-score{display:flex;align-items:center;gap:18px;background:var(--a1);color:var(--on-a1);}
.gauge{
  width:88px;height:88px;flex:0 0 auto;border-radius:50%;
  background:conic-gradient(var(--g-col,var(--good)) calc(var(--p,0)*1%), rgba(20,20,20,.16) 0);
  display:grid;place-items:center;
}
.gauge-in{
  width:62px;height:62px;border-radius:50%;background:var(--surface);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1;color:var(--ink);
}
.gauge-in .n{font-family:"Mochiy Pop One";font-size:27px;}
.gauge-in .u{font-size:10px;color:var(--muted);font-weight:700;margin-top:2px;}
.hero-txt{min-width:0;}
.hero-txt .judge{font-family:"Mochiy Pop One";font-size:22px;display:flex;align-items:center;gap:7px;}
.hero-txt .judge .em{font-size:25px;}
.hero-txt .sub{font-size:13px;font-weight:700;margin-top:6px;line-height:1.4;opacity:.85;}

.r-metrics{display:flex;padding:0;}
.r-metrics .m{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;text-align:center;}
.r-metrics .m + .m{border-left:2px dashed var(--border);}
.r-metrics .ico{font-size:19px;}
.r-metrics .num{font-family:"Mochiy Pop One";font-size:20px;margin-top:2px;}
.r-metrics .lbl{font-size:11px;font-weight:700;color:var(--muted);}

.r-label{font-family:"Mochiy Pop One";font-size:13px;display:flex;justify-content:space-between;
  align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.legend{display:flex;gap:12px;font-size:11px;font-weight:700;color:var(--muted);}
.legend span{display:flex;align-items:center;gap:5px;}
.legend .sw{width:13px;height:13px;border-radius:4px;display:inline-block;}
.legend .sw.ok{background:var(--good);}
.legend .sw.ng{background:var(--bad);}

.words{display:flex;flex-wrap:wrap;gap:7px;}
.words .pill{border-radius:10px;padding:7px 12px;font-size:16px;font-weight:700;display:inline-block;}
.words .word-ok{background:var(--good);color:#10241A;}
.words .word-miss{background:var(--bad);color:#fff;text-decoration:none;}

.rchips{display:flex;flex-wrap:wrap;gap:8px;}
.rchip{border-radius:10px;background:var(--bg);color:var(--ink);padding:7px 12px;font-size:13px;display:inline-block;}
.rchip b{color:var(--a2);}

.ai-comment{
  background:var(--bg);border:var(--bw) solid var(--border);border-radius:14px;
  padding:14px;font-size:13px;line-height:1.6;font-weight:700;
  box-shadow:3px 3px 0 var(--shadow);
}
.ai-comment.loading{color:var(--muted);font-weight:700;}
.ai-comment.error{color:var(--bad);}
.r-perfect{font-family:"Mochiy Pop One";font-size:15px;text-align:center;color:var(--ink);}

.replay{display:flex;gap:10px;margin-top:14px;}
.replay button{
  flex:1;border:var(--bw) solid var(--border);border-radius:14px;background:var(--a3);color:var(--on-a3);
  box-shadow:4px 4px 0 var(--shadow);padding:14px 8px;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .1s,box-shadow .1s;
}
.replay button:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--shadow);}

/* ============ BOTTOM NAV ============ */
.botnav{
  position:relative;z-index:3;flex:0 0 auto;display:flex;gap:12px;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:var(--bw) solid var(--border);background:var(--bg);
}
.botnav.hidden{display:none;}
.botnav button{
  flex:1;border:var(--bw) solid var(--border);border-radius:14px;
  padding:15px;font-family:"Mochiy Pop One";font-size:15px;background:var(--surface);
  box-shadow:4px 4px 0 var(--shadow);transition:transform .1s,box-shadow .1s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.botnav button:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--shadow);}
.botnav .next{background:var(--a1);color:var(--on-a1);flex:2;}
.botnav button:disabled{opacity:.4;box-shadow:0 0 0 var(--shadow);transform:translate(4px,4px);}

/* ============ SW UPDATE BAR ============ */
.sw-update-bar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:10px 16px;background:#141414;color:var(--a1);
  font-size:13px;font-weight:700;box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.sw-update-btn{
  border:2px solid var(--a1);background:transparent;color:var(--a1);
  font-family:inherit;font-size:12px;font-weight:800;padding:4px 14px;
  border-radius:999px;cursor:pointer;white-space:nowrap;
}
.sw-update-btn:active{background:var(--a1);color:#141414;}
.sw-update-close{opacity:.6;font-size:11px;padding:4px 8px;}

/* ============ COMPLETE ============ */
.complete{display:none;text-align:center;padding-top:40px;}
.complete.active{display:block;}
.complete .trophy{font-size:80px;animation:spin 4s linear infinite;display:inline-block;}
@keyframes spin{50%{transform:rotate(8deg) scale(1.05);}}
.complete h2{font-family:"Mochiy Pop One";font-size:28px;margin:10px 0 6px;}
.complete p{color:var(--muted);margin-bottom:24px;}
.bigstat{display:flex;gap:12px;margin-bottom:24px;}
.bigstat div{
  flex:1;border-radius:var(--r);padding:16px 8px;background:var(--surface);
  box-shadow:var(--soft);
}
.bigstat .n{font-family:"Mochiy Pop One";font-size:30px;}
.bigstat .l{font-size:11px;color:var(--muted);margin-top:2px;}
.cta{
  width:100%;border:var(--bw) solid var(--border);border-radius:var(--r);
  background:var(--a2);color:var(--on-a2);box-shadow:var(--sh) var(--sh) 0 var(--shadow);
  padding:17px;font-family:"Mochiy Pop One";font-size:17px;transition:transform .1s,box-shadow .1s;
}
.cta:active{transform:translate(var(--sh),var(--sh));box-shadow:0 0 0 var(--shadow);}

/* toast */
.toast{
  position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);
  z-index:20;border:var(--bw) solid var(--border);border-radius:12px;background:var(--ink);color:var(--bg);
  padding:10px 16px;font-size:13px;box-shadow:4px 4px 0 var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.hidden-text{display:none!important;}