*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #2b2622;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  color: #fff;
}
#game {
  position: fixed; inset: 0; height: 100vh; height: 100dvh; overflow: hidden;
}
#game canvas {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; -webkit-touch-callout: none; outline: none;
}

.btn {
  height: 60px; min-width: 168px; padding: 0 28px; border: 0; border-radius: 30px;
  font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: 0.04em;
  cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none;
  transition: opacity 0.4s ease, transform 0.1s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn:disabled:active { transform: none; }

.done {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: #0008; color: #fff;
}
.done:active { transform: translateX(-50%) scale(0.97); }
.done:disabled:active { transform: translateX(-50%); }
.done.gone { opacity: 0; pointer-events: none; }

.white { background: #fff; color: #2b2622; }
.ghost { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }

.after {
  position: absolute; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; gap: 12px; padding: 0 16px;
  opacity: 0; pointer-events: none; transition: opacity 0.6s ease;
}
.after .btn { min-width: 150px; }
.after.show { opacity: 1; pointer-events: auto; }

.hint {
  position: absolute; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 11px 22px; border-radius: 999px; background: #0008; color: #fff;
  font-size: 16px; font-weight: 600; letter-spacing: 0.06em;
  transition: opacity 0.5s ease;
}
.hint.gone { opacity: 0; }

#share-view {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.78);
}
#share-view img {
  display: block; width: min(86vw, 62dvh, 520px); height: auto; aspect-ratio: 1 / 1;
  border-radius: 12px; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto;
}
#share-view p { margin: 0; font-size: 14px; color: #ddd; text-align: center; }

.toast {
  position: absolute; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 11;
  transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 11px 22px; border-radius: 999px; background: #000a; color: #fff;
  font-size: 16px; font-weight: 600; letter-spacing: 0.06em;
  opacity: 0; transition: opacity 0.25s ease;
}
.toast.show { opacity: 1; }