html, body { margin: 0; height: 100%; background: #6aa84f; overflow: hidden; overscroll-behavior: none; }
/* The canvas draws the Log search box. This input sits on it unseen, so typing and a phone keyboard work. */
#logSearchInput { position: fixed; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 16px; }
#cv { position: fixed; inset: 0; display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* Save failures stay visible until the player resolves them. */
#saveNotice, #saveRecovery { font: 16px/1.5 sans-serif; color: #f1f3f5; z-index: 10; }
#saveNotice[hidden], #saveRecovery[hidden] { display: none; }
#saveNotice { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: min(560px, calc(100% - 24px)); padding: 12px; background: #39252b; border: 2px solid #d97171; }
#saveNotice button { margin-left: 12px; }
#saveRecovery { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: #101820e8; }
#saveRecovery > div { box-sizing: border-box; width: min(520px, 100%); max-height: 100%; overflow: auto; padding: 24px; background: #202932; border: 2px solid #79848e; }
#saveRecovery h1 { margin: 0; font-size: 24px; }
#saveRecovery button, #saveNotice button { padding: 10px 14px; color: #f1f3f5; background: #33424f; border: 1px solid #9aa8b3; font: inherit; cursor: pointer; }
#saveRecovery button { margin: 8px 8px 0 0; }
#saveRecovery button:focus-visible, #saveNotice button:focus-visible { outline: 3px solid #f0c66b; outline-offset: 2px; }