/* =========================================================
   style.css — チープに、でも読みやすく
   ========================================================= */
:root {
  --cell: 36px;
  --ink: #f2f4ff;
  --win: #0d1230;
  --win2: #161d47;
  --line: #cfd6ff;
  --accent: #ffd84d;
  --danger: #ff6b7a;
  --ok: #6be08a;
  --mp: #6bb8ff;
  --shake: 6px;
  --font: "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
          "Meiryo", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #05060f;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px;
  background:
    radial-gradient(ellipse at 50% -10%, #16204d 0%, #05060f 62%);
}

/* ---------- タイトル ---------- */
#title {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  background: radial-gradient(ellipse at 50% 35%, #1b2560 0%, #05060f 70%);
  z-index: 60;
  text-align: center;
}
#title.show { display: flex; }
.t-sub { font-size: 13px; letter-spacing: .18em; color: #9fb0ff; }
.t-main {
  margin: 4px 0 0;
  font-size: clamp(30px, 8vw, 54px);
  letter-spacing: .1em;
  text-shadow: 0 0 18px rgba(120,150,255,.7), 0 3px 0 #202a63;
}
.t-en { font-size: 12px; letter-spacing: .35em; color: #7d8ce0; margin-bottom: 8px; }
.t-deco { font-size: 26px; margin: 6px 0 26px; filter: saturate(.9); }
.t-hint {
  position: absolute; bottom: 26px;
  font-size: 12px; color: #7d8ce0;
}

/* ---------- 上部バー ---------- */
#topbar {
  width: 100%; max-width: 620px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  padding: 5px 10px;
  background: var(--win);
  border: 2px solid var(--line);
  border-radius: 8px;
  min-height: 28px;
}
.tb-place { font-weight: 700; }
.tb-gold { color: var(--accent); }
.tb-diff { margin-left: auto; opacity: .95; }
.orb { font-size: 12px; }
.orb.off { opacity: .28; }

/* ---------- ステージ ---------- */
#stage {
  position: relative;
  width: calc(var(--cell) * 15);
  height: calc(var(--cell) * 11);
  border: 3px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #0a0f28;
  flex-shrink: 0;
}
#stage.hidden, #status.hidden { display: none; }
#stage.night { filter: brightness(.35) saturate(.4) hue-rotate(200deg); transition: filter .5s; }
#stage.shake { animation: shake .18s linear; }
@keyframes shake {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(calc(var(--shake) * -1), 1px); }
  50% { transform: translate(var(--shake), -1px); }
  75% { transform: translate(calc(var(--shake) * -.6), 0); }
}

