html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #121030; }
body { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #fff; }
#unity-container { position: fixed; inset: 0; }
#unity-canvas { width: 100%; height: 100%; display: block; background: #121030; outline: none; touch-action: none; }

/* Экран загрузки */
#loader {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #2a2670 0%, #121030 70%);
  transition: opacity .7s ease; z-index: 10; padding: 16px; box-sizing: border-box;
}
#loader.fade { opacity: 0; pointer-events: none; }
.loader-card { width: min(880px, 100%); text-align: center; }
.loader-banner { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.45); display: block; }
.loader-bar { height: 8px; margin: 28px auto 0; width: min(420px, 80%); background: rgba(255,255,255,.14); border-radius: 99px; overflow: hidden; }
#loader-fill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #6e6bf5, #ffab4f); transition: width .25s ease; }
#loader-text { margin-top: 14px; font-size: 15px; letter-spacing: .04em; color: rgba(255,255,255,.75); }

/* Кнопки */
#controls { position: fixed; right: 20px; bottom: 20px; display: flex; gap: 12px; align-items: center; z-index: 5; }
.btn { border: 0; cursor: pointer; color: #fff; background: #6e6bf5; box-shadow: 0 6px 20px rgba(40,30,140,.45);
       transition: transform .15s ease, background .15s ease; font: inherit; }
.btn:hover { background: #8c89ff; transform: translateY(-1px); }
.btn svg { width: 24px; height: 24px; display: block; }
.btn-vr { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 99px; font-size: 16px; font-weight: 600; }
.btn-round { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
             background: rgba(18,16,48,.65); backdrop-filter: blur(6px); box-shadow: none; }
.btn-round:hover { background: rgba(110,107,245,.9); }

/* Подсказка */
#hint {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(560px, calc(100% - 180px));
  padding: 12px 20px; border-radius: 14px; background: rgba(18,16,48,.72); backdrop-filter: blur(6px);
  font-size: 15px; line-height: 1.4; text-align: center; z-index: 4; transition: opacity .6s ease;
}
#hint.fade { opacity: 0; }

#error { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 520px; padding: 20px 24px;
         background: #2a2670; border-radius: 14px; z-index: 20; text-align: center; line-height: 1.45; }

.hidden { display: none !important; }

@media (max-width: 600px) {
  #controls { right: 12px; bottom: 12px; }
  .btn-vr span { display: none; }
  .btn-vr { padding: 12px; }
  #hint { bottom: 76px; max-width: calc(100% - 32px); font-size: 14px; }
}