* { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: #f4f4f0; font-family: 'Inter', system-ui, sans-serif; overflow: hidden; touch-action: none; overscroll-behavior: none; } /* Ebitengine creates its own canvas, appends it to , and sizes it 100% x 100% inline. We let it fill the viewport; the runtime letterboxes the fixed 540x720 game centred inside. The paper background fills the letterbox margins so they match the game field. Do NOT constrain the canvas size here or declare a second — either one knocks the game off-centre. */ canvas { display: block; background: #f4f4f0; image-rendering: pixelated; image-rendering: -webkit-optimize-contrast; } #loader { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #f4f4f0; color: #111; } .loader-mark { font-size: 64px; font-weight: 900; } .loader-bar { width: 200px; height: 10px; border: 2px solid #111; } #loader-fill { width: 30%; height: 100%; background: #ffea00; transition: width .3s; } #loader-msg { font-size: 12px; letter-spacing: .1em; } #loader-msg.error { color: #c62828; }