/* Battle of Shinkai V1.0 display: the game fills the whole browser viewport on every device (phones, tablets,
   desktops) — no page margins, scrolling or website chrome. A fixed, inset-0 box follows the visible area as browser
   toolbars appear / disappear, on rotation, window resizes and in full screen; Unity matches its drawing size to the
   canvas (CSS size × the capped device-pixel ratio). */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0a18;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
#unity-container { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; }
#unity-fullscreen-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#unity-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; outline: none;
  background: #231F20; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none;
  font: 14px Arial, sans-serif; z-index: 40; }
/* Fullscreen API: the whole page (overlays included) goes full screen; keep the same dark background. */
:fullscreen, ::backdrop { background: #0b0a18; }

/* Reads env(safe-area-inset-*) (notches, rounded corners, the home indicator) for the game's HUD; never visible. */
#shinkai-safe-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }

/* ---- start / loading, rotate prompt and compatibility message (the game's own look, no Unity branding) ---- */
.shinkai-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 20; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 40%, #2a1d4a 0%, #0b0a18 70%); color: #fff; font-family: Arial, sans-serif; text-align: center;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.shinkai-overlay.visible { display: flex; }
.shinkai-title { font-size: clamp(18px, 4.2vmin, 30px); font-weight: bold; letter-spacing: 3px; color: #ff8fd0; text-shadow: 0 0 12px rgba(255, 90, 190, .6); }
.shinkai-start-button { font-size: clamp(17px, 3.6vmin, 24px); font-weight: bold; letter-spacing: 2px; padding: 14px 42px; border-radius: 10px; border: 0;
  color: #fff; background: #e0564a; box-shadow: 0 0 18px rgba(224, 86, 74, .6); cursor: pointer; }
.shinkai-hint { font-size: clamp(12px, 2.4vmin, 15px); opacity: .8; max-width: min(80vw, 560px); line-height: 1.4; }
.shinkai-message { opacity: .95; font-size: clamp(14px, 2.8vmin, 17px); }
.shinkai-progress { width: 60vw; max-width: 320px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.shinkai-progress > div { width: 0%; height: 100%; background: #37d6f0; transition: width .2s; }
.shinkai-pill { cursor: pointer; padding: 9px 16px; border: 0; border-radius: 16px; font: bold 13px Arial, sans-serif; color: #fff;
  background: rgba(255, 255, 255, .14); letter-spacing: 1px; }
.shinkai-pill:hover { background: rgba(255, 255, 255, .24); }
#shinkai-install { display: none; }
.shinkai-phone { width: 46px; height: 80px; border: 4px solid #fff; border-radius: 9px; animation: shinkai-rotate 1.8s ease-in-out infinite; }
@keyframes shinkai-rotate { 0%, 20% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }
#shinkai-rotate { z-index: 30; }
#shinkai-unsupported { z-index: 50; }

/* The FULL SCREEN button: a pill at the top centre for a few seconds, then a small icon (the mouse near the top edge
   brings the pill back). Kept inside the safe area. */
#shinkai-fullscreen { position: fixed; z-index: 15; top: calc(6px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 6px; padding: 7px 13px; border: 0; border-radius: 16px; cursor: pointer;
  font: bold 12px Arial, sans-serif; letter-spacing: 1px; color: #fff; background: rgba(0, 0, 0, .5); opacity: .95;
  transition: opacity .3s, padding .3s; -webkit-tap-highlight-color: transparent; }
#shinkai-fullscreen.compact { padding: 5px 7px; opacity: .45; }
#shinkai-fullscreen.compact span { display: none; }
#shinkai-fullscreen:hover { opacity: 1; }