/* ===== INSTALL — スマホ最適・ダーク基調 ===== */
:root{
  --bg:#0d1117; --bg2:#161b22; --bg3:#1f2733;
  --line:#2a3441; --line2:#39424f;
  --tx:#e6edf3; --tx2:#9aa7b4; --tx3:#6b7684;
  --accent:#4dd0e1; --accent2:#7c5cff;
  --good:#3fb950; --warn:#e3b341; --bad:#f0616d;
  --gold:#f7c948;
  --r:14px; --r2:10px;
  --safe: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  font-size:15px; line-height:1.65; padding-bottom:calc(72px + var(--safe));
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 .5em}
h2{font-size:1.15rem} h3{font-size:1rem}
button{font-family:inherit; cursor:pointer; border:none}
a{color:var(--accent)}
small{color:var(--tx2)}
.hidden{display:none !important}

/* App shell */
#app{max-width:560px; margin:0 auto; min-height:100vh}
.topbar{
  position:sticky; top:0; z-index:20; background:linear-gradient(180deg,var(--bg) 70%,transparent);
  padding:14px 16px 8px; display:flex; align-items:center; justify-content:space-between;
}
.topbar .logo{font-weight:800; letter-spacing:.14em; font-size:14px; color:var(--tx2)}
.topbar .logo b{color:var(--accent); letter-spacing:.14em}
.screen{padding:4px 16px 24px; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1;transform:none}}

/* Card */
.card{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin:0 0 14px}
.card.tight{padding:12px}
.card .lbl{font-size:11px; letter-spacing:.12em; color:var(--tx3); text-transform:uppercase; margin-bottom:8px; display:flex; gap:8px; align-items:center}
.muted{color:var(--tx2)} .dim{color:var(--tx3)}

