/* ヤマクエスト — スマホファーストのゲームUI
   色は「夜明け前の山」をイメージした暗色。屋外でも見やすいコントラストを優先。 */
:root{
  --bg:#0d1b1e; --bg2:#122629; --panel:#16302f; --panel2:#1d3b39;
  --line:#2b514c; --ink:#eaf5f0; --dim:#9fbdb5;
  --accent:#5fd6a5;      /* 進む・安全 */
  --warn:#ffc857;        /* 注意 */
  --danger:#ff6b6b;      /* 危険 */
  --water:#57b8ff;
  --exp:#c792ea;
  --r:14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background-color:#0d1b1e}
body{
  background:radial-gradient(120% 80% at 50% 0%, #16323a 0%, var(--bg) 60%) fixed;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",sans-serif;
  font-size:15px; line-height:1.6; overscroll-behavior:none;
}
#app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.hidden{display:none !important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* ================= HUD ================= */
.hud{position:sticky;top:0;z-index:30;background:linear-gradient(#0f2327ee,#0f2327cc);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:6px 10px 8px;
  padding-top:calc(6px + env(safe-area-inset-top,0px))}
.hud-row1{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--dim)}
.hud-mt{font-weight:700;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-clock{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.hud-clock.night{color:var(--warn)}
.hud-bottle{font-variant-numeric:tabular-nums;color:var(--water)}
.hud-bottle.empty{color:var(--danger)}
.gauges{display:flex;gap:6px;margin-top:5px}
.gauge{flex:1;display:flex;align-items:center;gap:4px;font-size:10px;color:var(--dim)}
.gauge i{font-style:normal;width:24px;flex:none}
.gauge b{font-size:11px;width:26px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.bar{flex:1;height:7px;background:#0a1618;border-radius:99px;overflow:hidden;border:1px solid #24413e}
.bar span{display:block;height:100%;border-radius:99px;transition:width .35s ease}
.g-hp .bar span{background:linear-gradient(90deg,#3ddc97,#8ef0c4)}
.g-fa .bar span{background:linear-gradient(90deg,#ffc857,#ff8a5b)}
.g-wa .bar span{background:linear-gradient(90deg,#2f86d6,#7fd0ff)}
.gauge.crit .bar span{background:linear-gradient(90deg,#ff4d4d,#ff8a8a)!important;animation:pulse .9s infinite}
@keyframes pulse{50%{opacity:.5}}

/* ================= 画面共通 ================= */
main{flex:1;padding:14px 12px calc(28px + var(--safe-b))}
h1{font-size:22px;margin:.2em 0 .1em;letter-spacing:.02em}
h2{font-size:17px;margin:1.2em 0 .5em;display:flex;align-items:center;gap:6px}
h2::before{content:"";width:4px;height:16px;background:var(--accent);border-radius:2px}
p{margin:.5em 0}
.sub{color:var(--dim);font-size:13px}
.center{text-align:center}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:var(--r);padding:12px;margin:10px 0}
.hr{height:1px;background:var(--line);margin:14px 0}
.tag{display:inline-block;font-size:11px;padding:2px 7px;border-radius:99px;
  background:#0f2b28;border:1px solid var(--line);color:var(--dim);margin:2px 3px 2px 0}
.tag.warn{color:var(--warn);border-color:#5a4a1e}
.tag.dan{color:var(--danger);border-color:#5d2a2a}
.tag.ok{color:var(--accent);border-color:#26584a}

/* ボタン */
.btn{display:block;width:100%;padding:13px 14px;border-radius:12px;margin:8px 0;
  background:linear-gradient(180deg,#1f4a44,#193b37);border:1px solid var(--line);
  text-align:left;font-weight:600;transition:transform .08s}
.btn:active{transform:scale(.985)}
.btn.primary{background:linear-gradient(180deg,#2e9e78,#1f7d5e);border-color:#3fbf94;color:#04231a}
.btn.ghost{background:#12292b;font-weight:500;color:var(--dim)}
.btn.danger{background:linear-gradient(180deg,#7d2f2f,#5d2323);border-color:#a04a4a}
.btn small{display:block;font-weight:400;font-size:12px;color:var(--dim);margin-top:3px}
.btn.primary small{color:#0a3a2c}
.btn[disabled]{opacity:.4;pointer-events:none}
.btnrow{display:flex;gap:8px}
.btnrow .btn{margin:8px 0}

/* タイトル */
.title-hero{padding:34px 0 10px;text-align:center}
.title-hero .logo{font-size:44px;line-height:1}
.title-hero h1{font-size:28px;margin-top:8px}
.title-hero .cat{color:var(--accent);font-size:12px;letter-spacing:.3em}

/* 山リスト */
.mt-item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  padding:11px 12px;border:1px solid var(--line);border-radius:12px;margin:8px 0;
  background:linear-gradient(180deg,var(--panel),var(--panel2))}
.mt-item .no{font-size:22px;flex:none;width:34px;text-align:center}
.mt-item .nm{font-weight:700}
.mt-item .meta{font-size:12px;color:var(--dim)}
.stars{letter-spacing:1px;font-size:12px}
.d1{color:#7fe3b5}.d2{color:#b9e37f}.d3{color:var(--warn)}.d4{color:#ff9f5b}.d5{color:var(--danger)}
.locked{opacity:.45}

/* 装備 */
.gear-cat{margin:16px 0 4px;font-size:13px;color:var(--accent);font-weight:700}
.gitem{display:flex;gap:9px;align-items:center;width:100%;text-align:left;padding:9px 10px;
  border:1px solid var(--line);border-radius:10px;margin:6px 0;background:#14302e}
.gitem.sel{border-color:var(--accent);background:#1b4239;box-shadow:0 0 0 1px var(--accent) inset}
.gitem .ck{width:20px;height:20px;border-radius:6px;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:13px;color:#04231a}
.gitem.sel .ck{background:var(--accent);border-color:var(--accent)}
.gitem .nm{flex:1}
.gitem .nm b{display:block;font-size:14px}
.gitem .nm small{color:var(--dim);font-size:11px}
.gitem .num{font-size:11px;color:var(--dim);text-align:right;flex:none}
.packbar{position:sticky;bottom:0;z-index:20;background:#0f2327f2;border-top:1px solid var(--line);
  margin:10px -12px calc(-28px - var(--safe-b));padding:10px 12px calc(10px + var(--safe-b));backdrop-filter:blur(8px)}
.packbar .row{display:flex;gap:12px;font-size:12px;color:var(--dim);margin-bottom:6px}
.packbar .row b{color:var(--ink)}

/* ルートマップ */
.map{position:relative;padding:6px 0 6px 30px;margin:6px 0}
.map::before{content:"";position:absolute;left:13px;top:10px;bottom:10px;width:3px;
  background:linear-gradient(180deg,#2b514c,#3f7a6c);border-radius:2px}
.node{position:relative;margin:10px 0;font-size:13px;color:var(--dim)}
.node .dot{position:absolute;left:-24px;top:1px;width:16px;height:16px;border-radius:50%;
  background:#0d1b1e;border:2px solid #3f7a6c;display:grid;place-items:center;font-size:9px}
.node.done{color:#7fbfa8}
.node.done .dot{background:var(--accent);border-color:var(--accent)}
.node.now{color:var(--ink);font-weight:700}
.node.now .dot{border-color:var(--warn);box-shadow:0 0 0 4px #ffc85733;animation:pulse 1.4s infinite}
.node .sm{font-weight:400;font-size:11px;color:var(--dim)}

/* シーン本文 */
.scene{background:linear-gradient(180deg,#12292b,#0f2224);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;margin:10px 0;position:relative}
.scene .who{font-size:11px;color:var(--accent);letter-spacing:.1em;margin-bottom:4px}
.scene .photo{margin:-14px -14px 10px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;position:relative}
.scene .photo img{display:block;width:100%;height:auto;max-height:220px;object-fit:cover}
.scene .photo .credit{position:absolute;right:0;bottom:0;background:#000000a8;color:#dfe;
  font-size:9px;padding:2px 6px;border-radius:6px 0 0 0;line-height:1.4}
.scene p{margin:.4em 0}
.scene.danger{border-color:#7a3535;background:linear-gradient(180deg,#2a1414,#1a0e0e)}
.scene.good{border-color:#2f7d5f}

/* 学びカード */
.modal-wrap{position:fixed;inset:0;background:#04080adf;z-index:60;display:flex;
  align-items:flex-end;justify-content:center;padding:12px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{width:100%;max-width:496px;background:linear-gradient(180deg,#173735,#102524);
  border:1px solid var(--line);border-radius:18px;padding:16px;max-height:86vh;overflow:auto;
  padding-bottom:calc(16px + var(--safe-b));animation:up .25s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(30px);opacity:.4}}
.teach .head{font-size:12px;letter-spacing:.2em;color:var(--warn)}
.teach h3{margin:.3em 0 .5em;font-size:19px}
.teach .why{background:#0e2422;border-left:3px solid var(--accent);padding:10px 12px;border-radius:0 10px 10px 0;margin:10px 0}
.teach .why b{color:var(--accent)}
.delta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.delta span{font-size:12px;padding:3px 8px;border-radius:8px;background:#0e2422;border:1px solid var(--line)}
.delta .up{color:var(--accent)} .delta .down{color:var(--danger)}

/* ステータス/スキル */
.sk{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:13px}
.sk .nm{width:74px;flex:none;color:var(--dim)}
.sk .bar{height:9px}
.sk .bar span{background:linear-gradient(90deg,#7d5fd6,#c792ea)}
.sk .lv{width:34px;text-align:right;font-weight:700;flex:none}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.bg{background:#14302e;border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;font-size:11px}
.bg .ic{font-size:24px;display:block}
.bg.off{opacity:.28;filter:grayscale(1)}

/* トースト */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + var(--safe-b));
  background:#0f3330;border:1px solid var(--accent);color:var(--ink);padding:9px 16px;border-radius:99px;
  font-size:13px;z-index:80;box-shadow:0 6px 24px #0008;animation:up .2s}
.expfly{position:fixed;color:var(--exp);font-weight:700;font-size:14px;z-index:90;pointer-events:none;
  animation:fly 1.1s ease-out forwards}
@keyframes fly{to{transform:translateY(-46px);opacity:0}}

/* フォーム */
select,input[type=text],input[type=number]{width:100%;padding:11px;border-radius:10px;
  background:#0e2422;border:1px solid var(--line);color:var(--ink);font:inherit;margin:4px 0}
label.fl{font-size:12px;color:var(--dim);display:block;margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0}
.chip{padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:#12292b;font-size:13px}
.chip.sel{background:var(--accent);color:#04231a;border-color:var(--accent);font-weight:700}
.foot{color:var(--dim);font-size:11px;text-align:center;margin-top:22px;line-height:1.8}

/* 資料ページの表。狭い画面では表だけが横スクロールする */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0}
.tablewrap table{border-collapse:collapse;width:100%;min-width:20rem;font-size:13px}
.tablewrap th,.tablewrap td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tablewrap thead th{font-size:10px;letter-spacing:.08em;color:var(--dim);font-weight:500;white-space:nowrap;
  border-bottom:1px solid var(--dim)}
.tablewrap td.k{font-weight:700;white-space:nowrap}
.tablewrap td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap tbody tr:last-child td{border-bottom:0}