@font-face { font-family: "Baloo 2"; src: url(../fonts/baloo2.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0B1B4A; font-family: "Baloo 2", system-ui, sans-serif; color: #fff;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
body { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; }
#game { display: block; opacity: 0; transition: opacity .5s; touch-action: none; }
body.ready #game { opacity: 1; }
#splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: linear-gradient(#2E7BF0, #123C9C); transition: opacity .5s; pointer-events: none; }
#splash b { font-size: min(18vw, 130px); line-height: 1; color: #FFD23F; -webkit-text-stroke: 12px #1C1F2B; paint-order: stroke fill; }
#splash span { font-size: min(8vw, 48px); font-weight: 800; color: #fff; background: #FF5FA2; padding: 0 22px; border-radius: 14px; border: 4px solid #1C1F2B; }
body.ready #splash { opacity: 0; }
#rotate { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 18px; background: #0B1B4A; z-index: 30; text-align: center; padding: 24px; font-size: 26px; font-weight: 700; }
#rotate svg { width: 120px; height: 120px; animation: tilt 2s ease-in-out infinite; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
body.portrait #rotate { display: flex; }