/* cielo.css — La Constelación (forzaje de dibujo hacia la Osa Mayor) */

/* Barra de salida (igual que el resto de efectos) */
.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 (cielo A PANTALLA COMPLETA) ===================== */
.cl-screen { min-height:100svh; min-height:100vh; background:linear-gradient(180deg, #060819 0%, #0b1030 45%, #141a3e 80%, #1c2148 100%); color:#cfd4ee; overflow:hidden; }
.cl-screen .exit-btn { background:rgba(20,26,62,.85); color:#9aa4d0; border-color:#2c3468; }
.cl-inner { position:fixed; inset:0; }

/* El lienzo ocupa TODA la pantalla; los textos flotan encima. */
.cl-frame { position:fixed; inset:0; display:flex; }
.cl-canvas { width:100%; height:100%; flex:1; touch-action:none; cursor:crosshair; }

.cl-title { position:fixed; top:14px; left:0; right:0; z-index:5; pointer-events:none; font-family:Georgia, "Times New Roman", serif; font-size:16px; font-weight:700; letter-spacing:5px; margin:0; text-align:center; color:#cfc4f0; text-transform:uppercase; text-shadow:0 0 18px rgba(160,140,255,.4), 0 2px 6px rgba(0,0,0,.8); }
.cl-conn { position:fixed; top:40px; left:0; right:0; z-index:5; pointer-events:none; margin:0; min-height:18px; font-size:12px; text-align:center; color:#8d94c0; font-style:italic; text-shadow:0 1px 4px rgba(0,0,0,.8); }
.cl-conn.is-error { color:#d66; }

.cl-caption { position:fixed; bottom:16px; left:0; right:0; z-index:5; pointer-events:none; margin:0; font-family:Georgia, serif; font-size:12px; letter-spacing:2px; text-align:center; color:#7d84b0; font-style:italic; text-shadow:0 1px 4px rgba(0,0,0,.8); }

/* ===================== CONTROL (espejo) ===================== */
.clc-screen { min-height:100svh; min-height:100vh; background:#12151c; color:#e6e9f2; }
.clc-screen .exit-btn { background:rgba(30,34,44,.9); color:#9aa2b5; border-color:#333a4a; }
.clc-inner { max-width:520px; margin:0 auto; padding:54px 16px 30px; display:flex; flex-direction:column; gap:14px; align-items:center; }
.clc-head { text-align:center; display:flex; flex-direction:column; gap:4px; }
.clc-title { margin:0; font-size:17px; font-weight:800; letter-spacing:.5px; }
.clc-state { margin:0; font-size:12.5px; color:#5fbf8a; font-style:italic; min-height:18px; }

.clc-frame { width:100%; aspect-ratio:4/3; border-radius:14px; background:linear-gradient(180deg,#0b1030,#141a3e); border:1px solid #2c3468; overflow:hidden; display:flex; }
.clc-canvas { width:100%; height:100%; flex:1; }
.clc-note { margin:0; font-size:12px; color:#7b8296; line-height:1.5; text-align:center; }

.clc-reset { width:100%; max-width:400px; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.clc-reset:active { transform:translateY(1px); }