/* ============================================================
   ながいずみクエスト  style.css
   画面は 1920x1080 の「ステージ」を基準に作り、game.js で拡大縮小する
   ============================================================ */
:root {
  --win-bg: rgba(6, 6, 14, .88);
  --gold: #ffd75a;
  --pinch: #ffb02e;
  --dead: #ff5a5a;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }

#stage {
  position: fixed; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  overflow: hidden; background: #000;
  font-family: "DotGothic16", "MS Gothic", monospace;
  color: #fff;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#world { position: absolute; inset: 0; }
#world.shake { animation: shake .35s linear; }
@keyframes shake {
  20% { transform: translate(-16px, 6px); } 40% { transform: translate(14px, -8px); }
  60% { transform: translate(-10px, 4px); } 80% { transform: translate(6px, -2px); }
}

/* ---------- 背景・立ち絵 ---------- */
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s, filter .4s; }
.bg.on { opacity: 1; }
#world.battle .bg { filter: brightness(.5) saturate(.85) blur(3px); }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }

#chr {
  position: absolute; left: 50%; bottom: 300px; height: 560px; max-width: 900px; object-fit: contain;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.5));
  z-index: 2;
}
#chr.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 敵 ---------- */
#foes {
  position: absolute; left: 0; right: 0; top: 240px; height: 480px;
  display: flex; justify-content: center; align-items: flex-end; gap: 30px;
  pointer-events: none; z-index: 3;
}
.foe { position: relative; max-height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.foe img { max-height: 480px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.foe.corrupt img { filter: brightness(.6) sepia(1) hue-rotate(225deg) saturate(3.2) contrast(1.15) drop-shadow(0 0 30px #9b30ff); }
.foe.boss img { filter: drop-shadow(0 0 40px rgba(160, 60, 255, .7)) drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.foe.appear { animation: foe-appear .5s ease-out; }
.foe.blink { animation: foe-blink .4s steps(1); }
.foe.lunge { animation: foe-lunge .3s ease-out; }
.foe.die { animation: foe-die .7s forwards; }
.foe.die-big { animation: foe-die-big 2.2s forwards; }
.foe.fly { animation: foe-fly 1.4s ease-in forwards; }
.foe.target::after {
  content: "▼"; position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
  font-size: 44px; color: var(--gold); animation: blink .6s steps(2) infinite;
}
.foe.asleep::before { content: "Zzz"; position: absolute; top: 0; right: 0; font-size: 40px; color: #aee; animation: blink 1s steps(2) infinite; }
@keyframes foe-appear { from { opacity: 0; transform: scale(.85); filter: brightness(3); } to { opacity: 1; transform: none; } }
@keyframes foe-blink { 0%, 50% { opacity: 0; } 25%, 75% { opacity: 1; } 100% { opacity: 1; } }
@keyframes foe-lunge { 40% { transform: scale(1.12) translateY(30px); } }
@keyframes foe-die { 0% { opacity: 1; filter: brightness(2.5); } 100% { opacity: 0; transform: scale(.9); filter: brightness(0) blur(8px); } }
@keyframes foe-die-big {
  0%, 60% { filter: brightness(1); } 10%, 30%, 50% { filter: brightness(3) hue-rotate(90deg); } 20%, 40% { filter: brightness(.3); }
  100% { opacity: 0; transform: scale(1.3); filter: brightness(5) blur(20px); }
}
@keyframes foe-fly { 30% { transform: translateY(30px); } 100% { opacity: 0; transform: translateY(-900px) scale(.4); } }

/* ---------- ウィンドウ（ドラクエ風） ---------- */
.win {
  position: absolute; z-index: 20;
  background: var(--win-bg);
  border: 5px solid #fff; border-radius: 16px;
  box-shadow: 0 0 0 4px #000, inset 0 0 0 3px #000, 0 10px 30px rgba(0,0,0,.5);
  padding: 22px 34px;
  font-size: 46px; line-height: 1.45;
}

/* パーティのステータス（上） */
#status { position: absolute; left: 40px; right: 40px; top: 28px; display: flex; gap: 16px; z-index: 20; }
.pst { position: relative; flex: 1; display: flex; gap: 14px; align-items: center; padding: 12px 18px; font-size: 34px; line-height: 1.25; transition: transform .15s; }
.pst .face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; border: 3px solid #fff; flex: none; background: #333; }
.pst-body { flex: 1; min-width: 0; }
.pst-name { font-size: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 2px solid rgba(255,255,255,.6); margin-bottom: 2px; }
.pst-row { display: flex; justify-content: space-between; }
.pst-row b { font-weight: normal; }
.pst-job { font-size: 24px; color: #cfd3ff; }
.pst.pinch { border-color: var(--pinch); color: var(--pinch); }
.pst.dead { border-color: var(--dead); color: var(--dead); }
.pst.dead .face { filter: grayscale(1) brightness(.5); border-color: var(--dead); }
.pst.turn { transform: translateY(14px); border-color: var(--gold); }
.pst.asleep .pst-name::after { content: " Zz"; color: #aee; }

#place { left: 40px; top: 262px; padding: 8px 30px; font-size: 38px; z-index: 5; white-space: nowrap; }
#place .g { color: var(--gold); margin-left: 30px; }

/* メッセージ */
#msg { left: 40px; right: 40px; bottom: 30px; height: 300px; }
#msg-text { white-space: pre-wrap; }
#msg-name {
  position: absolute; left: 30px; top: -36px;
  background: #fff; color: #000; padding: 2px 26px; border-radius: 10px;
  font-size: 38px; line-height: 1.4;
}
#msg-arrow { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 30px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* メニュー */
.menu { z-index: 30; min-width: 340px; padding: 16px 30px 16px 18px; max-height: 1000px; }
.menu-title { font-size: 32px; color: #cfd3ff; margin: -2px 0 6px 50px; white-space: nowrap; }
.menu-item { display: flex; align-items: center; cursor: pointer; white-space: nowrap; padding: 0 6px; border-radius: 8px; }
.menu-item .cur { visibility: hidden; width: 50px; flex: none; }
.menu-item.sel .cur { visibility: visible; animation: blink .8s steps(2) infinite; }
.menu-item .lbl { flex: 1; }
.menu-item .rt { margin-left: 44px; }
.menu-item.disabled { color: #6f6f78; }
.menu.small { font-size: 40px; }

/* 情報ウィンドウ（つよさ など） */
.info { left: 50%; top: 250px; transform: translateX(-50%); z-index: 30; min-width: 900px; font-size: 40px; }
.info table { border-collapse: collapse; width: 100%; }
.info td { padding: 0 14px; white-space: nowrap; }
.info td.v { text-align: right; }
.info .head { display: flex; gap: 24px; align-items: center; margin-bottom: 10px; }
.info .head img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; border: 3px solid #fff; }

/* ---------- タイトル ---------- */
#title { position: absolute; left: 0; right: 0; top: 150px; text-align: center; z-index: 6; pointer-events: none; }
#title h1 {
  font-family: "Dela Gothic One", sans-serif; font-weight: normal;
  font-size: 150px; margin: 0; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd75a 45%, #c8811e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #3a1d00) drop-shadow(0 0 30px rgba(0,0,0,.7));
}
#title p { font-size: 58px; margin: 12px 0 0; text-shadow: 0 4px 0 #000, 0 0 20px #000; }

/* ---------- 仲間えらび ---------- */
.select { position: absolute; inset: 0; z-index: 30; background: rgba(4, 4, 12, .82); padding: 40px 60px; }
.select h2 { margin: 0 0 24px; font-size: 52px; font-weight: normal; text-align: center; }
.select .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  position: relative; display: flex; gap: 20px; align-items: center;
  height: 236px; padding: 14px 18px; border: 4px solid rgba(255,255,255,.35); border-radius: 16px;
  background: rgba(20, 20, 40, .9); cursor: pointer; font-size: 38px; line-height: 1.35;
}
.card img { width: 200px; height: 200px; border-radius: 12px; object-fit: cover; object-position: 50% 10%; flex: none; }
.card .job { color: #cfd3ff; font-size: 32px; }
.card .desc { font-size: 24px; color: #aaa; line-height: 1.3; margin-top: 6px; }
.card.focus { border-color: #fff; }
.card.on { border-color: var(--gold); background: rgba(70, 55, 10, .9); }
.card .num {
  position: absolute; top: -14px; right: -14px; width: 64px; height: 64px; border-radius: 50%;
  background: var(--gold); color: #000; font-size: 40px; display: flex; align-items: center; justify-content: center;
}
.select .foot { margin-top: 26px; display: flex; justify-content: center; align-items: center; gap: 40px; font-size: 40px; }
.select .go { font: inherit; font-size: 46px; padding: 10px 60px; border-radius: 12px; border: 4px solid #fff; background: #000; color: #fff; cursor: pointer; }
.select .go:disabled { opacity: .35; cursor: default; }
.select .go.focus { border-color: var(--gold); color: var(--gold); }

/* ---------- 演出 ---------- */
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s; z-index: 10; }
#fade.on { opacity: 1; }
#flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 50; }
#flash.go { animation: flash .3s ease-out; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }

#endcard {
  position: absolute; inset: 0; z-index: 40; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
}
#endcard h2 { font-family: "Dela Gothic One", sans-serif; font-weight: normal; font-size: 160px; margin: 0; color: var(--gold); }
#endcard p { font-size: 48px; margin: 0; }
#endcard .small { font-size: 36px; color: #aaa; }

#mute {
  position: absolute; right: 10px; bottom: 4px; z-index: 60;
  width: 40px; height: 26px; padding: 0; border: 0; background: none;
  color: rgba(255,255,255,.55); font-size: 22px; cursor: pointer; line-height: 1;
}
#mute.off { text-decoration: line-through; color: rgba(255,255,255,.3); }
#endcard .credits { font-size: 20px; color: #888; text-align: center; line-height: 1.5; margin-top: 20px; font-family: sans-serif; }