/* 鉄骨渡り: 画面の見た目（3D は canvas、その上に HTML の層を重ねる） */
:root {
  --ink: #f3f0e8;
  --dim: rgba(243, 240, 232, 0.72);
  --gold: #ffd36b;
  --red: #ff5a4e;
  --panel: rgba(8, 10, 20, 0.62);
  --line: rgba(255, 255, 255, 0.22);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #05070f; color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#stage {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none;
}
#ui { position: fixed; inset: 0; pointer-events: none; }
.layer {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.layer[hidden] { display: none; }
button { font: inherit; color: inherit; }
button, a { pointer-events: auto; }

/* 上からの暗さ（文字が読めるように） */
#attract::before, #select::before, #result::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(5, 7, 15, 0.1), rgba(5, 7, 15, 0.7));
}

/* ◀ HUBへ戻る（タイトル・デモ） */
.hub {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: 16px; z-index: 3;
  padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--ink); text-decoration: none;
  background: rgba(0, 0, 0, 0.42); border: 1px solid var(--line);
}

/* デモ: 小さな DEMO と押し方だけ */
#attract { pointer-events: auto; cursor: pointer; }
.demo-tag {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px;
  font: 700 12px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.2em;
  color: var(--gold); padding: 6px 9px; border: 1px solid rgba(255, 211, 107, 0.6); border-radius: 4px;
  animation: blink 1.6s steps(2, start) infinite;
}
.press {
  position: absolute; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 6px); left: 0; right: 0; margin: 0;
  text-align: center; font: 700 15px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.16em;
  color: var(--ink); text-shadow: 0 1px 8px #000;
  animation: blink 1.6s steps(2, start) infinite;
}
.touch-hint { display: none; }
@media (any-pointer: coarse) {
  .touch-hint { display: inline; }
  .pc-hint { display: none; }
}
@keyframes blink { 50% { opacity: 0.25; } }

