:root{
  --deep:#06144a; --blue:#1d4fd0; --glow:#6fa8ff; --paper:#f3f6ff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overscroll-behavior:none}
body{
  background:var(--deep);color:var(--paper);
  font:500 14px/1.15 "Barlow Condensed",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#track{width:1px}

#view{
  position:fixed;inset:0;overflow:hidden;
  background:
    radial-gradient(90% 38% at 50% 42%, rgba(111,168,255,.55), rgba(111,168,255,0) 70%),
    linear-gradient(to bottom, #0a1c66 0%, #1e53d6 42%, #0b2273 43%, #061448 100%);
}
/* el camino, nada más */
#road{position:absolute;left:0;top:42%;width:100%;height:58%}
#ahead{position:absolute;inset:0;z-index:1}
.it{
  position:absolute;left:0;top:0;width:260px;
  transform-origin:50% 100%;will-change:transform,opacity;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.it img{width:210px;height:210px;object-fit:cover;display:block;box-shadow:0 18px 40px rgba(0,8,40,.55)}
.it b{font:700 italic 44px/.92 "Barlow Condensed",sans-serif;text-align:center;letter-spacing:-.01em;text-shadow:0 3px 18px rgba(0,10,60,.6);overflow-wrap:anywhere}
.it span{font-size:18px;opacity:.8}
.it.near b{color:#fff}

#top{
  position:absolute;left:16px;top:calc(14px + env(safe-area-inset-top));
  font:700 italic 22px/1 "Barlow Condensed",sans-serif;letter-spacing:.02em;z-index:4;
}

/* el espejo lateral de la portada de EL RETROVISOR. */
#mirror{
  position:absolute;right:12px;top:calc(46px + env(safe-area-inset-top));z-index:5;
  width:min(62vw,380px);aspect-ratio:1.55;
  padding:9px 10px 11px 9px;
  background:linear-gradient(160deg,#2a2d35,#07080b 60%);
  border-radius:38% 26% 30% 44% / 44% 34% 40% 50%;
  box-shadow:0 14px 34px rgba(0,5,30,.6), inset 0 2px 1px rgba(255,255,255,.15);
}
.glass{
  position:relative;display:block;width:100%;height:100%;overflow:hidden;
  border-radius:inherit;
  background:linear-gradient(170deg,#9fc2ff 0%,#3a74e8 55%,#1b44b8 100%);
  box-shadow:inset 0 0 18px rgba(0,0,40,.45);
}
#mirror .glass{border-radius:36% 24% 28% 42% / 42% 32% 38% 48%}
#behind{position:absolute;inset:0;transform:scaleX(-1)}
.mi{position:absolute;left:0;top:0;width:260px;transform-origin:50% 100%;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.mi img{width:210px;height:210px;object-fit:cover}
.mi b{font:700 italic 44px/.92 "Barlow Condensed",sans-serif;text-align:center;color:#fff;overflow-wrap:anywhere}
.stk{position:absolute;width:13%;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.stk.star{left:10%;top:52%;transform:rotate(-12deg)}
.stk.smile{right:20%;top:9%;transform:rotate(14deg)}
.stk.heart{right:14%;bottom:12%;transform:rotate(8deg)}
#warn{
  position:absolute;right:14px;top:calc(52px + min(62vw,380px)/1.55 + env(safe-area-inset-top));z-index:5;
  width:min(62vw,380px);text-align:right;font-size:11px;opacity:.6;letter-spacing:.02em
}

#hud{
  position:absolute;left:16px;right:16px;bottom:calc(34px + env(safe-area-inset-bottom));z-index:4;
  display:flex;flex-direction:column;gap:2px;pointer-events:none;
}
#when{font-size:13px;letter-spacing:.08em;opacity:.8;font-variant-numeric:tabular-nums}
#what{font:700 italic 26px/1 "Barlow Condensed",sans-serif}
#who{font-size:14px;opacity:.75}
.disc{position:absolute;left:16px;bottom:calc(10px + env(safe-area-inset-bottom));font-size:11px;letter-spacing:.08em;opacity:.55;z-index:4}
#snd{position:absolute;right:8px;bottom:calc(2px + env(safe-area-inset-bottom));z-index:4;padding:8px;font-size:13px;opacity:.8}

/* mirar atrás */
#look{
  position:fixed;inset:0;z-index:20;padding:calc(18px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
  background:rgba(4,10,40,.86);display:flex;flex-direction:column;gap:12px;
}
.glass.big{flex:1;border-radius:34px;border:10px solid #0b0c10;box-shadow:0 20px 50px rgba(0,0,0,.5)}
#past{list-style:none;position:absolute;inset:0;overflow-y:auto;padding:22px 18px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain}
#past li button{
  display:block;width:100%;text-align:right;padding:6px 0;
  font:700 italic 30px/1 "Barlow Condensed",sans-serif;
  transform:scaleX(-1);transition:transform .45s cubic-bezier(.3,1.4,.5,1);
}
#past li small{display:block;font:500 13px/1.3 "Barlow Condensed",sans-serif;opacity:.8;margin-top:2px}
#past li button.read{transform:none;text-align:left}
#past .empty{font-size:18px;opacity:.8;transform:scaleX(-1);text-align:right}
#lookClose{align-self:center;padding:12px 26px;border-radius:999px;background:var(--paper);color:#06144a;font-weight:700;font-size:17px}

#gate{
  position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(80% 50% at 50% 45%, #2a62e6, #06144a 80%);text-align:center;padding:24px;
}
#gate p{font:700 italic clamp(48px,16vw,120px)/.9 "Barlow Condensed",sans-serif}
#go{padding:14px 34px;border-radius:999px;background:var(--paper);color:#06144a;font-weight:700;font-size:20px;margin-top:8px}
#goQuiet{font-size:15px;opacity:.75;padding:8px}
#gate small{font-size:14px;opacity:.7;max-width:260px}

@media (min-width:760px){
  #mirror{right:28px}
  #warn{right:30px}
  #hud{left:28px}
  .disc{left:28px}
}
/* salidas: el final del camino son los enlaces reales */
#top{display:flex;align-items:baseline;gap:12px}
#toExits{font:500 14px/1 "Barlow Condensed",sans-serif;letter-spacing:.04em;opacity:.8;padding:6px 4px}
#exits{
  position:absolute;left:0;top:0;width:260px;display:none;
  transform-origin:50% 100%;will-change:transform,opacity;
  padding:14px 12px 12px;border:3px solid var(--paper);border-radius:10px;
  background:rgba(8,26,98,.88);box-shadow:0 18px 40px rgba(0,8,40,.55);
}
#exits p{font:700 italic 34px/1 "Barlow Condensed",sans-serif;letter-spacing:.04em;margin:0 0 8px}
#exitList{list-style:none;display:flex;flex-direction:column;gap:5px}
#exitList a,#exitList span{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:8px 10px;border-top:1px solid rgba(243,246,255,.3);
  font:700 italic 22px/1 "Barlow Condensed",sans-serif;color:var(--paper);text-decoration:none;
}
#exitList a i{font-style:normal}
#exitList span{opacity:.45}
#exitList small{font:500 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.1em}
[hidden]{display:none!important}