/* Full-viewport portrait game page. The canvas sits inside the safe area (notch, home indicator) because the Unity
   web player reports the whole canvas as Screen.safeArea; the insets show the page background instead. */
:root { --bg: #14121c; --fg: #f1ecff; --accent: #ffcf4a; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none;
  background: var(--bg); color: var(--fg);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

#game {
  position: fixed; inset: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
  touch-action: none;
}
#unity-canvas { display: block; width: 100%; height: 100%; background: var(--bg); touch-action: none; outline: none; }

#boot-loading {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--bg); z-index: 10;
}
#boot-title { font-size: 26px; font-weight: 800; letter-spacing: .02em; }
#boot-bar { width: min(60vw, 260px); height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#boot-bar-fill { width: 0; height: 100%; border-radius: 5px; background: var(--accent); transition: width .2s ease-out; }
#boot-status { min-height: 1.4em; font-size: 14px; opacity: .7; }

#auth {
  position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  background: var(--bg); -webkit-user-select: text; user-select: text;
}
#auth-mount { margin: auto; max-width: 100%; }
/* iOS Safari zooms into inputs under 16px on focus. */
#auth input, #auth select, #auth textarea { font-size: 16px !important; }

#boot-error {
  position: fixed; left: 16px; right: 16px; top: calc(env(safe-area-inset-top) + 16px); z-index: 30; display: none;
  padding: 12px 14px; border-radius: 10px; background: #a3263a; color: #fff; font-size: 15px;
}

/* Tiny, faint, hold-to-activate: never steals a tap from the game. */
#signout {
  position: fixed; z-index: 15; display: none;
  left: calc(env(safe-area-inset-left) + 4px); bottom: calc(env(safe-area-inset-bottom) + 4px);
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); touch-action: none;
}
#signout.holding { background: rgba(255, 207, 74, .9); transition: background .8s linear; }

#rotate {
  position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  padding: 24px; text-align: center; background: var(--bg); font-size: 18px;
}
@media (orientation: landscape) and (max-height: 500px) {
  #rotate { display: flex; }
}