/* ===== ターゲット1900 夏の課題テスト超絶アプリ ===== */
:root{
  --bg:#0b1020; --bg2:#121a33; --card:#182144;
  --panel:#151d38; --panel2:#1b2547;
  --line:#2a3766;
  --fg:#eaf0ff; --fg2:#9fb0da; --fg3:#6d7fb0;
  --acc:#4dd0ff; --acc2:#7c5cff; --ok:#33e0a1; --ng:#ff5d7a; --warn:#ffc93c;
  --grad:linear-gradient(135deg,#4dd0ff,#7c5cff);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 10% -10%,#1c2a5e 0%,transparent 60%),
             radial-gradient(900px 500px at 110% 10%,#3a1f6b 0%,transparent 55%),
             var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7; min-height:100vh;
  padding-bottom:90px;
}
a{color:var(--acc)}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:rgba(11,16,32,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.02em;min-width:0}
.brand .logo{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--grad);
  display:grid;place-items:center;font-size:19px;box-shadow:0 4px 14px rgba(77,208,255,.35)
}
.brand .t1{font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .t2{font-size:10.5px;color:var(--fg2);font-weight:600;letter-spacing:.04em}
.topbar .sp{flex:1}
.iconbtn{
  border:1px solid var(--line);background:var(--panel);border-radius:11px;
  padding:7px 11px;font-size:13px;font-weight:700;color:var(--fg2);white-space:nowrap
}
.iconbtn:hover{color:var(--fg);border-color:var(--acc)}
.iconbtn.on{color:#04121f;background:var(--grad);border-color:transparent}

/* ---------- tabs ---------- */
.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  display:flex;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  background:rgba(13,19,40,.94);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:1 0 auto;min-width:58px;text-align:center;padding:6px 8px;border-radius:12px;
  font-size:10.5px;font-weight:700;color:var(--fg3);line-height:1.35;transition:.15s
}
.tab i{display:block;font-size:19px;font-style:normal;margin-bottom:1px}
.tab.on{color:#06131f;background:var(--grad);box-shadow:0 4px 14px rgba(124,92,255,.4)}

/* ---------- layout ---------- */
main{max-width:760px;margin:0 auto;padding:14px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;
  box-shadow:var(--shadow)
}
.card h2{margin:0 0 12px;font-size:16px;display:flex;align-items:center;gap:8px}
.card h2 .chip{margin-left:auto}
.muted{color:var(--fg2)}
.small{font-size:12.5px}
.center{text-align:center}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
hr.sep{border:none;border-top:1px solid var(--line);margin:14px 0}

.btn{
  border-radius:12px;padding:11px 16px;font-weight:800;font-size:14.5px;
  background:var(--panel2);border:1px solid var(--line);color:var(--fg);transition:.15s
}
.btn:hover{border-color:var(--acc)}
.btn.primary{background:var(--grad);color:#04121f;border-color:transparent;box-shadow:0 6px 18px rgba(77,208,255,.28)}
.btn.ghost{background:transparent}
.btn.ok{background:linear-gradient(135deg,#33e0a1,#12b57e);color:#03221a;border-color:transparent}
.btn.ng{background:linear-gradient(135deg,#ff7a92,#e8375c);color:#2a0410;border-color:transparent}
.btn.warn{background:linear-gradient(135deg,#ffd257,#f0a800);color:#2a1d00;border-color:transparent}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:10px}
.btn.wide{width:100%}
.btn:disabled{opacity:.4;cursor:default}

.chip{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;
  background:var(--panel2);border:1px solid var(--line);color:var(--fg2)
}
.chip.acc{background:rgba(77,208,255,.14);border-color:rgba(77,208,255,.4);color:var(--acc)}
.chip.ok{background:rgba(51,224,161,.14);border-color:rgba(51,224,161,.4);color:var(--ok)}
.chip.ng{background:rgba(255,93,122,.14);border-color:rgba(255,93,122,.4);color:var(--ng)}
.chip.warn{background:rgba(255,201,60,.14);border-color:rgba(255,201,60,.4);color:var(--warn)}

.bar{height:9px;border-radius:99px;background:#0e1530;overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:var(--grad);transition:width .4s}

/* ---------- flashcard ---------- */
.fc-wrap{perspective:1400px;margin:6px 0 14px}
.fc{
  position:relative;width:100%;min-height:290px;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.3,1);cursor:pointer
}
.fc.flip{transform:rotateY(180deg)}
.fc-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:20px;border:1px solid var(--line);padding:20px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(160deg,#1a2450,#141b39);box-shadow:var(--shadow);overflow:auto
}
.fc-face.back{transform:rotateY(180deg);background:linear-gradient(160deg,#1d2a3f,#14243a)}
.fc-word{font-size:40px;font-weight:900;letter-spacing:-.01em;line-height:1.15;word-break:break-word}
.fc-ipa{color:var(--acc);font-size:15px;margin-top:4px;font-weight:700}
.fc-jp{font-size:22px;font-weight:800;line-height:1.5}
.fc-ex{font-size:14px;color:var(--fg2);margin-top:12px;line-height:1.65}
.fc-ex b{color:var(--warn)}
.fc-no{position:absolute;top:10px;left:14px;font-size:11px;color:var(--fg3);font-weight:800}
.fc-hintbtn{position:absolute;top:8px;right:10px}
.fc-tap{position:absolute;bottom:10px;left:0;right:0;font-size:11px;color:var(--fg3)}

/* ---------- quiz ---------- */
.q-stem{font-size:15px;line-height:1.85;margin-bottom:14px}
.q-word{font-size:34px;font-weight:900;text-align:center;margin:6px 0 4px;word-break:break-word}
.opt{
  display:block;width:100%;text-align:left;padding:13px 15px;margin-bottom:9px;border-radius:13px;
  background:var(--panel2);border:1px solid var(--line);font-size:14.5px;font-weight:700;transition:.12s
}
.opt:hover{border-color:var(--acc)}
.opt.correct{background:rgba(51,224,161,.2);border-color:var(--ok);color:#c5ffe8}
.opt.wrong{background:rgba(255,93,122,.18);border-color:var(--ng);color:#ffd3dc}
.opt.dim{opacity:.45}
.opt .num{display:inline-block;width:22px;color:var(--fg3);font-weight:900}

/* ---------- dictation ---------- */
.dic-sent{
  font-size:17px;line-height:2.1;background:#0e1530;border:1px solid var(--line);
  border-radius:14px;padding:16px;margin-bottom:12px
}
.blank{
  display:inline-block;min-width:110px;border-bottom:3px solid var(--acc);
  text-align:center;font-weight:900;color:var(--acc);padding:0 6px
}
.blank.filled{color:var(--ok);border-color:var(--ok)}
.blank.bad{color:var(--ng);border-color:var(--ng)}
.dic-in{
  width:100%;padding:14px 15px;border-radius:13px;background:#0e1530;
  border:2px solid var(--line);color:var(--fg);font-size:19px;font-weight:800;
  letter-spacing:.04em;text-align:center;outline:none
}
.dic-in:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(77,208,255,.12)}
.dic-in.ok{border-color:var(--ok)} .dic-in.ng{border-color:var(--ng)}

/* ---------- time attack ---------- */
.ta-hud{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.ta-time{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ta-time.low{color:var(--ng);animation:pulse .6s infinite}
@keyframes pulse{50%{opacity:.45}}
.ta-combo{font-size:13px;font-weight:900;color:var(--warn)}
.ta-big{font-size:52px;font-weight:900;text-align:center;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- word list ---------- */
.wl{display:flex;flex-direction:column;gap:7px}
.wl-item{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line);text-align:left;width:100%;transition:.12s
}
.wl-item:hover{border-color:var(--acc)}
.wl-no{font-size:10.5px;color:var(--fg3);font-weight:800;width:34px;flex:0 0 34px}
.wl-w{font-weight:900;font-size:16px;min-width:0}
.wl-jp{font-size:12px;color:var(--fg2);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-mid{flex:1;min-width:0}
.dot{width:9px;height:9px;border-radius:99px;flex:0 0 9px;background:#33406e}
.dot.l1{background:var(--ng)} .dot.l2{background:var(--warn)}
.dot.l3{background:#7ad4ff} .dot.l4{background:var(--ok)}

/* ---------- detail ---------- */
.det-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.det-w{font-size:32px;font-weight:900;line-height:1.15}
.sec{margin-top:14px}
.sec-t{font-size:11.5px;font-weight:900;letter-spacing:.1em;color:var(--acc);margin-bottom:5px}
.sec-b{
  background:#0e1530;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:14px;line-height:1.85
}
.sec-b b{color:var(--warn)} .sec-b u{text-decoration-color:var(--acc)}
.root-b{border-left:3px solid var(--acc2)}
.hook-b{border-left:3px solid var(--warn)}

/* ---------- harada ---------- */
.hd-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hd-name{font-weight:900;font-size:16px}
.hd-sub{font-size:11px;color:var(--fg2)}
.chatbox{
  height:min(48vh,420px);overflow-y:auto;padding:12px;border-radius:14px;
  background:#0c122a;border:1px solid var(--line);margin-bottom:10px
}
.msg{display:flex;gap:8px;margin-bottom:12px;align-items:flex-start}
.msg.me{flex-direction:row-reverse}
.msg .av{width:34px;height:34px;flex:0 0 34px}
.bub{
  max-width:80%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.75;
  background:var(--panel2);border:1px solid var(--line)
}
.msg.me .bub{background:var(--grad);color:#04121f;border-color:transparent;font-weight:700}
.bub b{color:var(--warn)} .msg.me .bub b{color:#0a2b3d}
.hd-in{display:flex;gap:8px}
.hd-in input{
  flex:1;padding:12px 14px;border-radius:12px;background:#0e1530;border:1px solid var(--line);
  color:var(--fg);outline:none
}
.hd-in input:focus{border-color:var(--acc)}
.sug{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.sug button{
  padding:6px 11px;border-radius:999px;font-size:12px;font-weight:700;
  background:var(--panel2);border:1px solid var(--line);color:var(--fg2)
}
.sug button:hover{color:var(--acc);border-color:var(--acc)}
.hd-quote{
  display:flex;gap:11px;align-items:center;background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(77,208,255,.1));
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.7
}

/* ---------- modal ---------- */
.mask{
  position:fixed;inset:0;z-index:200;background:rgba(4,8,20,.72);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;padding:0
}
.sheet{
  width:100%;max-width:760px;max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,#182144,#121a35);
  border:1px solid var(--line);border-radius:20px 20px 0 0;padding:18px 16px calc(24px + env(safe-area-inset-bottom));
  animation:up .22s ease
}
@keyframes up{from{transform:translateY(30px);opacity:.5}}
.sheet h3{margin:0 0 12px;font-size:17px;display:flex;align-items:center;gap:8px}
.sheet h3 .x{margin-left:auto;font-size:20px;color:var(--fg3);padding:0 6px}

/* ---------- misc ---------- */
.stat{background:#0e1530;border:1px solid var(--line);border-radius:13px;padding:11px;text-align:center}
.stat .v{font-size:23px;font-weight:900;line-height:1.2}
.stat .k{font-size:10.5px;color:var(--fg2);font-weight:700;margin-top:2px}
.heat{display:grid;grid-template-columns:repeat(auto-fit,minmax(13px,1fr));gap:3px}
.heat i{aspect-ratio:1;border-radius:3px;background:#16204a;display:block}
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:300;
  background:rgba(20,28,58,.96);border:1px solid var(--line);border-radius:12px;
  padding:10px 18px;font-size:13.5px;font-weight:800;box-shadow:var(--shadow);
  animation:up .2s ease;pointer-events:none;max-width:90vw;text-align:center
}
.toast.ok{border-color:var(--ok);color:#b7ffe6}
.toast.ng{border-color:var(--ng);color:#ffd3dc}
.qz-link{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:13px;
  background:linear-gradient(135deg,rgba(60,110,255,.22),rgba(124,92,255,.14));
  border:1px solid #3b4d8f;font-weight:800;font-size:13.5px;text-decoration:none;color:var(--fg)
}
.qz-link:hover{border-color:var(--acc)}
.speak{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:rgba(77,208,255,.14);border:1px solid rgba(77,208,255,.42);color:var(--acc);font-size:17px
}
.speak:hover{background:rgba(77,208,255,.26)}
.speak.lg{width:52px;height:52px;font-size:23px;border-radius:15px}
.kbd{font-size:10.5px;color:var(--fg3);font-weight:700}
label.fld{display:block;font-size:12px;font-weight:800;color:var(--fg2);margin:10px 0 5px}
select,input[type=text],input[type=number]{
  width:100%;padding:10px 12px;border-radius:11px;background:#0e1530;
  border:1px solid var(--line);color:var(--fg);outline:none
}
select:focus{border-color:var(--acc)}
input[type=range]{width:100%;accent-color:#4dd0ff}
.seg{display:flex;gap:5px;background:#0e1530;border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{flex:1;padding:8px 6px;border-radius:9px;font-size:12.5px;font-weight:800;color:var(--fg2)}
.seg button.on{background:var(--grad);color:#04121f}
@media(max-width:420px){
  .fc-word{font-size:33px} .q-word{font-size:28px} .brand .t1{font-size:13.5px}
  main{padding:12px 10px}
}