html, body { margin: 0; height: 100%; overflow: hidden; background: #101418; color: #fff;
  font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", sans-serif; cursor: none; user-select: none; }
body.pointer { cursor: default; }
#stage { position: fixed; inset: 0; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 350ms ease; }
.layer.on { opacity: 1; }
#caption { position: fixed; left: 50%; bottom: 16vh; transform: translateX(-50%);
  max-width: min(90vw, 1100px); padding: 0.6em 1.1em; border-radius: 0.6em;
  background: rgba(0,0,0,0.62); font-size: clamp(20px, 3.2vh, 44px); line-height: 1.45;
  text-align: center; word-break: keep-all; transition: opacity 250ms; }
#buttons { position: fixed; left: 0; right: 0; bottom: 2.5vh; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 1.2vh; padding: 0 16px; }
#buttons button { font: inherit; font-size: clamp(16px, 2.4vh, 32px); color: #fff; cursor: pointer;
  background: rgba(30, 110, 200, 0.78); border: 2px solid rgba(255,255,255,0.35);
  border-radius: 1em; padding: 0.55em 1.1em; min-width: 6em; touch-action: manipulation; }
#buttons button.seed { background: rgba(80, 90, 100, 0.8); min-width: 0; }
#buttons button.active { background: rgba(240, 140, 40, 0.9); }
#buttons button .k { opacity: 0.6; font-size: 0.7em; margin-right: 0.4em; }
#clock { position: fixed; top: 2vh; right: 2.5vw; font-size: clamp(16px, 3vh, 40px);
  background: rgba(0,0,0,0.4); padding: 0.2em 0.6em; border-radius: 0.4em; }
#start { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); font-size: 4vh; cursor: pointer; }
#help { position: fixed; top: 2vh; left: 2vw; max-width: 70vw; background: rgba(0,0,0,0.8);
  padding: 1em 1.4em; border-radius: 0.6em; font-size: 2vh; line-height: 1.6; }
#diag { margin-top: 0.6em; font-size: 0.85em; opacity: 0.75; white-space: pre-wrap; }
.hidden { display: none !important; }