/* Fill the whole screen, notch and home-indicator areas included (viewport-fit=cover); the game keeps its
   buttons out of those areas itself (app.js sends the insets to Unity). 100vh is shorter than the screen
   in an iPhone home-screen web app, so everything is pinned with position: fixed + inset instead. */
html, body {
  margin: 0; padding: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden; background: #4FA8F0;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: none;
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
}
#unity-canvas { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; background: #4FA8F0; outline: none; }
#safe-probe {
  position: fixed; visibility: hidden; pointer-events: none; top: 0; left: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#loading {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: linear-gradient(#4FA8F0, #C4ECFF); color: #fff; z-index: 2;
}
#loading img { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 6px 18px rgba(38,36,66,.3); }
#loading .title { font-size: 26px; font-weight: 800; text-shadow: 0 2px 0 #262442; }
#loading .bar { width: min(60vw, 360px); height: 14px; border-radius: 7px; background: rgba(38,36,66,.35); overflow: hidden; }
#bar-fill { width: 0; height: 100%; background: #FFC83D; border-radius: 7px; transition: width .2s; }
#loading-text { font-size: 14px; color: #262442; }

#rotate {
  position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: #262442; color: #fff; font-size: 18px; z-index: 5;
}
#rotate .phone { width: 46px; height: 80px; border: 4px solid #fff; border-radius: 10px; animation: turn 1.6s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
#rotate .tip { font-size: 13px; line-height: 1.6; text-align: center; color: #C4ECFF; padding: 0 24px; }
@media (orientation: portrait) { #rotate { display: flex; } }

#wechat-hint {
  position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%);
  display: none; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; max-width: 92vw;
  background: rgba(38,36,66,.88); color: #fff; font-size: 13px; line-height: 1.5; z-index: 6;
}
#wechat-hint button { flex: none; border: 0; border-radius: 8px; padding: 4px 10px; background: #FFC83D; color: #262442; font-weight: 700; }
#install-hint {
  position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: none; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px;
  background: rgba(38,36,66,.85); color: #fff; font-size: 13px; z-index: 4; white-space: nowrap;
}
#install-hint button { border: 0; border-radius: 8px; padding: 4px 10px; background: #FFC83D; color: #262442; font-weight: 700; }