:root {
  --charcoal: #22201F;
  --charcoal-leve: #2D2B29;
  --sable: #E6BA6F;
  --sable-profond: #D8A956;
  --papier: #F1EFEE;
  --doux: #BAB9B8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--charcoal); color: var(--papier); overflow: hidden; }
body { font: 500 15px/1.4 "Albert Sans", system-ui, sans-serif; }
#scene { position: fixed; inset: 0; }
#unity-canvas { width: 100%; height: 100%; display: block; background: var(--charcoal); outline: none; }

#loading {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 0 max(24px, 12vw); gap: 18px; background: var(--charcoal); transition: opacity 450ms ease;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading h1 { margin: 8px 0 0; font: 700 clamp(26px, 4vw, 44px)/1.15 "Plus Jakarta Sans", sans-serif; word-spacing: .06em; }
#loading .bar { width: min(520px, 100%); height: 4px; background: var(--charcoal-leve); }
#loading .fill { width: 0; height: 100%; background: var(--sable); transition: width 280ms ease; }
#loading p { margin: 0; color: var(--doux); }

#bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; gap: 16px;
  padding: 0 20px; background: rgba(34, 32, 31, .86);
}
#bar .back { color: var(--sable); text-decoration: none; border-bottom: 2px solid var(--sable); padding-bottom: 2px; font-weight: 600; }
#bar .back:hover { color: #EEC98B; border-color: #EEC98B; }
#bar .vr-help { margin-left: auto; color: var(--doux); font-size: 13px; }
#bar button {
  margin-left: auto; height: 40px; padding: 0 20px; border: 0; border-radius: 0; cursor: pointer;
  font: 700 15px "Plus Jakarta Sans", sans-serif; background: var(--sable); color: var(--charcoal);
}
#bar .vr-help:not([hidden]) + button { margin-left: 0; }
#bar button:hover:not(:disabled) { background: var(--sable-profond); }
#bar button:disabled { background: var(--charcoal-leve); color: var(--doux); cursor: default; }
@media (max-width: 640px) { #bar .vr-help { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }