* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #070b12; overflow: hidden; color: #e8dfcf; font: 15px Georgia, serif; touch-action: none; user-select: none; -webkit-user-select: none; }
#view, #hud { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { pointer-events: none; }
#pauseBtn { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(10, 14, 22, 0.5); fill: #cfc6b4; display: grid; place-items: center; cursor: pointer; }
#pauseBtn[hidden] { display: none; }
#fireBtn { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(32px, env(safe-area-inset-bottom)); width: 84px; height: 84px; border-radius: 42px; border: 2px solid rgba(255, 190, 120, 0.5); background: rgba(60, 30, 10, 0.35); color: #f2c89a; font: italic 16px Georgia, serif; touch-action: none; }
#sheet { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 16px max(28px, env(safe-area-inset-bottom)); background: linear-gradient(transparent 40%, rgba(4, 6, 10, 0.75)); }
#sheet.title { background: none; }
#logo { margin: 0 0 6px; font: italic 600 clamp(34px, 9vw, 52px) Georgia, serif; color: #cfc6b4; letter-spacing: 0.02em; text-shadow: 0 0 24px rgba(127, 224, 200, 0.18); }
#cause { margin: 0 0 18px; min-height: 1.2em; font: italic 15px Georgia, serif; color: #8e8676; }
#sheet:not(.title) #logo, #sheet:not(.title) #cause { display: none; }
#sheet.title #restart, #sheet.title #leave { display: none; }
#sheet[hidden] { display: none; }
.card { width: min(380px, 100%); display: grid; gap: 10px; }
.card button { font: inherit; color: inherit; }
.card > button { min-height: 48px; border-radius: 10px; border: 1px solid rgba(232, 223, 207, 0.25); background: rgba(24, 28, 38, 0.85); cursor: pointer; font-size: 17px; }
.card > button#go { background: rgba(120, 66, 24, 0.85); border-color: rgba(255, 180, 110, 0.5); }
.quiet { opacity: 0.85; font-size: 14px; }
#sheet.title .card > button.quiet { background: transparent; border-color: transparent; min-height: 40px; color: #8e8676; }