html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0d0f14; touch-action: none; }
/* A definite size is required: width/height auto on a canvas make it grow from its own drawing buffer forever (58,000 px wide, phone tab crash loop, 2026-11-03). owner (2026-11-03): the game draws inside the phone's safe area, so the iPhone's Dynamic Island / notch (the black pill on the left in landscape) and the home bar never cover the minimap or dock */
#unity-canvas { position: fixed; top: env(safe-area-inset-top, 0px); left: env(safe-area-inset-left, 0px); width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important; height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; display: block; background: #0d0f14; outline: none; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: #e8e2d0; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #0d0f14; }
#title { font-size: 28px; font-weight: 700; letter-spacing: 0.04em; }
#bar { width: min(320px, 80vw); height: 8px; border-radius: 4px; background: #2a2e38; overflow: hidden; }
#fill { width: 0; height: 100%; background: #c9a24a; transition: width 0.2s; }
#msg { max-width: 80vw; text-align: center; opacity: 0.85; }
/* back to the browser game: a home-screen install has no browser back button */
#back { position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); z-index: 10; padding: 8px 14px; border-radius: 6px;
  background: rgba(0,0,0,0.55); color: #e8e2d0; font: 600 15px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; text-decoration: none; }

/* the map is made for landscape (like Rise to War); a web page cannot lock the phone, so ask for it */
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 20; align-items: center; justify-content: center; background: #0d0f14; color: #e8e2d0;
    font: 600 20px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; text-align: center; padding: 24px; }
}

/* Install app (Android / PC): small pill at the top centre, above the game canvas */
#install { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 15; display: flex; gap: 2px;
  border-radius: 999px; background: rgba(0,0,0,0.65); border: 1px solid #c9a24a; overflow: hidden; }
#install[hidden] { display: none; }
#update { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 16px; border-radius: 999px; background: rgba(12,10,14,0.92); border: 1px solid #c9a24a; color: #ece5d9; font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; white-space: nowrap; }
#update[hidden] { display: none; }
#update button { border: 0; border-radius: 999px; font: 700 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; padding: 9px 14px; cursor: pointer; }
#update .go { background: #c9a24a; color: #1a1408; }
#update .later { background: none; color: #bda66a; padding-left: 6px; }
#install button { background: none; border: 0; color: #f0d98d; font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; padding: 9px 14px; cursor: pointer; }
#install-x { color: #bda66a; padding-left: 4px; }