* { 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: grid; place-items: end center; padding: 0 16px max(28px, env(safe-area-inset-bottom)); background: linear-gradient(transparent 40%, rgba(4, 6, 10, 0.75)); }
#sheet[hidden] { display: none; }
.card { width: min(380px, 100%); display: grid; gap: 10px; }
.card button, .card select { 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); }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid rgba(232, 223, 207, 0.15); background: rgba(24, 28, 38, 0.6); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.row select { background: transparent; border: 0; min-height: 40px; }
.row select option { background: #141822; }
.quiet { opacity: 0.85; font-size: 14px; }
.help { margin: 4px 2px 0; font-size: 13px; line-height: 1.5; color: #aeb6c4; text-align: center; }
.meta { margin: 0; font: 12px system-ui, sans-serif; color: #6c7484; text-align: center; }