:root {
  /* 窓の外（ページの背景）の色 */
  --page-bg: #ff4545;
  /* 寄りショットのページの背景色。パッケージ内の黄色（スマホの上下のバーの部分に見える） */
  --closeup-bg: #fddc38;
  /* ラベルの文字と線。現行サイトに合わせる */
  --label: #00a6fc;
  --line: #fff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page-bg);
  transition: background-color 0.2s linear;
}

html.is-closeup,
html.is-closeup body {
  background: var(--closeup-bg);
}

/* lvh で固定し、スマホのアドレスバーの出入りで描画サイズが変わらないようにする */
#stage {
  position: fixed;
  inset: 0 auto auto 0;
  display: block;
  width: 100%; /* 100vw だとスクロールバーの分だけ中心がずれる */
  height: 100lvh;
  touch-action: pan-y pinch-zoom; /* 横スワイプで「ブラウザの戻る」にならないように */
  user-select: none;
}

#stage.is-link { cursor: pointer; }

/* 線とラベル。canvas と同じ範囲に重ねる */
#labels {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
}

#labelLines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#labelLines line {
  stroke: var(--line);
  stroke-width: 1.3px;
  stroke-linecap: round;
  opacity: 0;
}

.label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 14px; /* 押せる範囲を文字より広げる */
  color: var(--label);
  font: 600 20px/1 Antonio, system-ui, sans-serif;
  text-decoration: none;
  opacity: 0;
}

.label.is-active { pointer-events: auto; }

.label:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.label svg {
  display: block;
  width: auto;
  height: clamp(54px, 6vmin, 58px); /* スマホでも PC と同じくらいの大きさ */
  fill: currentColor;
}

/* この高さがスクロールの長さになる */
#scroll {
  position: relative;
  height: 600vh;
  pointer-events: none;
}

/* スクロールの合図：ゲームのタイトル画面の「PRESS START」のようにゆっくり点滅する文字 */
#scrollHint {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  color: #fff;
  font: 400 clamp(17px, 2.4vmin, 22px)/1 Audiowide, system-ui, sans-serif;
  letter-spacing: 0.12em;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.4s ease;
}

#scrollHint.is-hidden { opacity: 0; }

#scrollHint span { animation: start-blink 1.2s ease-in-out infinite alternate; }

/* マウスの端末は SCROLL、指で触る端末は SWIPE */
.hint-swipe { display: none; }

@media (pointer: coarse) {
  .hint-swipe { display: inline; }
  .hint-scroll { display: none; }
}

@keyframes start-blink {
  from { opacity: 1; }
  to { opacity: 0.4; }
}

#status {
  position: fixed;
  inset: 50% 0 auto;
  margin: 0;
  padding: 0 16px;
  text-align: center;
  color: #fff;
  font: 500 14px/1.6 "Zen Kaku Gothic New", system-ui, sans-serif;
  transform: translateY(-50%);
}

#status[hidden] { display: none; }

/* 代替表示：WebGL が使えない／動きを減らす設定／読み込み失敗／JavaScript が無効のとき */
#fallback { display: none; }

.fallback #stage,
.fallback #status,
.fallback #scrollHint,
.fallback #labels,
.fallback #scroll { display: none; }

.fallback #fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}

.fallback-package {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 68vh;
  max-height: 68svh;
}

.fallback-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.fallback-links a {
  display: block;
  padding: 10px 16px;
  border: 2px solid #fff;
  border-radius: 8px;
}

.fallback-links a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.fallback-links img {
  display: block;
  width: auto;
  height: 32px;
}