:root{
  --cyan: #00f6ff;
  --bg: #000;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  color:#fff;
}

/* 画面中央に 16:9 のゲーム画面を固定表示 */
.stage{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:16px;
}

.screen{
  width:min(1100px, 96vw);
  aspect-ratio: 16 / 9;
  position:relative;
  overflow:hidden;
  border:2px solid rgba(0,246,255,.6);
  box-shadow: 0 0 40px rgba(0,246,255,.12);
  background:#000;
}

/* 背景UI（全面） */
.ui{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  pointer-events:none;
}

/* 中央ナビ */
.navi{
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  height:72%;
  width:auto;
  filter: drop-shadow(0 0 18px rgba(0,246,255,.25));
  user-select:none;
  pointer-events:none;
}

/* ヘッダー（左上名前/右上HP） */
.topbar{
  position:absolute;
  left:3.2%;
  right:3.2%;
  top:2.8%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.nameplate{
  font-weight:800;
  font-size:clamp(18px, 2.2vw, 28px);
  letter-spacing:.06em;
  color:#ffd54d;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
}
.hp{
  font-weight:900;
  font-size:clamp(14px, 1.6vw, 22px);
  color:#aaff55;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
}

/* 左右メニュー（画像上に“当たり判定”として配置） */
.leftMenu{
  position:absolute;
  left:3.2%;
  top:22%;
  display:grid;
  gap:1.4vh;
  width:18%;
}
.rightMenu{
  position:absolute;
  right:3.2%;
  top:26%;
  display:grid;
  gap:1.6vh;
  width:18%;
}

.menuBtn{
  height:7.2vh;
  min-height:40px;
  border:none;
  border-radius:10px;
  font-weight:900;
  font-size:clamp(14px, 1.5vw, 20px);
  letter-spacing:.06em;
  color:#fff;
  background:rgba(0,0,0,.35);
  outline:2px solid rgba(0,246,255,.45);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
  cursor:pointer;
}
.menuBtn:hover{outline-color: rgba(0,246,255,.85)}
.menuBtn:active{transform: translateY(1px)}

.menuBtn.orange{outline-color: rgba(255,170,60,.8)}
.menuBtn.orange:hover{outline-color: rgba(255,170,60,1)}

.menuBtn.blue{outline-color: rgba(120,200,255,.85)}
.menuBtn.blue:hover{outline-color: rgba(120,200,255,1)}

.menuBtn.mail{
  height:10.5vh;
  min-height:64px;
}

/* 下部会話枠 */
.dialog{
  position:absolute;
  left:3.2%;
  right:3.2%;
  bottom:3.2%;
  height:28%;
  display:grid;
  grid-template-rows: 1fr auto;
  gap:10px;
}

.dialogInner{
  background:rgba(0,0,0,.45);
  border:2px solid rgba(0,246,255,.55);
  border-radius:14px;
  padding:12px 14px;
  overflow:hidden;
}

.speaker{
  font-weight:900;
  color: var(--cyan);
  margin-bottom:6px;
  letter-spacing:.06em;
}

.bubble{
  font-weight:800;
  line-height:1.55;
  font-size:clamp(14px, 1.4vw, 20px);
  white-space:pre-wrap;
}

.inputRow{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
}

#userInput{
  height:44px;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.65);
  color:#fff;
  padding:0 12px;
  font-size:16px;
}

.execute{
  height:44px;
  border:none;
  border-radius:12px;
  padding:0 18px;
  font-weight:1000;
  letter-spacing:.08em;
  color:#001014;
  background: var(--cyan);
  cursor:pointer;
  box-shadow: 0 0 18px rgba(0,246,255,.25);
}
.execute:active{transform: translateY(1px)}