html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: #10151c;
}
body { margin: 0; color: #f0eee9; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
[hidden] { display: none !important; }
#GameDiv {
  position: fixed;
  left: env(safe-area-inset-left, 0px);
  top: env(safe-area-inset-top, 0px);
  width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
  height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  visibility: hidden;
  touch-action: none;
}
body[data-xpell-state="playing"] #GameDiv { visibility: visible; }
#iphone-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow: auto;
  background: #10151c;
}
.gate-card { max-width: 460px; margin: auto; }
.gate-brand { color: #d7b978; letter-spacing: .3em; font-weight: 700; font-size: 14px; }
.gate-card h1 { color: #f0eee9; font-size: clamp(24px, 5vw, 32px); margin: 14px 0; }
.gate-card p, .gate-card li { font-size: 16px; line-height: 1.55; }
#gate-message { color: #b7c1cd; }
#install-steps { text-align: left; padding-left: 22px; }
#install-steps li { margin: 10px 0; }
#gate-play { padding: 14px 28px; margin-top: 12px; border: 0; border-radius: 10px; background: #d7b978; color: #10151c; font: inherit; font-weight: 700; cursor: pointer; }
#gate-play:focus-visible { outline: 3px solid white; outline-offset: 4px; }
/* Keep a readable loading message visible while Cocos starts. */
#startup-status { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 1000; margin: 0; padding: 8px 14px; border-radius: 8px; background: #10151c; color: #fff; font: 14px sans-serif; text-align: center; max-width: 90vw; }
#startup-status[hidden] { display: none; }
#startup-downloads { position: fixed; z-index: 1001; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(680px, 90vw); box-sizing: border-box; border: 1px solid #38404c; border-radius: 12px; background: rgba(16, 21, 28, .96); color: #f0eee9; padding: 12px 16px; font: 12px -apple-system, BlinkMacSystemFont, sans-serif; text-align: left; }
#startup-downloads:not(.has-downloads) { display: none; }
#startup-downloads header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; }
#download-active-count { font-size: 12px; color: #b7c1cd; }
#startup-downloads ol { list-style: none; padding: 0; margin: 0; max-height: 48vh; overflow: auto; overscroll-behavior: contain; }
#startup-downloads li { padding: 8px 0; border-top: 1px solid #28313c; }
.download-file-heading { display: flex; gap: 12px; justify-content: space-between; margin-bottom: 5px; }
.download-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.download-file-value { flex: none; color: #d7b978; }
.download-meter { height: 5px; overflow: hidden; border-radius: 4px; background: #34404d; }
.download-fill { height: 100%; background: #d7b978; transition: width .2s linear; }
.download-meter.is-indeterminate .download-fill { width: 28%; animation: download-pulse 1.3s linear infinite; }
.download-meter.is-error .download-fill { background: #e68181; }
.download-file-detail, .download-note { display: block; color: #aeb9c7; font-size: 11px; margin-top: 5px; }
.download-note { margin-bottom: 0; }
@keyframes download-pulse { from { transform: translateX(-100%); } to { transform: translateX(360%); } }
@media (prefers-reduced-motion: reduce) { .download-meter.is-indeterminate .download-fill { animation: none; } }