/* Buttons */
.btn{background:var(--accent); color:#04222a; font-weight:700; border-radius:var(--r2); padding:12px 16px; font-size:15px; width:100%}
.btn:active{transform:scale(.98)}
.btn.sec{background:var(--bg3); color:var(--tx); border:1px solid var(--line2)}
.btn.ghost{background:transparent; color:var(--tx2); border:1px solid var(--line)}
.btn.sm{width:auto; padding:8px 12px; font-size:13px}
.btn.gold{background:var(--gold); color:#3a2c00}
.btn:disabled{opacity:.4}
.row{display:flex; gap:8px} .row.wrap{flex-wrap:wrap}
.spacer{flex:1}

/* Inputs */
textarea,input[type=text],input[type=number],input[type=password],select{
  width:100%; background:var(--bg); color:var(--tx); border:1px solid var(--line2);
  border-radius:var(--r2); padding:11px 12px; font-size:15px; font-family:inherit; resize:vertical;
}
textarea:focus,input:focus,select:focus{outline:none; border-color:var(--accent)}
label.f{display:block; font-size:13px; color:var(--tx2); margin:12px 0 5px}
.count{font-size:11px; text-align:right; color:var(--tx3)}
.count.ok{color:var(--good)}

/* GOAL banner */
.goal{background:linear-gradient(135deg,#1a2a2e,#1c1f33); border:1px solid var(--line2)}
.goal .lbl{color:var(--accent)}
.goal .g{font-size:15px; font-weight:600; white-space:pre-wrap}

/* Today question */
.todayq{background:linear-gradient(160deg,#161b22,#1a1420); border:1px solid var(--line2)}
.todayq .body{font-size:19px; font-weight:700; line-height:1.5; margin:6px 0 14px}
.qtype{font-size:11px; padding:3px 8px; border-radius:999px; font-weight:700}
.qA{background:#123; color:#5cf} .qB{background:#231; color:#fc6} .qC{background:#132; color:#6f9}

/* Monster HP */
.mon{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.mon:last-child{border-bottom:none}
.mon .em{font-size:22px; width:30px; text-align:center}
.mon .info{flex:1; min-width:0}
.mon .nm{font-weight:700; font-size:14px}
.mon .nm .boss{color:var(--bad); font-size:10px; margin-left:6px; border:1px solid var(--bad); padding:0 4px; border-radius:4px}
.mon .ds{font-size:11px; color:var(--tx3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hpwrap{height:8px; background:var(--bg); border-radius:6px; overflow:hidden; margin-top:5px; border:1px solid var(--line)}
.hpbar{height:100%; border-radius:6px; transition:width .5s ease}
.mon.sealed{opacity:.55}
.mon .sealbadge{font-size:10px; color:var(--good); font-weight:700}

/* Meter (単価) */
.meter .val{font-size:30px; font-weight:800; color:var(--gold); letter-spacing:.02em}
.meter .track{height:12px; background:var(--bg); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:8px 0}
.meter .fill{height:100%; background:linear-gradient(90deg,var(--gold),#ff9d3c)}
.meter .scale{display:flex; justify-content:space-between; font-size:10px; color:var(--tx3)}
.statrow{display:flex; gap:10px; margin-top:6px}
.stat{flex:1; background:var(--bg3); border-radius:var(--r2); padding:10px; text-align:center}
.stat b{display:block; font-size:20px; color:var(--tx)}
.stat span{font-size:10px; color:var(--tx3)}

/* Nav */
.nav{position:fixed; bottom:0; left:0; right:0; z-index:30; background:var(--bg2);
  border-top:1px solid var(--line); display:flex; padding-bottom:var(--safe)}
.nav a{flex:1; text-align:center; padding:9px 0 8px; color:var(--tx3); font-size:10px; text-decoration:none}
.nav a .ic{display:block; font-size:19px; line-height:1.2}
.nav a.active{color:var(--accent)}

/* Dojo */
.dojo-line{background:var(--bg3); border-radius:12px 12px 12px 3px; padding:12px 14px; margin:10px 0; max-width:85%}
.dojo-me{background:#14303a; border-radius:12px 12px 3px 12px; padding:12px 14px; margin:10px 0 10px auto; max-width:85%; text-align:right}
.turnbar{display:flex; gap:4px; margin:8px 0}
.turnbar i{flex:1; height:4px; background:var(--line); border-radius:2px}
.turnbar i.done{background:var(--accent)}
.chip{display:inline-block; background:var(--bg3); border:1px solid var(--line2); border-radius:999px; padding:7px 11px; font-size:12px; margin:3px}
.chip.good{border-color:var(--good); color:var(--good)}
.chip.sel{background:var(--accent); color:#04222a; border-color:var(--accent)}
.chip.bad{border-color:var(--warn); color:var(--warn)}

/* History */
.hist{border-left:2px solid var(--line2); padding-left:12px; margin:8px 0}
.hist .d{font-size:11px; color:var(--tx3)}
.hist .b{font-size:14px; white-space:pre-wrap}
.ai{background:#0f1d20; border:1px solid #1d3b40; border-radius:10px; padding:9px 11px; font-size:13px; color:var(--accent); margin-top:8px}

/* Table */
.tbl{width:100%; border-collapse:collapse; font-size:12px}
.tbl th,.tbl td{border:1px solid var(--line); padding:7px 8px; text-align:left; vertical-align:top}
.tbl th{background:var(--bg3); color:var(--tx2); font-size:11px}
.ev{font-size:10px; padding:1px 6px; border-radius:999px; font-weight:700}
.ev.high{background:#0c2e18; color:var(--good)} .ev.mid{background:#2e260c; color:var(--warn)} .ev.low{background:#2e0c14; color:var(--bad)}

/* Radar */
.radarwrap{display:flex; justify-content:center; padding:6px 0}

/* Voice */
.mic{width:120px; height:120px; border-radius:50%; margin:16px auto; display:flex; align-items:center; justify-content:center;
  font-size:44px; background:var(--bg3); border:3px solid var(--line2); transition:.2s}
.mic.rec{border-color:var(--bad); background:#2a1216; animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,97,109,.4)}50%{box-shadow:0 0 0 14px rgba(240,97,109,0)}}
.metrics{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.metric{background:var(--bg3); border-radius:8px; padding:8px 10px; font-size:12px}
.metric b{color:var(--accent)}

/* Qcard */
.qcard{background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px; margin:8px 0}
.qcard .t{font-size:15px; font-weight:600; margin-bottom:6px}
.qcard .meta{display:flex; gap:6px; flex-wrap:wrap; font-size:11px; color:var(--tx3); align-items:center}
.pill{font-size:10px; padding:2px 7px; border-radius:999px; background:var(--bg3); border:1px solid var(--line2)}
.pill.b1{color:var(--tx2)} .pill.b2{color:var(--warn); border-color:var(--warn)} .pill.b3{color:var(--good); border-color:var(--good)}

/* toast */
#toast{position:fixed; bottom:calc(84px + var(--safe)); left:50%; transform:translateX(-50%);
  background:#000d; color:#fff; padding:10px 16px; border-radius:999px; font-size:13px; z-index:99; opacity:0; transition:.25s; pointer-events:none; max-width:90%}
#toast.show{opacity:1}

/* boss defeat overlay */
#defeat{position:fixed; inset:0; z-index:100; background:#000c; display:flex; align-items:center; justify-content:center; flex-direction:column; opacity:0; pointer-events:none; transition:.3s}
#defeat.show{opacity:1; pointer-events:auto}
#defeat .big{font-size:64px; animation:pop .5s ease}
#defeat .txt{font-size:22px; font-weight:800; color:var(--gold); margin-top:10px}
@keyframes pop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.3)}100%{transform:scale(1)}}

/* video modal */
#vidmodal{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:12px}
#vidmodal.show{display:flex}
#vidmodal .vm-bg{position:absolute; inset:0; background:#000d}
#vidmodal .vm-box{position:relative; width:100%; max-width:640px; background:var(--bg2); border:1px solid var(--line2); border-radius:14px; overflow:hidden}
#vidmodal .vm-head{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-size:13px; color:var(--tx2); border-bottom:1px solid var(--line)}
#vidmodal .vm-x{background:var(--bg3); color:var(--tx); border-radius:8px; width:30px; height:30px; font-size:15px}
#vidmodal .vm-frame{position:relative; width:100%; aspect-ratio:16/9; background:#000}
#vidmodal .vm-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
#vidmodal .vm-note{padding:10px 12px; font-size:12px; color:var(--accent); background:#0f1d20}

.sectitle{font-size:12px; letter-spacing:.1em; color:var(--tx3); text-transform:uppercase; margin:18px 4px 8px}
.hr{height:1px; background:var(--line); margin:14px 0}
.warnbox{background:#2a1f0c; border:1px solid #4a3a12; color:var(--warn); border-radius:10px; padding:10px 12px; font-size:13px; margin:10px 0}