/* 毒キノコクエスト — ドラクエ風UI */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:#0a0c14;
  color:#fff;
  font-family:'Hiragino Kaku Gothic ProN','BIZ UDGothic','MS Gothic',monospace,sans-serif;
  min-height:100vh; display:flex; justify-content:center;
}
#app { width:100%; max-width:760px; padding:10px; display:flex; flex-direction:column; gap:10px; }

/* ドラクエ風ウィンドウ共通 */
.dqwin {
  background:#000;
  border:3px solid #fff;
  border-radius:8px;
  box-shadow:0 0 0 3px #000, inset 0 0 0 1px #000;
  padding:12px 14px;
}

/* HUD */
#hud { font-size:14px; }
.hudrow { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; }
.hudrow + .hudrow { margin-top:6px; }
.hudage { color:#ffd76a; font-weight:bold; }
.hudmoney { color:#9fe6a0; }
.hudsat { color:#ffb3c1; }
.hudgood { color:#c9b7ff; }
.fchip { background:#141a2e; border:1px solid #3a4668; border-radius:99px; padding:2px 9px; font-size:12px; }
.fchip b { color:#ffd76a; }

/* マップ（小金持ち山のフロア） */
#scene {
  position:relative; height:380px; overflow:hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% 118%, #24304f 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 0%, #3b2a55 0%, transparent 55%),
    linear-gradient(#0b1226, #101830 60%, #0d1424);
}
.chname {
  position:absolute; z-index:3; left:10px; top:8px;
  color:#ffd76a; font-weight:bold; font-size:12px; letter-spacing:1px;
  background:rgba(0,0,0,.55); border:1px solid #3a4668;
  border-radius:6px; padding:3px 10px; text-shadow:0 0 6px #000;
}
.mpath {
  position:absolute; left:50%; top:8%; bottom:4%; width:0;
  border-left:3px dashed #2e3a5e; transform:translateX(-50%);
}
.mnode {
  position:absolute; transform:translate(-50%,-50%);
  text-align:center; z-index:2; width:90px;
  padding:4px 2px; border-radius:8px;
  background:rgba(13,17,34,.85); border:1px solid #2b3352;
}
.mnode .micon { font-size:22px; line-height:1.2; }
.mnode .mname { font-size:9px; color:#cdd6f4; margin-top:1px; line-height:1.3; }
.mnode .mname.big { font-size:12px; padding:4px 0; color:#ffe9a8; }
.mnode.spot { background:rgba(20,28,52,.9); border-color:#4a5a86; }
.mnode.boss { border-color:#a06bff; background:rgba(24,13,42,.9); width:110px; }
.mnode.boss .mname { color:#d8bfff; }
.mnode.dead { opacity:.35; filter:grayscale(1); }
.mnode.hiddenboss { border-style:dashed; color:#666; font-size:16px; width:60px; }
.mnode.waiting { opacity:.5; border-style:dashed; }
.mnode.clickable { cursor:pointer; }
.mnode.clickable:hover { border-color:#ffd76a; box-shadow:0 0 8px rgba(255,215,106,.35); }
.mnode.busy { pointer-events:none; }
#player {
  position:absolute; z-index:4; font-size:24px;
  transform:translate(-50%,-50%);
  transition:left .8s ease-in-out, top .8s ease-in-out;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.8));
  pointer-events:none;
}
#player.walking { animation:hop .25s infinite; }
@keyframes hop { 0%,100%{ margin-top:0; } 50%{ margin-top:-4px; } }

/* メッセージウィンドウ */
#msgwin { min-height:96px; cursor:pointer; position:relative; font-size:15px; line-height:1.8; }
#msgtext { white-space:pre-wrap; }
#msgnext {
  position:absolute; right:12px; bottom:6px;
  animation:bounce 0.8s infinite; visibility:hidden;
}
@keyframes bounce { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }

/* 選択肢 */
#choices { display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto; }
#choices.hidden { display:none; }
.choice {
  background:#000; color:#fff; text-align:left;
  border:2px solid #fff; border-radius:8px;
  padding:10px 14px; font-size:14px; font-family:inherit;
  cursor:pointer; display:flex; flex-direction:column; gap:2px;
}
.choice:hover:not(:disabled) { background:#1c2440; }
.choice:hover:not(:disabled)::before { content:'▶ '; color:#ffd76a; }
.choice .csub { font-size:11px; color:#9aa5c4; }
.choice.locked { border-color:#555; color:#777; cursor:not-allowed; }
.choice.temp { border-color:#7a3a4a; }
.choice.temp:hover { background:#2a1018; }
.choice.back { border-color:#5a6b8c; color:#aebbdd; }

/* トースト */
.toast {
  position:fixed; top:14px; left:50%; transform:translate(-50%,-24px);
  background:#1a2340; border:2px solid #ffd76a; color:#ffd76a;
  border-radius:8px; padding:8px 18px; font-size:13px; opacity:0;
  transition:all .35s; z-index:99; pointer-events:none;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:480px){
  #scene { height:330px; }
  .mnode { width:76px; }
  .mnode.boss { width:96px; }
  #msgwin { font-size:14px; }
}