:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #101217;
  color: #eeeee8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: inherit;
}

/* 日本語: ゲームの外側も一度だけ白へ切り替え、文字と図形のコントラストを保つ。 / English: Turn the entire page white once, keeping text and shapes legible. */
:root.is-won {
  color-scheme: light;
  background: #fffdf8;
  color: #17191f;
}

:root.is-won .game-title {
  color: #17191f;
}

:root.is-won .menu-toggle,
:root.is-won .result-action,
:root.is-won .menu,
:root.is-won .menu button {
  background: #fff;
  color: #17191f;
  border-color: #686d77;
}

:root.is-won .player {
  background: #17191f;
}

:root.is-won .goal {
  border-color: #444954;
}

:root.is-won :focus-visible {
  outline-color: #17191f;
}

:root.is-won .hint-status {
  color: #555b66;
}

.celebration {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 12px;
  border-radius: 1px;
}

[hidden] {
  display: none !important;
}

button,
input {
  font: inherit;
  color: inherit;
}

/* 白いタイトルを上側に置き、中央の遊び場を空ける。 / Keep the white title above the playing area. */
.game-title {
  position: absolute;
  top: max(12%, calc(env(safe-area-inset-top) + 16px));
  left: 0;
  width: 100%;
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .12em;
  text-align: center;
}

/* 既存作品の右上メニューを静かな配色で合わせる。 / Match the existing top-right menu with this game's quiet palette. */
.menu-toggle {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 4;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #555b66;
  border-radius: 8px;
  background: #1a1d24;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}

.menu {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: min(90%, 420px);
  max-height: calc(100svh - 140px);
  padding: 20px;
  overflow-y: auto;
  border: 1px solid #646872;
  border-radius: 12px;
  background: #171a21;
  color: #eeeee8;
  font-size: 16px;
}

.menu-backdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #050709b8;
}

.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.menu h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
}

.menu button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #555b66;
  border-radius: 8px;
  background: #23262e;
  cursor: pointer;
}

.menu-link {
  display: block;
  min-height: 44px;
  padding: 12px 0;
  color: inherit;
  line-height: 1.5;
}

.hint-status {
  margin: 16px 0;
  color: #bfc1c4;
  font-size: 14px;
  line-height: 1.6;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  cursor: pointer;
}

.setting-row input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: #bfc1c4;
}

/* ヒントはゲーム画面と分け、必要な段だけ開ける。 / Keep optional, progressive hints on a separate page. */
.hint-page {
  width: min(100%, 540px);
  margin: auto;
  padding: 40px 24px;
  line-height: 1.8;
}

.hint-page h1 {
  font-size: 24px;
  font-weight: 400;
}

.hint-page details {
  margin: 20px 0;
  padding: 12px 16px;
  border: 1px solid #555b66;
  border-radius: 8px;
}

.hint-page summary {
  min-height: 44px;
  padding: 8px 0;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #eeeee8;
  outline-offset: 4px;
}

/* 可変のブラウザバーと画面端の余白に対応する。 / Respect dynamic viewport and safe areas. */
.game {
  position: relative;
  width: min(100%, 600px);
  height: 100vh;
  height: 100svh;
  min-height: 240px;
  margin: auto;
  overflow: hidden;
}

.stage {
  position: absolute;
  top: 44%;
  left: 10%;
  width: 80%;
  height: 30px;
  transform: translateY(-50%);
}

.track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 道の存在は動きから発見させ、最後に形を明かす。 / Let motion reveal the path before the ruler. */
.ruler {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #646872;
  opacity: 0;
  transition: opacity 600ms ease;
}

.tick {
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: #646872;
  transform: translateX(-50%);
}

.player,
.goal {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.player {
  left: 0;
  width: 16px;
  height: 16px;
  background: #eeeee8;
  transition: left 110ms ease-out;
}

.goal {
  left: 100%;
  width: 25px;
  height: 25px;
  border: 1px solid #bfc1c4;
}

.result {
  position: absolute;
  top: 53%;
  left: 5%;
  width: 90%;
  text-align: center;
  max-height: calc(47% - env(safe-area-inset-bottom) - 12px);
  overflow-y: auto;
}

/* 終幕では空の操作ボタンから、用途が読める結果操作へ切り替える。 / Replace empty movement controls with explicit result actions on completion. */
.result-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: min(100%, 320px);
  margin: 12px auto 0;
}

.result-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #555b66;
  border-radius: 8px;
  background: #1a1d24;
  color: #eeeee8;
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.clear-tweet {
  grid-column: 1 / -1;
  border-color: #bfc1c4;
}

.game.is-won .controls {
  display: none;
}

.result p {
  margin: 0;
  font-size: clamp(16px, 4.4vw, 20px);
  font-weight: 400;
  letter-spacing: .06em;
  opacity: 0;
  transition: opacity 600ms ease;
}

.game.is-won .ruler,
.game.is-won .result p {
  opacity: 1;
}

/* 日本語: 小さいスマホでも成功文を主役にする。 / English: Make the success message prominent even on small phones. */
.game.is-won #message {
  font-size: clamp(26px, 6.5vw, 38px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
}

.controls {
  position: absolute;
  bottom: max(12%, calc(env(safe-area-inset-bottom) + 16px));
  left: 50%;
  display: flex;
  gap: clamp(24px, 8vw, 36px);
  transform: translateX(-50%);
}

.controls button {
  width: clamp(72px, 21vw, 88px);
  height: clamp(72px, 21vw, 88px);
  padding: 0;
  border: 1px solid #555b66;
  border-radius: 16px;
  background: #1a1d24;
  box-shadow: inset 0 1px 0 #303540, 0 3px 0 #0a0c10;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms, transform 100ms;
}

.controls button:active {
  background: #262b35;
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 #303540;
}

.controls button:focus-visible {
  outline: 2px solid #eeeee8;
  outline-offset: 5px;
}

.controls button:disabled {
  cursor: default;
  opacity: .65;
}

/* 横向きでも同じ一画面に収める。 / Keep the same screen usable in landscape. */
@media (max-height: 450px) {
  .stage {
    top: 33%;
  }

  .result {
    top: 46%;
  }

  .controls {
    bottom: max(8%, calc(env(safe-area-inset-bottom) + 12px));
  }

  .controls button {
    width: 64px;
    height: 64px;
  }

  .game.is-won .stage {
    top: 25%;
  }

  .game.is-won .result {
    top: 35%;
    max-height: calc(65% - env(safe-area-inset-bottom) - 12px);
  }
}

.game.reduced-motion *,
.game.reduced-motion *::before,
.game.reduced-motion *::after {
  transition: none !important;
  animation: none !important;
}