/* タイトル・結果のパネル */
.menu {
  position: relative; z-index: 2; pointer-events: auto;
  width: min(92vw, 560px); max-height: 100%; overflow: auto;
  padding: 18px 18px 16px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.logo {
  margin: 4px 0 2px; font-size: clamp(40px, 11vw, 64px); font-weight: 900; letter-spacing: 0.16em;
  color: #fff; text-shadow: 0 0 18px rgba(255, 170, 90, 0.5), 0 3px 0 #5a2a14;
}
.en { margin: 0 0 10px; font: 700 12px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 0.14em; color: var(--gold); }
.lead { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.how {
  margin: 0 0 14px; padding: 0; list-style: none; text-align: left; font-size: 13px; line-height: 1.6; color: var(--dim);
}
.how li { padding: 4px 0 4px 16px; position: relative; }
.how li::before { content: "▸"; position: absolute; left: 0; color: var(--gold); }
.how b { color: var(--gold); font-weight: 700; }
.diffs { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.diff, .opt, .sub {
  min-height: 44px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); font-size: 15px;
}
.diff { flex: 1 1 0; min-width: 0; max-width: 160px; padding: 8px 6px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.diff[aria-pressed="true"] { background: var(--gold); color: #1b1407; border-color: var(--gold); }
.best { margin: 4px 0 10px; font-size: 12px; color: var(--dim); min-height: 1em; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.opt { min-height: 40px; font-size: 13px; }
.start {
  display: block; width: 100%; min-height: 56px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #ffe38a, #e6a53a); color: #1b1407; border: 0;
  font-size: 20px; font-weight: 900; letter-spacing: 0.12em;
  box-shadow: 0 4px 0 #8a5a16;
}
.start small, .sub small { display: block; font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.1em; opacity: 0.7; margin-top: 4px; }
.note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--dim); min-height: 1em; }

/* HUD */
#hud { pointer-events: none; }
.hud-top {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: 14px; right: 14px;
  display: flex; align-items: flex-start; gap: 10px;
}
.prog { flex: 1; min-width: 0; }
.prog-txt {
  display: flex; justify-content: space-between; font: 700 13px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em; text-shadow: 0 1px 4px #000; margin-bottom: 6px;
}
.bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb36b, var(--gold)); }
.pause {
  pointer-events: auto; min-width: 58px; min-height: 40px; padding: 8px 10px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); font-size: 13px; cursor: pointer;
}
.balance {
  position: absolute; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 56px);
  transform: translateX(-50%); width: min(76vw, 440px); text-align: center;
}
.scale {
  position: relative; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 90, 78, 0.55), rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0.12) 78%, rgba(255, 90, 78, 0.55));
  border: 1px solid var(--line);
}
.scale::after { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); }
.scale.danger { border-color: var(--red); box-shadow: 0 0 14px rgba(255, 90, 78, 0.7); }
.scale i {
  position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(255, 211, 107, 0.8);
}
.warn { margin-top: 6px; font: 900 16px/1.2 system-ui, sans-serif; color: var(--red); text-shadow: 0 1px 6px #000; min-height: 1.2em; }
.wind {
  position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 110px); left: 50%; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px; font: 900 14px/1 system-ui, sans-serif; color: #e8f2ff;
  background: rgba(40, 70, 120, 0.55); border: 1px solid rgba(180, 210, 255, 0.5);
}
/* 腕（バランスポール）: 傾きの角度そのままに回る。--deg は JS が入れる */
.pole {
  position: absolute; left: 50%; top: 46%; width: min(80vw, 560px); height: 10px; margin: -5px 0 0 max(-40vw, -280px);
  transform: rotate(var(--deg, 0deg)); transform-origin: 50% 50%;
  background: linear-gradient(90deg, #5b6170, #d8dce6 50%, #5b6170); border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.pole .grip { position: absolute; top: -4px; width: 14px; height: 18px; border-radius: 4px; background: var(--red); }
.pole .grip.l { left: 0; } .pole .grip.r { right: 0; }
.count {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  font: 900 clamp(84px, 22vmin, 180px)/1 system-ui, sans-serif; color: #fff;
  text-shadow: 0 0 24px rgba(255, 170, 90, 0.8), 0 4px 0 #5a2a14;
}
.count.go { color: var(--gold); }
.chip {
  position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap;
  background: rgba(0, 0, 0, 0.45); color: var(--dim); border: 1px solid var(--line);
}
.chip.live { color: #bff5c6; }
.keys {
  position: absolute; left: 0; right: 0; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 26px);
  display: none; justify-content: space-between; padding: 0 16px;
  pointer-events: none;
}
.key {
  pointer-events: auto; touch-action: none; width: clamp(68px, 22vmin, 112px); height: clamp(68px, 22vmin, 112px);
  border-radius: 50%; font-size: clamp(22px, 6vmin, 34px); cursor: pointer;
  background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.32); color: var(--ink);
}
.key.on { background: rgba(255, 211, 107, 0.35); border-color: var(--gold); }
#hud.force-touch .keys, html.force-touch .keys, html.force-touch .touch-hint { display: flex; }
html.force-touch .touch-hint { display: inline; }
html.force-touch .pc-hint { display: none; }
@media (any-pointer: coarse) {
  .keys { display: flex; }
}

/* 結果 */
.result h2 { margin: 2px 0 10px; font-size: clamp(30px, 8vw, 44px); font-weight: 900; letter-spacing: 0.1em; }
.result.goal h2 { color: var(--gold); text-shadow: 0 0 16px rgba(255, 211, 107, 0.6); }
.result.fall h2 { color: var(--red); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; text-align: left; }
.stats div { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); }
.stats span { display: block; font-size: 11px; color: var(--dim); }
.stats b { font: 900 20px/1.3 ui-monospace, Menlo, monospace; }
.stats .wide { grid-column: 1 / -1; }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btns .start { font-size: 16px; }
.sub { cursor: pointer; width: 100%; min-height: 56px; font-weight: 700; }

/* 画面の縁の赤（傾きが危ないとき）と、落下の白い光 */
.vig {
  position: fixed; inset: 0; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 90px 30px rgba(255, 40, 30, 0.75);
}
.flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: #fff; }

/* 横の狭い画面（横向きのスマホ）では上下の余白を詰める */
@media (max-height: 500px) {
  .menu { padding: 10px 14px; }
  .logo { font-size: 36px; }
  .how { font-size: 12px; margin-bottom: 8px; }
  .lead { margin-bottom: 6px; }
  .start { min-height: 46px; font-size: 18px; }
  .diff, .opt { min-height: 38px; }
  .balance { top: calc(max(8px, env(safe-area-inset-top)) + 50px); }
}