:root { --bg:#070a12; --fg:#dfe8ff; --dim:#8ea0c2; --acc:#54d6ff; --card:#0d1322; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
canvas { display:block; }
.hub { max-width:880px; margin:0 auto; padding:32px 20px 60px; }
.hub h1 { font-size:26px; letter-spacing:.08em; }
.hub h1 span { color:var(--acc); }
.req { color:var(--dim); font-size:13px; }
.cards { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:20px; }
.cards a { background:var(--card); border:1px solid #1c2942; border-radius:14px;
  padding:16px; text-decoration:none; color:var(--fg); display:flex; flex-direction:column; gap:8px; }
.cards a:hover { border-color:var(--acc); }
.cards b { letter-spacing:.06em; color:var(--acc); }
.cards i { color:var(--dim); font-style:normal; font-size:12px; }
/* In-experience HUD: не перехватывает канвас, кроме кнопок */
#hud { position:fixed; top:10px; left:10px; z-index:10; max-width:min(340px,80vw);
  background:rgba(7,10,18,.78); border:1px solid #1c2942; border-radius:12px;
  padding:10px 12px; font-size:13px; pointer-events:none; backdrop-filter:blur(6px); }
#hud h2 { margin:0 0 4px; font-size:14px; letter-spacing:.08em; color:var(--acc); }
#hud .row { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; pointer-events:auto; }
#hud button, #hud input[type=range] { pointer-events:auto; }
#hud button { background:#16223a; color:var(--fg); border:1px solid #2a3c60;
  border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer; }
#hud button.on { border-color:var(--acc); color:var(--acc); }
#hud .stat { color:var(--dim); font-size:12px; white-space:pre-line; }
#hud a { color:var(--acc); }
#hud input[type=text], #hud input[type=number] { width:76px; background:#0a1020;
  border:1px solid #2a3c60; color:var(--fg); border-radius:6px; padding:4px 6px; }

/* Оверлей входа XR Blocks. Без этих правил wrapper падает голой системной
   кнопкой после канваса — на телефоне его приходится искать скроллом. */
#XRButtonWrapper {
  position:fixed; left:0; right:0; bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:30; display:grid; justify-items:center; gap:8px; padding:0 16px;
  pointer-events:none;
}
#XRButtonWrapper h1 { margin:0; font:600 15px/1.2 system-ui,sans-serif;
  letter-spacing:.1em; color:var(--acc); text-align:center; }
#XRButtonWrapper h4 { margin:0; max-width:460px; text-align:center;
  font:400 12px/1.45 system-ui,sans-serif; color:var(--dim); }
#XRButtonWrapper .XRButton {
  pointer-events:auto; width:100%; max-width:430px; min-height:56px;
  border:1px solid var(--acc); border-radius:16px;
  background:rgba(13,27,46,.94); color:#eaf9ff;
  font:600 16px/1 system-ui,sans-serif; letter-spacing:.05em; cursor:pointer;
}
#XRButtonWrapper .XRButton:active { background:var(--acc); color:#04121c; }
#XRButtonWrapper .XRButton:disabled { border-color:#7a4653; color:#e0a0a8; }
/* На телефоне симулятор бесполезен: это десктоп-режим под клавиатуру. */
@media (pointer:coarse) {
  #XRButtonWrapper .XRButton ~ .XRButton { display:none; }
}
/* В сессии кнопка становится компактной END-пилюлей у верхнего края. */
#XRButtonWrapper.in-session {
  top:calc(10px + env(safe-area-inset-top)); bottom:auto; padding:0 12px;
  justify-items:end;
}
#XRButtonWrapper.in-session h1, #XRButtonWrapper.in-session h4 { display:none; }
#XRButtonWrapper.in-session .XRButton {
  width:auto; min-height:0; padding:9px 16px; font-size:12px; border-radius:999px;
  background:rgba(7,10,18,.72);
}