/* cubo.css — El Cubo Imposible (Rubik 3D con espejo en vivo) */

/* 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 (cubo 3D) ===================== */
.cb-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 14%, #23283a 0%, #14172a 52%, #0a0c18 100%); color:#cfd4e8; overflow:hidden; }
.cb-screen .exit-btn { background:rgba(28,32,50,.85); color:#9aa4c5; border-color:#333c5c; }
.cb-inner { position:relative; width:100%; max-width:520px; min-height:100svh; min-height:100vh; padding:24px 16px 40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; text-align:center; }
.cb-conn { margin:0; min-height:18px; font-size:12.5px; font-style:italic; color:#7d86a8; }
.cb-conn.is-error { color:#d66; }

/* Escena 3D (cámara FIJA: la proyección del JS depende de estos valores) */
.cb-scene { position:relative; width:300px; height:300px; perspective:1000px; touch-action:none; cursor:grab; }
.cb-scene:active { cursor:grabbing; }
.cb-scene::after { content:""; position:absolute; left:50%; bottom:-26px; width:210px; height:30px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.5) 0%, transparent 70%); }
.cb-cube { position:relative; width:222px; height:222px; margin:39px auto; transform-style:preserve-3d; transform:rotateX(-26deg) rotateY(-34deg); pointer-events:none; }

/* Cubies: 26 mini-cubos reales; el JS anima la capa que gira */
.cb-cubie { position:absolute; left:76px; top:76px; width:70px; height:70px; transform-style:preserve-3d; will-change:transform; }
.cb-cf { position:absolute; inset:0; border-radius:7px; background:#0d0e14; border:2.5px solid #07080c; box-shadow:inset 0 -3px 6px rgba(0,0,0,.30), inset 0 2px 4px rgba(255,255,255,.22); }
.cb-cf-f { transform:translateZ(35px); }
.cb-cf-b { transform:rotateY(180deg) translateZ(35px); }
.cb-cf-r { transform:rotateY(90deg) translateZ(35px); }
.cb-cf-l { transform:rotateY(-90deg) translateZ(35px); }
.cb-cf-u { transform:rotateX(90deg) translateZ(35px); }
.cb-cf-d { transform:rotateX(-90deg) translateZ(35px); }

.cb-hint { margin:0; font-size:12.5px; line-height:1.55; color:#7d86a8; font-style:italic; }
.cb-movecount { margin:0; font-size:12px; letter-spacing:2px; color:#9aa4c5; padding:6px 16px; border:1px solid rgba(150,160,200,.3); border-radius:99px; background:rgba(18,21,36,.6); font-variant-numeric:tabular-nums; }

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

.cbc-net { display:grid; grid-template-columns:repeat(4, minmax(64px, 88px)); gap:8px; width:100%; max-width:400px; justify-content:center; }
.cbc-mini { aspect-ratio:1/1; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:3px; padding:4px; background:#07080e; border-radius:8px; }
.cbc-mini.front { outline:2.5px solid #ffd479; outline-offset:2px; }
.cbc-sticker { border-radius:3px; background:#444; }
.cbc-legend { margin:0; font-size:11px; color:#7b8296; letter-spacing:.5px; }
.cbc-legend b { color:#ffd479; }

.cbc-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; }
.cbc-reset:active { transform:translateY(1px); }