:root { color-scheme: dark; --app-height: 100dvh; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: var(--app-height); overflow: hidden; background: #090e0c; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#game { position: fixed; inset: auto 0 0; height: var(--app-height); overflow: hidden; }
#game-canvas { display: block; width: 100%; height: 100%; }
#spin { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 18%; background: transparent; cursor: pointer; touch-action: manipulation; outline: none; }
#spin:disabled { cursor: default; }
#spin:focus-visible { outline: 2px solid #ffe89b; outline-offset: 5px; }
#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; background: #090e0c; color: #fff; font: 600 16px/1.4 system-ui, sans-serif; transition: opacity .2s; }
#loading.loaded { opacity: 0; pointer-events: none; }
.spinner { width: 48px; height: 48px; border: 4px solid #ffffff38; border-top-color: #f8d18a; border-radius: 50%; animation: loading 1s linear infinite; }
#retry { padding: 10px 20px; font: inherit; color: #fff; background: #254b65; border: 1px solid #d9b777; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } #loading { transition: none; } }