#mapview {
  display: none;
  grid-auto-rows: var(--cell);
  width: 100%; height: 100%;
}
#mapview.show { display: grid; }
.cell {
  width: var(--cell); height: var(--cell);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cell) * .74);
  line-height: 1;
  background: #0a0f28;
}
.cell.dim { opacity: .3; filter: grayscale(.7); }
.cell.unlit { background: #05070f; }
.cell.hero {
  filter: drop-shadow(0 0 6px #ffe98a);
  animation: bob .9s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

#flash {
  position: absolute; inset: 0;
  background: #fff; opacity: 0; pointer-events: none;
  transition: opacity .08s;
}
#flash.on { opacity: .55; }

/* ---------- 戦闘画面 ---------- */
#battleview {
  display: none;
  position: absolute; inset: 0;
  background:
    linear-gradient(#101838 0%, #060a1c 100%);
  align-items: center; justify-content: center;
}
#battleview.show { display: flex; }
.enemyrow {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: flex-end; justify-content: center;
  padding: 12px;
  max-width: 100%;
}
.en {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  position: relative;
  min-width: 74px;
  transition: transform .1s, opacity .25s;
}
.en.dead { opacity: 0; transform: scale(.4); pointer-events: none; }
.en-emoji { font-size: 42px; line-height: 1; filter: drop-shadow(0 3px 5px #000); }
.en.boss .en-emoji { font-size: 66px; }
.en.asleep .en-emoji { filter: grayscale(.6) drop-shadow(0 3px 5px #000); }
.en-hp {
  width: 54px; height: 5px; border-radius: 3px;
  background: #2a3163; overflow: hidden;
}
.en.boss .en-hp { width: 110px; height: 7px; }
.en-hp i { display: block; height: 100%; background: var(--ok); transition: width .25s; }
.en-hp i.mid { background: var(--accent); }
.en-hp i.low { background: var(--danger); }
.en-name { font-size: 10px; color: #cfd6ff; text-align: center; }
.en.target { transform: translateY(-6px) scale(1.06); }
.en.target::after {
  content: '▼'; position: absolute; top: -16px; color: var(--accent);
  font-size: 14px; animation: bob .6s infinite;
}
.en.hit { animation: enhit .14s linear; }
.en.crit { animation: enhit .14s linear 2; }
@keyframes enhit {
  0%,100% { transform: translateX(0); filter: none; }
  50% { transform: translateX(6px); filter: brightness(2.4) saturate(0); }
}
.pop {
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  font-size: 20px; font-weight: 800;
  color: #fff; text-shadow: 0 0 6px #000, 0 2px 0 #a11;
  animation: pop .8s ease-out forwards;
  pointer-events: none;
}
.pop.miss { font-size: 14px; color: #b9c2ee; text-shadow: 0 0 5px #000; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); }
  25% { opacity: 1; transform: translate(-50%, -12px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}

/* ---------- パーティ状態 ---------- */
#status {
  width: 100%; max-width: 620px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
.pc {
  background: var(--win); border: 2px solid var(--line);
  border-radius: 7px; padding: 4px 6px;
  font-size: 11px;
  transition: border-color .15s, background .15s;
}
.pc.act { border-color: var(--accent); background: var(--win2); }
.pc.danger { border-color: var(--danger); }
.pc.dead { opacity: .45; border-color: #555; }
.pc-head { display: flex; align-items: center; gap: 3px; margin-bottom: 2px; }
.pc-emoji { font-size: 13px; }
.pc-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-lv { margin-left: auto; color: #9fb0ff; font-size: 10px; }
.pc-row { display: flex; align-items: center; gap: 3px; line-height: 1.5; }
.pc-row .lab { font-size: 9px; color: #9fb0ff; width: 15px; }
.pc-row .bar { flex: 1; height: 4px; background: #2a3163; border-radius: 2px; overflow: hidden; }
.pc-row .bar i { display: block; height: 100%; background: var(--ok); transition: width .25s; }
.pc.danger .pc-row .bar i { background: var(--danger); }
.pc-row.mp .bar i { background: var(--mp); }
.pc-row .num { width: 26px; text-align: right; font-size: 10px; }
.pc-state { font-size: 9px; color: var(--danger); text-align: center; }
.pc-state.poison { color: #b57bff; }

/* ---------- メッセージ ---------- */
#msgwin {
  width: 100%; max-width: 620px;
  min-height: 86px;
  background: var(--win);
  border: 3px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px; line-height: 1.65;
  white-space: pre-wrap;
  position: relative;
  /* 常に場所を確保しておき、出入りで画面が跳ねないようにする */
  visibility: hidden;
}
#msgwin.show { visibility: visible; }
#msgcursor {
  position: absolute; right: 12px; bottom: 6px;
  color: var(--accent); font-size: 13px;
  opacity: 0; animation: bob .8s infinite;
}

/* ---------- メニュー ---------- */
#menulayer {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 70;
}
.menuwin {
  position: absolute;
  pointer-events: auto;
  background: var(--win);
  border: 3px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 168px;
  max-width: min(92vw, 470px);
  max-height: 78vh;
  overflow-y: auto;
  box-shadow: 0 10px 34px rgba(0,0,0,.65);
  font-size: 14px;
  /* 既定：中央 */
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.menuwin.wide { min-width: 300px; }
.menuwin.left   { left: 14px;  top: 64px; transform: none; }
.menuwin.right  { right: 16px; bottom: 118px; left: auto; top: auto; transform: none; }
.menuwin.battle { left: 12px;  bottom: 118px; top: auto; transform: none; }
.menuwin.title  { left: 50%; top: 62%; transform: translate(-50%, 0); min-width: 230px; }
.menuwin.center { left: 50%; top: 50%; transform: translate(-50%, -50%); }

.menutitle {
  font-size: 12px; color: var(--accent);
  border-bottom: 1px solid #3a4489;
  padding-bottom: 4px; margin-bottom: 5px;
  font-weight: 700;
}
.menulist { display: grid; gap: 1px; }
.mi {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 5px; border-radius: 5px;
  white-space: nowrap;
}
.mi .mcur { opacity: 0; color: var(--accent); font-size: 11px; }
.mi.sel { background: var(--win2); }
.mi.sel .mcur { opacity: 1; }
.mi.dis { opacity: .36; }
.mlabel { overflow: hidden; text-overflow: ellipsis; }
.mright { margin-left: auto; padding-left: 14px; font-size: 12px; color: #a9b6ff; }
.menudesc {
  margin-top: 6px; padding-top: 5px;
  border-top: 1px solid #3a4489;
  font-size: 11.5px; line-height: 1.5; color: #c3ccff;
  white-space: pre-wrap;
  min-height: 2.6em;
}

/* 名前入力 */
.menuwin.prompt { left: 50%; top: 44%; transform: translate(-50%, -50%); min-width: 260px; }
.nameinput {
  width: 100%; margin: 6px 0;
  background: #050818; color: var(--ink);
  border: 2px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-size: 19px; font-family: var(--font);
  text-align: center; letter-spacing: .08em;
  outline: none;
  /* body の user-select:none を打ち消す（打てない・選べない事故を防ぐ） */
  user-select: text; -webkit-user-select: text;
}
.nameinput:focus { border-color: var(--accent); }
.pbtns { display: flex; gap: 6px; margin: 8px 0 2px; }
.pbtn {
  flex: 1; padding: 7px 4px;
  background: var(--win2); color: var(--ink);
  border: 2px solid var(--line); border-radius: 7px;
  font-family: var(--font); font-size: 12px; cursor: pointer;
  transition: background .1s, transform .08s;
}
.pbtn:hover { background: #223066; }
.pbtn:active { transform: scale(.95); }
.pbtn.ok { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.phint { font-size: 10.5px; color: #8f9de8; text-align: center; margin-top: 3px; }

#info {
  font-size: 11px; color: #9fb0ff; min-height: 14px;
}

/* ---------- タッチ操作 ---------- */
#pad {
  width: 100%; max-width: 620px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 6px;
}
.dpad { position: relative; width: 132px; height: 92px; }
.pb {
  background: var(--win); color: var(--ink);
  border: 2px solid var(--line); border-radius: 9px;
  font-family: var(--font); font-size: 15px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .08s, transform .08s;
}
.pb:active { background: var(--win2); transform: scale(.94); }
.pb small { font-size: 8px; color: #9fb0ff; }
.dpad .pb { position: absolute; width: 44px; height: 30px; }
.dpad .up    { left: 44px; top: 0; }
.dpad .down  { left: 44px; top: 62px; }
.dpad .left  { left: 0;   top: 31px; }
.dpad .right { left: 88px; top: 31px; }
.abtn { display: flex; gap: 8px; }
.abtn .pb { width: 58px; height: 58px; border-radius: 50%; font-weight: 700; }
.abtn .a { border-color: var(--accent); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 620px) {
  :root { --cell: 30px; }
  #msgwin { font-size: 13.5px; min-height: 74px; }
  #status { gap: 3px; }
  .pc { font-size: 10px; padding: 3px 4px; }
}
@media (max-width: 500px) {
  :root { --cell: 25px; }
  #app { padding: 5px; gap: 4px; }
  #msgwin { font-size: 12.5px; min-height: 66px; padding: 8px 10px; }
  .menuwin { font-size: 12.5px; }
  .en-emoji { font-size: 34px; }
  .en.boss .en-emoji { font-size: 52px; }
}
@media (max-height: 700px) {
  #pad { display: none; }
}
@media (pointer: fine) and (min-width: 800px) {
  #pad { opacity: .5; }
  #pad:hover { opacity: 1; }
}