:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #10242c; color: #eef6f6; }
body { display: grid; grid-template-rows: auto 1fr; padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); }
#preview-header { z-index: 2; min-height: 54px; padding: 7px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; background: #10242c; border-bottom: 1px solid #29444c; }
.title { font-weight: 800; letter-spacing: .08em; font-size: 14px; }
.title span { margin-left: 8px; color: #67c6d2; font-size: 10px; }
#build-identity { grid-column: 1; min-width: 0; color: #b2c5ca; font: 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
#render-metrics { display: block; color: #82a5ad; }
.notice { grid-column: 2; grid-row: 1 / span 2; color: #bdd5d9; font-size: 11px; text-align: right; }
#unity-container { position: relative; width: 100%; height: 100%; display: grid; place-items: center; min-height: 0; }
#unity-canvas { display: block; width: 100%; height: 100%; max-width: calc((100svh - 54px) * 16 / 9); max-height: calc(100vw * 9 / 16); object-fit: contain; background: #182b31; outline: none; }
#unity-loading { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 24px; background: #10242c; color: #eef6f6; text-align: center; }
#unity-loading.ready { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
#unity-loading.failed { inset: auto 5vw 5vh; max-height: 45vh; border: 1px solid #d06a64; border-radius: 12px; background: #2b2022; }
.spinner { width: 34px; height: 34px; border: 3px solid #45636a; border-top-color: #67c6d2; border-radius: 50%; animation: spin .9s linear infinite; }
.failed .spinner { display: none; }
.progress-track { width: min(260px, 75vw); height: 5px; overflow: hidden; border-radius: 5px; background: #29444c; }
#progress-fill { width: 0; height: 100%; background: #67c6d2; transition: width .15s linear; }
#loading-error { max-width: 620px; color: #ffd5d2; font-size: 13px; line-height: 1.4; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-height: 430px) {
  #preview-header { min-height: 42px; padding: 4px 10px; }
  .title { font-size: 12px; }
  .title span, .notice { font-size: 9px; }
  #build-identity { font-size: 9px; }
  #unity-canvas { max-width: calc((100svh - 42px) * 16 / 9); }
}