#door[hidden], #scene[hidden], #closing-warning[hidden], #door-action[hidden] { display: none; }
body:has(#door:not([hidden])) { margin: 0; background: #234e44; }
#door {
  position: fixed; inset: 0; z-index: 10; display: grid; place-content: center;
  word-break: keep-all; padding: 24px; color: #3f4034; font: 16px/1.6 system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% 32%, #487568, #21483e 74%);
}
#door article {
  box-sizing: border-box; width: min(22rem, calc(100vw - 48px));
  background: #fff1d4; border: 2px solid #675546; border-radius: 18px;
  padding: 24px; box-shadow: 0 5px #aa8970, 0 10px 20px #173b3266;
}
#door h1 { font-size: 1.3rem; margin: 0 0 8px; }
#door p { margin: 0; }
#door button {
  cursor: pointer; display: block; margin-top: 18px; padding: 9px 16px;
  font: inherit; color: #fff7de; background: #285b50; border: 0; border-radius: 20px;
}
#closing-warning {
  position: fixed; z-index: 8; top: max(8px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 110px);
  word-break: keep-all; margin: 0; padding: 6px 11px; border-radius: 10px; background: #fff1d4; color: #473b2b;
  font: 14px/1.4 system-ui, sans-serif; pointer-events: none;
}