html, body { margin: 0; height: 100%; overflow: hidden; background: #0e1116;
  font: 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #eef2f5; }
#escena { position: fixed; inset: 0; }
#escena canvas { display: block; }
#hud, #panel, #ayuda { position: fixed; background: rgba(14, 17, 22, .78); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 10px 12px; backdrop-filter: blur(4px); }
#hud { top: 12px; left: 12px; min-width: 230px; }
#hud .fila { display: flex; justify-content: space-between; gap: 14px; padding: 1px 0; }
#hud .fila span { color: #a9b4bf; }
#hud .titulo { display: block; margin-bottom: 4px; color: #ffb36b; }
#panel { top: 12px; right: 12px; width: 230px; }
.modos { display: flex; gap: 4px; margin-bottom: 10px; }
.modos button { flex: 1; padding: 6px 2px; border-radius: 5px; border: 1px solid #3a434d; background: #1c232b;
  color: #dfe6ec; cursor: pointer; font-size: 12px; }
.modos button.on { background: #ff8c1a; border-color: #ff8c1a; color: #1a1206; font-weight: 600; }
.ctl { display: block; margin-bottom: 8px; }
.ctl b { float: right; }
.ctl input { width: 100%; }
.chk { display: block; margin: 3px 0; cursor: pointer; }
.volver { display: block; margin-top: 8px; color: #8fd0ff; text-decoration: none; }
#ayuda { bottom: 34px; left: 12px; }
#ayuda div { margin-top: 3px; }
#ayuda.oculto { display: none; }
kbd { display: inline-block; min-width: 14px; padding: 0 4px; margin: 0 1px; border: 1px solid #56606b;
  border-bottom-width: 2px; border-radius: 3px; background: #232b33; font: 11px/16px ui-monospace, monospace;
  text-align: center; }
#bloqueo { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25); cursor: pointer; }
#bloqueo div { background: rgba(14,17,22,.85); padding: 16px 22px; border-radius: 8px; font-size: 16px; text-align: center; }
#bloqueo small { display: block; margin-top: 4px; color: #a9b4bf; font-size: 12px; }
#bloqueo.oculto, #cargando.oculto { display: none; }
#cargando { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: #0e1116; }
#cargando.error { color: #ff8a8a; white-space: pre-wrap; padding: 20px; }
#mira { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(0,0,0,.5); display: none; }
body.primera #mira { display: block; }
#creditos { position: fixed; right: 0; bottom: 0; padding: 3px 8px; font-size: 11px; color: #d6dde3;
  background: rgba(14,17,22,.7); border-top-left-radius: 6px; }
@media (max-width: 700px) { #ayuda { display: none; } #hud { min-width: 0; font-size: 12px; } #panel { width: 180px; } }

/* brújula en cinta: gira con el rumbo de la cámara */
#brujula { position: fixed; top: 12px; left: 50%; width: 420px; height: 46px; margin-left: -210px;
  overflow: hidden; background: rgba(14, 17, 22, .78); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; pointer-events: none; }
#brujula-cinta { position: absolute; top: 0; left: 50%; height: 30px; will-change: transform; }
#brujula-cinta span { position: absolute; top: 0; transform: translateX(-50%); text-align: center;
  font: 10px/1 system-ui, sans-serif; color: #8d98a3; }
#brujula-cinta span::before { content: ''; display: block; width: 1px; height: 6px; margin: 0 auto 3px;
  background: #6c7680; }
#brujula-cinta span.m { font: 600 14px/1 system-ui, sans-serif; color: #eef2f5; }
#brujula-cinta span.m::before { height: 9px; background: #eef2f5; }
#brujula-cinta span.n { color: #ff6b4a; }
#brujula-cinta span.n::before { background: #ff6b4a; }
#brujula-marca { position: absolute; top: 0; left: 50%; margin-left: -6px; width: 0; height: 0;
  border: 6px solid transparent; border-top: 8px solid #ff8c1a; }
#brujula-val { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center;
  font: 600 12px/1 system-ui, sans-serif; color: #ffb36b; }
@media (max-width: 700px) { #brujula { top: auto; bottom: 30px; width: 260px; margin-left: -130px; } }