* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #FBFBF8; color: #111; font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; overscroll-behavior: none; }
.wrap { position: fixed; inset: 0; display: flex; flex-direction: column; }
#game { flex: 1; width: 100%; min-height: 0; display: block; touch-action: none; cursor: none; }
.hud { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px max(18px, env(safe-area-inset-bottom)); }
.hud__help { margin: 0; font: 12px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #555; text-align: center; }
.pill { display: flex; align-items: center; gap: 0; border-radius: 40px; background: #fff; box-shadow: 0 1px 0 #ddd, 0 6px 18px rgba(0,0,0,.08); border: 1px solid #e6e6e2; overflow: hidden; font-size: 15px; }
.pill > * { padding: 9px 16px; border-right: 1px solid #ececec; color: #111; text-decoration: none; background: none; border-top: 0; border-bottom: 0; border-left: 0; font: inherit; cursor: pointer; }
.pill > *:last-child { border-right: 0; }
.pill a:hover, .pill button:hover { background: #f4f4f0; }
@media (max-width: 560px) { .pill span { display: none; } .pill { font-size: 13px; } }