/* the page can be pinch-zoomed (WCAG 1.4.4) while the table's view is locked; with the view unlocked the game takes the two
   fingers itself (touch-action none, set by Assets/Plugins/WebGL/BgAccess.jslib BgAccessPageZoom) */
html, body { margin: 0; padding: 0; height: 100%; background: #0b0806; overflow: hidden; touch-action: pinch-zoom; }
#unity-canvas { display: block; width: 100vw; height: 100vh; height: 100dvh; background: #0b0806; touch-action: pinch-zoom; }
#unity-canvas:focus { outline: none; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(ellipse at 50% 40%, #2a1a0e 0%, #0b0806 70%); color: #f4ead6; font-family: Georgia, "Times New Roman", serif; transition: opacity 0.6s ease; }
#loading.done { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
#loading .title { font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: #d6ad5b; }
#loading .title span { display: block; margin-top: 6px; font-size: 44px; letter-spacing: 0.02em; text-transform: none; color: #f4ead6; text-align: center; }
#loading .bar { width: min(240px, 60vw); height: 2px; background: rgba(214, 173, 91, 0.2); border-radius: 2px; overflow: hidden; }
#progress { width: 0; height: 100%; background: #d6ad5b; transition: width 0.2s ease; }
#notice { max-width: 22rem; margin: 0 1.5rem; padding: 0.9rem 1rem; border: 1px solid #d6ad5b; border-radius: 12px; background: #1c1209; font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.4; text-align: center; }
/* the screen-reader mirror (Assets/Plugins/WebGL/BgA11y.jslib): real elements where the game draws its controls, read by
   screen readers and reachable with Tab, invisible and click-through for everyone else; a keyboard focus shows a ring */
#bg-a11y { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#bg-a11y .bg-a11y-el { position: fixed; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; font-size: 1px; line-height: 1; overflow: hidden; opacity: 0; pointer-events: none; }
#bg-a11y .bg-a11y-el[data-kind="group"] { position: static; opacity: 1; width: auto; height: auto; overflow: visible; }
#bg-a11y .bg-a11y-el:focus { opacity: 1; outline: 3px solid #ffd400; outline-offset: 2px; border-radius: 6px; }
#bg-a11y input.bg-a11y-el:focus { background: #1c1209; color: #f4ead6; font: 16px system-ui, sans-serif; padding: 0 8px; pointer-events: auto; min-width: 12rem; min-height: 2.2rem; }
#bg-a11y .bg-a11y-live { position: fixed; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* while screen reader support is off, the page's one control that turns it on: first in the document, hidden until focused */
#bg-a11y-offer { position: fixed; left: 8px; top: 8px; z-index: 3; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#bg-a11y-offer:focus { width: auto; height: auto; margin: 0; padding: 10px 14px; clip-path: none; background: #1c1209; color: #f4ead6; font: 16px system-ui, sans-serif; border: 2px solid #ffd400; border-radius: 8px; }