html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #05061a; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #0b1030; touch-action: none; outline: none; }
body.art-screen canvas { image-rendering: auto; }
#mobile-controls { position: fixed; z-index: 10; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: end; justify-content: space-between; gap: 6px; pointer-events: none; }
#mobile-controls[hidden] { display: none; }
.move-controls, .action-controls { display: flex; align-items: end; gap: 8px; }
#mobile-controls button { width: 58px; height: 58px; padding: 0; border: 3px solid #afc6f5; border-bottom-width: 7px; border-radius: 15px; background: rgba(21,30,66,.86); color: #fff7d6; font: bold 11px monospace; box-shadow: 0 4px 0 #080b21; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
#mobile-controls .move-controls button { font-size: 22px; }
#mobile-controls button.jump { width: 66px; height: 66px; border-color: #ffd84a; background: rgba(114,71,24,.9); font-size: 13px; }
#mobile-controls button[data-held="true"] { background: #d49b34; color: #14132b; transform: translateY(3px); border-bottom-width: 4px; }
@media (max-width: 380px) { #mobile-controls button { width: 51px; height: 56px; } .move-controls,.action-controls { gap: 5px; } #mobile-controls button.jump { width: 60px; height: 64px; } }
@media (orientation: portrait) { body.touch-layout { align-items: flex-start; padding-top: max(12vh,env(safe-area-inset-top)); box-sizing: border-box; } #mobile-controls { bottom: max(7vh,env(safe-area-inset-bottom)); } }
#rotate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #1d2a66 0%, #0b1030 60%, #05061a 100%); touch-action: none; }
#rotate[hidden] { display: none; }
.rot-card { text-align: center; padding: 28px 30px 24px; border: 3px solid #afc6f5; border-bottom-width: 7px; border-radius: 18px; background: rgba(21,30,66,.9); box-shadow: 0 6px 0 #080b21, 0 0 40px rgba(255,216,74,.18); max-width: 78vw; }
.rot-phone { width: 120px; height: 120px; animation: rot-turn 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
.rot-title { margin: 14px 0 6px; font: bold 22px monospace; letter-spacing: 2px; color: #ffd84a; text-shadow: 0 3px 0 #5a3a10; }
.rot-sub { margin: 0; font: bold 13px monospace; color: #fff7d6; opacity: .85; }
@keyframes rot-turn { 0%, 20% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }