/* Game page: one fixed screen, no scrolling, canvas centered inside the safe area. */
html.play-page, .play-page body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0f2340;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.play-page body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.play-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: calc(48px + var(--safe-t));
  padding: var(--safe-t) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
  background: var(--blue-dark);
}
.play-bar .brand { color: var(--white); font-size: 1.2rem; }
.play-bar .brand img { border-radius: 7px; }
.play-actions { display: flex; gap: 8px; }
.bar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .95rem 'Fredoka', sans-serif; color: var(--white); background: rgba(255, 255, 255, .14);
}
.bar-btn:hover { background: rgba(255, 255, 255, .24); }
.bar-btn svg { width: 18px; height: 18px; }
.share-btn { color: var(--ink); background: var(--yellow); }
.share-btn:hover { background: #ffd65c; }

.stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0 var(--safe-r) var(--safe-b) var(--safe-l);
}
#unity-canvas { display: block; background: #0f2340; touch-action: none; outline: none; }

.overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; text-align: center; color: var(--white);
  background: url('/images/hero-bg.jpg') center bottom / cover no-repeat, var(--blue);
}
.overlay::before { content: ''; position: absolute; inset: 0; background: rgba(15, 35, 64, .45); }
.overlay > * { position: relative; }
.overlay .logo { align-items: center; }
.overlay .logo-main { font-size: clamp(2.4rem, 8vh, 4.5rem); }
.overlay .logo-sub { font-size: clamp(1rem, 3.5vh, 1.8rem); }

.loading-char { width: clamp(90px, 26vh, 220px); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); animation: bob 1.2s ease-in-out infinite; }
.loading-status { margin: 0; font: 600 1.2rem 'Fredoka', sans-serif; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.progress { width: min(420px, 80vw); height: 22px; padding: 3px; border-radius: 999px; background: rgba(15, 35, 64, .7); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.progress-fill { width: 0; height: 100%; border-radius: 999px; background: linear-gradient(var(--yellow), #ffb300); transition: width .2s; }
.progress-text { margin: 0; font: 700 1.1rem 'Fredoka', sans-serif; }

.rotate-icon { font-size: 4rem; line-height: 1; animation: spin 2.2s ease-in-out infinite; }
.rotate h1 { margin: 0; font-size: 1.8rem; }
.rotate p { margin: 0; font-size: 1.15rem; }
.link-btn { margin-top: 12px; padding: 10px 16px; border: 0; background: none; color: var(--white); font: 600 1rem 'Fredoka', sans-serif; text-decoration: underline; cursor: pointer; }

.error p { max-width: 420px; margin: 4px 0 10px; font-size: 1.15rem; font-weight: 700; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

.toast {
  position: fixed; z-index: 40; top: calc(56px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px; background: var(--white); color: var(--ink);
  font: 600 1rem 'Fredoka', sans-serif; box-shadow: var(--shadow);
}

/* Update banner sits in the top bar so it never covers the game's own buttons. */
.play-page .update-banner {
  top: calc(5px + var(--safe-t)); bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
  gap: 10px; padding: 2px 3px 2px 14px; font-size: .9rem; background: #2c5594; box-shadow: none;
}
.play-page .update-banner .btn-small { min-height: 32px; padding: 0 12px; font-size: .9rem; box-shadow: none; }

@keyframes spin { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }

/* Short landscape phones: every pixel of height goes to the game. */
@media (max-height: 500px) {
  .play-bar { height: calc(36px + var(--safe-t)); }
  .play-bar .brand span { display: none; }
  .bar-btn { min-height: 30px; padding: 0 12px; }
  .bar-btn span { font-size: .85rem; }
  .toast { top: calc(44px + var(--safe-t)); }
}