/* universo.css — Universo Paralelo
   "Voy a consultar otra realidad." Miles de líneas + errores + carga
   + glitch, y luego una FOTOGRAFÍA recuperada de otra realidad donde
   la elección del espectador YA está escrita. Tú envías la elección y
   la superficie desde el control. Tema ciencia ficción / terminal. */

.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO ===================== */
.uni-screen { min-height:100svh; min-height:100vh; background:radial-gradient(120% 80% at 50% -10%, #0a1024 0%, #060814 55%, #02030a 100%); color:#bfe9ff; overflow:hidden; }
.uni-screen .exit-btn { background:rgba(12,20,40,.9); color:#7fd0ff; border-color:#1d3a6a; }
.uni-inner { position:relative; width:100%; max-width:560px; margin:0 auto; min-height:100svh; min-height:100vh; padding:20px 14px 40px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.uni-title { font-size:16px; font-weight:800; letter-spacing:5px; margin:0; color:#63e6ff; text-transform:uppercase; text-shadow:0 0 18px rgba(99,230,255,.5); }
.uni-conn { margin:0; min-height:16px; font-size:12px; color:#5f86b0; font-style:italic; }
.uni-conn.is-error { color:#f77; }

/* Intro */
.uni-intro { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.uni-lead { font-size:18px; color:#cfeaff; line-height:1.5; max-width:340px; }
.uni-startbtn { font-size:15px; font-weight:800; letter-spacing:2px; padding:15px 34px; border-radius:14px; border:1.5px solid #63e6ff; background:rgba(99,230,255,.1); color:#a9f0ff; cursor:pointer; }
.uni-startbtn:active { transform:translateY(1px); }
.uni-hint { font-size:12.5px; color:#5f86b0; max-width:300px; line-height:1.5; }

/* Escenario de consulta */
.uni-stage { position:relative; width:100%; flex:1; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.uni-matrix { position:absolute; inset:0; width:100%; height:100%; opacity:.9; pointer-events:none; }
.uni-bigline { position:relative; z-index:2; margin:6px 0 0; font-size:17px; color:#8ff0d0; letter-spacing:1px; min-height:22px; text-shadow:0 0 14px rgba(99,230,255,.4); }
.uni-stats { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.uni-chip { font-family:"Courier New", monospace; font-size:10.5px; letter-spacing:.5px; color:#8ff0d0; background:rgba(8,18,34,.72); border:1px solid #12325a; border-radius:20px; padding:3px 9px; }
.uni-chip b { color:#63e6ff; font-weight:700; }
.uni-term { position:relative; z-index:2; width:100%; height:min(28vh, 200px); overflow:hidden; text-align:left; font-family:"Courier New", ui-monospace, monospace; font-size:11.5px; line-height:1.5; color:#4fd08a; background:rgba(3,8,18,.52); border:1px solid #12325a; border-radius:10px; padding:10px 12px; box-shadow:inset 0 0 30px rgba(0,0,0,.5); }
.uni-term .l { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9; }
.uni-term .l.err { color:#ff5d5d; }
.uni-term .l.warn { color:#ffcf5a; }
.uni-term .l.ok { color:#63e6ff; }

.uni-progresswrap { position:relative; z-index:2; width:100%; height:8px; border-radius:5px; background:#0d1b34; overflow:hidden; border:1px solid #12325a; }
.uni-progress { height:100%; width:0; background:linear-gradient(90deg,#1f7fd0,#63e6ff); box-shadow:0 0 12px rgba(99,230,255,.6); transition:width .5s linear; }
.uni-phaseline { position:relative; z-index:2; margin:0; font-size:12px; color:#7fb0d8; font-variant-numeric:tabular-nums; min-height:16px; }

/* Glitch */
.uni-glitch { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; background:
   repeating-linear-gradient(0deg, rgba(99,230,255,.06) 0 2px, transparent 2px 4px); mix-blend-mode:screen; }
.uni-glitch.go { animation:uniGlitch .5s steps(2) 1; }
@keyframes uniGlitch { 0%{opacity:.9; transform:translateX(-6px);} 30%{transform:translateX(6px);} 60%{transform:translateX(-3px);} 100%{opacity:0; transform:none;} }

/* ===================== REVELACIÓN: la fotografía ===================== */
.uni-reveal { position:relative; z-index:3; width:100%; display:flex; flex-direction:column; align-items:center; gap:12px; padding-bottom:20px; }
.uni-reveal-pre { margin:8px 0 0; font-size:11px; letter-spacing:3px; color:#63e6ff; font-weight:700; }
.uni-photo { position:relative; width:min(360px, 88vw); aspect-ratio:4/3; border-radius:6px; overflow:hidden; transform:rotate(-1.4deg); box-shadow:0 24px 60px rgba(0,0,0,.7), 0 0 0 8px #0e0e12, 0 0 0 9px #2a2a30; opacity:0; }
.uni-photo.in { animation:uniPhotoIn 1.1s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes uniPhotoIn { 0%{opacity:0; transform:rotate(-1.4deg) scale(.9); filter:blur(8px) contrast(2);} 55%{opacity:1; filter:blur(0) contrast(1);} 100%{opacity:1; transform:rotate(-1.4deg) scale(1);} }

.uni-surface { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:22px; text-align:center; }
.uni-word { font-family:"Caveat", "Segoe Script", "Bradley Hand", cursive; font-size:clamp(34px, 12vw, 72px); font-weight:700; line-height:1.05; word-break:break-word; }

/* Superficies */
.uni-surface.paper { background:
   repeating-linear-gradient(0deg, transparent 0 27px, rgba(80,110,190,.18) 27px 28px),
   linear-gradient(180deg,#f6efdd,#e9dfc4); }
.uni-surface.paper .uni-word { color:#1b2f7a; transform:rotate(-1deg); text-shadow:0 1px 0 rgba(0,0,0,.06); }

.uni-surface.chalk { background:radial-gradient(120% 120% at 30% 20%, #2c3d34, #1c2823); }
.uni-surface.chalk .uni-word { color:#f4f6f0; text-shadow:0 0 8px rgba(255,255,255,.25); letter-spacing:1px; }

.uni-surface.sticky { background:linear-gradient(135deg,#ffe873,#ffd93b); }
.uni-surface.sticky .uni-word { color:#3a2f00; transform:rotate(1deg); }

.uni-surface.polaroid { background:#0c0c10; }
.uni-surface.polaroid .uni-word { color:#e8f6ff; font-family:"Courier New", monospace; font-weight:700; font-size:clamp(26px,9vw,52px); letter-spacing:2px; text-shadow:0 0 16px rgba(120,200,255,.5); }

.uni-surface.neon { background:radial-gradient(120% 120% at 50% 40%, #170a2e, #08040f); }
.uni-surface.neon .uni-word { color:#ff5ce1; font-weight:700; text-shadow:0 0 6px #ff5ce1, 0 0 16px #ff5ce1, 0 0 34px rgba(255,92,225,.7); }

/* Overlays fotográficos */
.uni-grain { position:absolute; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:overlay;
   background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.uni-vignette { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 70px rgba(0,0,0,.6); }
.uni-glare { position:absolute; top:-30%; left:-20%; width:60%; height:160%; pointer-events:none; transform:rotate(18deg); background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0)); }
.uni-meta { position:absolute; left:8px; bottom:7px; z-index:2; font-family:"Courier New", monospace; font-size:9.5px; letter-spacing:1px; color:rgba(190,235,255,.92); background:rgba(0,0,0,.4); padding:2px 6px; border-radius:4px; }
.uni-meta.dark { color:rgba(30,30,40,.85); background:rgba(255,255,255,.5); }

.uni-caption { margin:0; font-size:14px; color:#cfeaff; min-height:18px; }
.uni-reveal-tag { margin:2px 0 0; font-size:11px; letter-spacing:2px; color:#5f86b0; }

/* ===================== CONTROL ===================== */
.uc-send { width:100%; padding:14px; border-radius:13px; border:none; cursor:pointer; color:#04121f; font-weight:800; font-size:15px; letter-spacing:1px; background:linear-gradient(135deg,#63e6ff,#2c8fd0); }
.uc-send:active { transform:translateY(1px); }
.uc-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }
.uc-reset { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.uc-reset:active { transform:translateY(1px); }
.uc-surfaces { width:100%; display:flex; flex-wrap:wrap; gap:7px; }
.uc-surf { flex:1 1 28%; padding:9px 4px; border-radius:10px; border:1px solid var(--line); background:#eef4ff; color:#2c5a86; font-weight:700; font-size:13px; cursor:pointer; }
.uc-surf.active { background:#63e6ff; color:#04121f; border-color:#2c8fd0; }
.uc-surf:active { transform:translateY(1px); }