/* ROACH KINGDOM WARS — P1 shell styles. The game renders to a Phaser canvas;
 * CSS only handles the page frame + the pre-boot loading splash. */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #07080b;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#game {
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
#game canvas { display: block; }

/* loading splash, hidden by main.js once Phaser boots */
#splash {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #0a0c11 0%, #07080b 70%);
  color: #e8ecf4; text-align: center;
}
.splash-inner h1 {
  font-size: 38px; letter-spacing: 2px; font-weight: bold;
  background: linear-gradient(90deg, #5a9bff, #b15aff, #f5c451);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(177, 90, 255, 0.35);
}
.splash-inner p { color: #8a93a6; font-style: italic; margin-top: 8px; font-size: 15px; }
.splash-inner small { display: block; color: #5a6275; margin-top: 14px; font-family: monospace; font-size: 11px; }

.spinner {
  width: 34px; height: 34px; margin: 22px auto 0;
  border: 3px solid #1b2230; border-top-color: #8bff5a;
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- mobile shell -------------------------------------------------------- */
html, body {
  overscroll-behavior: none;               /* no pull-to-refresh / bounce */
  -webkit-touch-callout: none;             /* no long-press callout on iOS */
  height: 100dvh;                          /* fill under mobile browser chrome */
}
#game { position: relative; height: 100dvh; }

/* fullscreen toggle — sits over the canvas, top-right, thumb-sized */
#fsbtn {
  position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  z-index: 60;
  width: 42px; height: 42px;
  font-size: 22px; line-height: 1;
  color: #e8ecf4; background: rgba(13, 16, 24, 0.72);
  border: 1px solid #1b2230; border-radius: 10px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#fsbtn:active { background: rgba(27, 34, 48, 0.9); }

/* portrait phones: ask for landscape (the RTS HUD needs the width) */
#rotate {
  display: none; position: fixed; inset: 0; z-index: 80;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 50% 40%, #0a0c11 0%, #07080b 70%);
  color: #e8ecf4; font-size: 22px; letter-spacing: 2px; line-height: 1.9;
}
#rotate small { color: #8a93a6; font-size: 13px; letter-spacing: 1px; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; }
}