* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  background: #202028;
  color: #e8e8e8;
  font-family: 'DotGothic16', 'Hiragino Kaku Gothic ProN', monospace;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 画面の下に置く説明文と、ノッチ・ホームバーのぶん */
  --reserve: calc(40px + env(safe-area-inset-top) + env(safe-area-inset-bottom));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ゲームボーイの画面 (160x144) を拡大して表示する。1ドット = 0.625cqw */
#gb {
  width: min(100vw, calc((100dvh - var(--reserve)) * 160 / 144), 640px);
  aspect-ratio: 160 / 144;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: #f8f8f0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#screen {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 160 / 96;
  font-size: 5cqw;
  line-height: 1.25;
}

#scene {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  background: #88c8f8;
}

#title {
  position: absolute;
  inset: 3cqw 0 auto 0;
  text-align: center;
  font-size: 10cqw;
  color: #f8f8f8;
  text-shadow: 0.6cqw 0.6cqw 0 #181818, -0.3cqw -0.3cqw 0 #181818, 0.3cqw -0.3cqw 0 #181818, -0.3cqw 0.3cqw 0 #181818;
}
#title span { color: #f8d830; }

#labels { position: absolute; inset: 0; pointer-events: none; color: #181818; }
#labels span { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; }
#labels .head { left: 50%; top: 0.6cqw; }

#hud { position: absolute; inset: 0 0 auto 0; pointer-events: none; color: #f8f8f8; }
#hud > div { position: absolute; padding: 0 1.25cqw; background: rgba(16, 24, 72, 0.8); white-space: nowrap; }
#hud-me { left: 1.25cqw; top: 1.25cqw; }
#hud-time { right: 1.25cqw; top: 1.25cqw; }
#ticker { left: 1.25cqw; top: 8.75cqw; max-width: 97.5cqw; overflow: hidden; }
#ticker:empty { display: none; }

#win {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0.625cqw;
  padding: 1.25cqw 2.5cqw;
  border: 1.25cqw double #30a030;
  outline: 0.625cqw solid #2858c8;
  outline-offset: -0.625cqw;
  border-radius: 1.25cqw;
  background: #f8f8f0;
  color: #181818;
  font-size: 5cqw;
  line-height: 1.3;
  overflow: hidden;
}

.msg { white-space: pre-line; height: 100%; position: relative; }
#gb:has(.msg .next) { cursor: pointer; }
.msg .next { position: absolute; right: 0; bottom: 0; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.menu-head { white-space: nowrap; }
.menu { display: grid; column-gap: 2.5cqw; }

.menu button {
  all: unset;
  display: flex;
  gap: 2.5cqw;
  cursor: pointer;
  white-space: nowrap;
  padding-left: 5cqw;
  position: relative;
}
.menu button.cur::before { content: '▶'; position: absolute; left: 0; }
.menu button.off { color: #909090; }
.menu button .right { margin-left: auto; font-variant-numeric: tabular-nums; }

#help { margin: 0; font-size: 12px; color: #9090a0; text-align: center; padding: 0 8px; }

/* キーボードの説明は、指で操作する端末では出さない */
@media (hover: none) and (pointer: coarse) {
  #help .keys { display: none; }
}

/* 縦長の画面 (スマホの縦持ち) では、ウィンドウを下に広げて、メニューの行を指で押しやすい高さにする。
   160x180 と 1行 11cqw は仮の値 (幅390pxで1行およそ43px、4行まで入る) */
@media (orientation: portrait) {
  #gb {
    width: min(100vw, calc((100dvh - var(--reserve)) * 160 / 180), 640px);
    aspect-ratio: 160 / 180;
  }
  .menu button { min-height: 11cqw; align-items: center; }
}