/* Disaster Island WebGL shell. Everything here exists so a phone browser behaves like a native app. */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  position: fixed; inset: 0; overflow: hidden; background: #000;
  overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#unity-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; background: #0a1220;
  touch-action: none; outline: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
@supports (height: 100dvh) { #unity-canvas { height: 100dvh; } html, body { height: 100dvh; } }
img { -webkit-user-drag: none; pointer-events: none; }

/* loading */
#di-loading { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #0a1220; color: #fff; }
#di-loading.di-done { display: none; }
.di-title { font-weight: 800; letter-spacing: .12em; font-size: clamp(20px, 5vmin, 44px); text-shadow: 1.5px 1.5px 0 #000; }
.di-bar { width: min(60vw, 420px); height: 10px; border-radius: 6px; background: rgba(255,255,255,.15); overflow: hidden; }
.di-fill { width: 0; height: 100%; background: #2e9e47; border-radius: 6px; transition: width .15s linear; }
.di-msg { font-size: 14px; color: rgba(255,255,255,.7); min-height: 1.2em; text-align: center; padding: 0 24px; }

/* fullscreen button: small, translucent until touched. Right edge, vertically centred, inside the safe area: free on every screen
   (menu / create / find / room lobby content stays within +-810 canvas units of the centre; in a round the top row is ALIVE / timer / REAL+MENU,
   the bottom row is HP + joystick / vehicle prompt / GRAB+JUMP+ENTER; nothing sits on the middle of the right edge). */
#di-fs {
  position: fixed; z-index: 30; box-sizing: border-box;
  top: 50%; margin-top: -22px; right: calc(env(safe-area-inset-right, 0px) + 8px);
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
  background: rgba(77, 87, 107, .98); opacity: .32; transition: opacity .2s;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation; cursor: pointer; -webkit-appearance: none; appearance: none;
}
#di-fs[hidden], #di-tip[hidden] { display: none; }
#di-fs:hover, #di-fs:focus-visible, #di-fs.di-touched, #di-fs:active { opacity: .95; }
#di-fs:active { filter: brightness(.75); }
#di-fs img { width: 26px; height: 26px; }

/* iPhone tip */
#di-tip { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(3, 8, 18, .55); }
.di-tip-box {
  display: flex; align-items: center; gap: 14px; max-width: min(80vw, 520px); padding: 14px 18px; border-radius: 16px;
  background: rgba(10, 18, 36, .94); color: #fff; font-size: 16px; line-height: 1.3; font-weight: 700; text-shadow: 1.5px 0 0 #000, -1.5px 0 0 #000, 0 1.5px 0 #000, 0 -1.5px 0 #000, 1.1px 1.1px 0 #000, -1.1px 1.1px 0 #000, 1.1px -1.1px 0 #000, -1.1px -1.1px 0 #000;
  margin: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.di-tip-box img { width: 34px; height: 34px; flex: none; }
.di-tip-box b { color: #ffed40; }
#di-tip-ok { flex: none; min-width: 64px; min-height: 44px; border: 0; border-radius: 12px; background: #2e9e47; color: #fff; font-weight: 700; font-size: 16px; touch-action: manipulation; }

/* rotate hint: portrait on a phone only (tablets and desktops are not nagged) */
#di-rotate { display: none; position: fixed; inset: 0; z-index: 50; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #0a1220; color: #fff; font-size: 22px; font-weight: 700; text-align: center; text-shadow: 1.5px 0 0 #000, -1.5px 0 0 #000, 0 1.5px 0 #000, 0 -1.5px 0 #000, 1.1px 1.1px 0 #000, -1.1px 1.1px 0 #000, 1.1px -1.1px 0 #000, -1.1px -1.1px 0 #000; }
.di-rot-icon { font-size: 64px; line-height: 1; }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) { #di-rotate { display: flex; } }