html, body {
    margin: 0; padding: 0; background: #1a1c2c; height: 100%;
    overflow: hidden; overscroll-behavior: none;
    touch-action: none;                       /* no pan/zoom gestures: the game owns all touches */
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#app { width: 100%; height: 100vh; height: 100dvh; overflow: hidden; display: flex; justify-content: center; align-items: center; }
#game-container { width: 100vw; height: 100vh; height: 100dvh; }
canvas { touch-action: none; }

/* Portrait on a touch device: ask the player to rotate */
#rotate {
    display: none; position: fixed; inset: 0; z-index: 10; background: #1a1c2c; color: #f4f4f4;
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    font-family: monospace; text-align: center; padding: 24px;
}
#rotate p { margin: 0; font-size: 22px; color: #ffcd75; }
#rotate small { font-size: 13px; color: #94b0c2; }
#rotate .phone {
    width: 46px; height: 78px; border: 4px solid #ffcd75; border-radius: 9px; position: relative;
    animation: zetor-rotate 2.4s ease-in-out infinite;
}
#rotate .phone::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 10px; height: 3px; margin-left: -5px; background: #ffcd75; border-radius: 2px; }
@keyframes zetor-rotate { 0%, 25% { transform: rotate(0deg); } 65%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }