/* Variables, layout general, visor 3D y capas superpuestas (FPS, loader, confeti) */
:root{
  --bg:#14161a; --panel:#1c1f26; --panel2:#22262f; --border:#2e333d;
  --text:#e7e9ee; --dim:#8a90a0; --accent:#5b9dff; --err:#ff6b6b;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
body{overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;}
#app{display:flex;height:100%;}
#viewport{flex:1;position:relative;min-width:0;}
#viewport canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;}
/* Logo de la esquina: es el botón para volver al inicio (ver #homeLink en lobby.html). object-fit:contain y sin bordes redondeados para que no se recorte */
#homeLink{-webkit-tap-highlight-color:transparent;cursor:pointer;outline:0;}
#watermark{position:absolute;top:12px;left:12px;width:84px;height:84px;object-fit:contain;opacity:.9;pointer-events:auto;cursor:pointer;z-index:6;
  -webkit-user-drag:none;transition:transform .18s ease,filter .18s ease,opacity .18s ease;}
#homeLink:hover #watermark,#homeLink:focus-visible #watermark{opacity:1;transform:scale(1.1);filter:brightness(1.1) drop-shadow(0 0 10px var(--accent));}
#homeLink:focus-visible #watermark{outline:3px solid var(--accent);outline-offset:4px;}
#homeLink:active #watermark{transform:scale(.95);}
#homeLink.intro #watermark{animation:homePulse 1.5s ease-in-out 3;}
@keyframes homePulse{0%,100%{filter:drop-shadow(0 0 0 transparent);}50%{filter:drop-shadow(0 0 12px var(--accent));}}
/* Cartelito "Volver al inicio": toma el color del tema (--accent: azul normal, naranja en Halloween) */
#homeTip{position:fixed;z-index:7;left:0;top:0;padding:8px 14px;border-radius:999px;pointer-events:none;white-space:nowrap;
  font:600 13px/1 -apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--accent);background:rgba(10,8,18,.9);
  border:1px solid var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.45),0 0 14px color-mix(in srgb,var(--accent) 40%,transparent);
  opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease;}
#homeTip.show{opacity:1;transform:none;}
@media (max-width:760px){#watermark{width:68px;height:68px;}}
@media (prefers-reduced-motion:reduce){#watermark,#homeTip{transition:none;}#homeLink.intro #watermark{animation:none;}}
#dropHint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:8px;pointer-events:none;text-align:center;color:var(--dim);padding:24px;}
#dropHint b{color:var(--text);font-size:18px;}
#fps{position:absolute;top:12px;right:12px;padding:3px 8px;border-radius:6px;background:rgba(20,22,26,.7);border:1px solid var(--border);color:var(--text);font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none;z-index:1;}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;}
#loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(20,22,26,.55);}
#loader[hidden]{display:none;}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:sp .8s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}