:root { background: #020609; color: #dcecf4; font-family: Arial, sans-serif; }
html, body, #echo-web-shell { width: 100%; width: 100dvw; height: 100%; height: 100dvh; margin: 0; overflow: hidden; }
body { position: fixed; inset: 0; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#unity-container { position: fixed; inset: 0; min-width: 0; min-height: 0; overflow: hidden; }
#unity-canvas { position: absolute; inset: 0; display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; background: #020609; touch-action: none; outline: none; }
#echo-loading-context { position: absolute; z-index: 1; inset: 0; display: grid; align-content: center; justify-items: center; gap: clamp(10px, 1.4vh, 16px); padding: 28px; overflow: hidden; background: radial-gradient(ellipse at 50% 48%, rgba(24, 82, 94, .32), transparent 42%), linear-gradient(135deg, #07151d 0%, #020609 52%, #0c222b 100%); text-align: center; transition: opacity .35s ease, visibility .35s ease; }
#echo-loading-context::before, #echo-loading-context::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
#echo-loading-context::before { opacity: .45; background-image: linear-gradient(rgba(67, 223, 224, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 223, 224, .07) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at center, #000 10%, transparent 68%); }
#echo-loading-context::after { background: linear-gradient(90deg, transparent 0%, rgba(67, 223, 224, .13) 48%, transparent 52%); transform: translateX(-100%); animation: echo-loader-sweep 4s linear infinite; }
#echo-loading-context.is-hidden { opacity: 0; visibility: hidden; }
.echo-loading-context__scanline { position: absolute; top: 18%; width: min(82vw, 900px); height: 1px; background: linear-gradient(90deg, transparent, #43dfe0, transparent); box-shadow: 0 0 22px rgba(67, 223, 224, .8); }
.echo-loading-context__eyebrow, .echo-loading-context__hint, .echo-loading-context__controls { position: relative; z-index: 1; margin: 0; color: #a9c2ce; letter-spacing: .08em; }
.echo-loading-context__eyebrow { color: #43dfe0; font-size: clamp(10px, 1.3vw, 13px); font-weight: 700; }
.echo-loading-context__title { margin: 0; }
#echo-loading-title { position: relative; z-index: 1; margin: 0; color: #f1ffff; font-size: clamp(28px, 5vw, 58px); line-height: 1.07; letter-spacing: -.035em; text-shadow: 0 0 24px rgba(67, 223, 224, .24); }
.echo-loading-context__loop { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(8px, 1.2vw, 16px); width: min(92vw, 720px); margin: 4px 0; padding: 0; list-style: none; }
.echo-loading-context__loop li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; min-width: 0; padding: 10px 14px; border: 1px solid rgba(67, 223, 224, .35); background: rgba(3, 15, 22, .65); color: #dcecf4; font-size: clamp(11px, 1.45vw, 15px); }
.echo-loading-context__loop b { color: #f0b83f; font-size: .8em; letter-spacing: .04em; }
.echo-loading-context__loop strong, .echo-loading-context__controls strong { color: #68f5ef; }
.echo-loading-context__controls { font-size: clamp(10px, 1.3vw, 13px); line-height: 1.45; }
.echo-loading-context__hint { max-width: 590px; font-size: clamp(10px, 1.25vw, 12px); line-height: 1.5; }
#unity-loading-bar { position: absolute; z-index: 2; bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; display: grid; gap: 9px; width: min(78vw, 500px); min-width: 220px; padding: 12px 14px; transform: translateX(-50%); text-align: center; background: rgba(2, 9, 13, .88); border: 1px solid rgba(67, 223, 224, .72); box-shadow: 0 12px 36px rgba(0, 0, 0, .45), inset 0 0 22px rgba(67, 223, 224, .08); }
#unity-loading-label { color: #dcecf4; font-size: clamp(11px, 1.5vw, 14px); font-weight: 700; letter-spacing: .02em; }
#unity-progress-bar-empty { width: 100%; height: 7px; overflow: hidden; background: #22333e; }
#unity-progress-bar-full { width: 0; height: 100%; background: linear-gradient(90deg, #1b9ca5, #73ffef); box-shadow: 0 0 12px #43dfe0; transition: width .1s linear; }
#unity-warning { position: fixed; z-index: 5; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); display: grid; gap: 8px; pointer-events: none; }
#unity-warning > div { padding: 10px 12px; background: #6b4d14; color: #fff; }
#unity-warning > .is-error { background: #7e2330; }
#echo-viewport-overlay, #echo-variant-route, #echo-shell-failure { position: fixed; z-index: 10; inset: 0; display: none; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: rgba(2, 6, 9, .94); text-align: center; pointer-events: auto; }
#echo-viewport-overlay.is-visible { display: grid; }
#echo-variant-route { display: grid; }
#echo-shell-failure:not([hidden]) { display: grid; }
.echo-viewport-overlay__panel, .echo-shell-failure__panel { display: grid; gap: 10px; max-width: 360px; padding: 24px; border: 1px solid #43dfe0; background: #10222e; }
.echo-viewport-overlay__panel strong, .echo-shell-failure__panel strong { color: #43dfe0; font-size: 22px; }
.echo-viewport-overlay__panel span, .echo-shell-failure__panel span { line-height: 1.5; }
#echo-shell-retry { min-height: 44px; border: 1px solid #43dfe0; color: #020609; background: #43dfe0; font: inherit; font-weight: 700; cursor: pointer; }
#echo-shell-retry:focus-visible { outline: 3px solid #f0b83f; outline-offset: 3px; }
@keyframes echo-loader-sweep { to { transform: translateX(100%); } }
@media (max-height: 430px) {
  #echo-loading-context { gap: 7px; padding: 16px 24px 58px; }
  .echo-loading-context__scanline { top: 11%; }
  .echo-loading-context__loop li { padding: 7px 9px; }
  .echo-loading-context__hint { display: none; }
  #unity-loading-bar { bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  .echo-loading-context__loop { gap: 5px; }
  .echo-loading-context__loop li { grid-template-columns: 1fr; gap: 2px; padding: 7px 8px; }
  .echo-loading-context__loop b { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #echo-loading-context::after { animation: none; }
  #unity-progress-bar-full, #echo-loading-context { transition: none; }
}