/* sobres.css — Los 6 Sobres (el juego imposible) */

/* Inicio sutil, abajo del todo (igual que el resto de juegos) */
.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); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO ===================== */
.sb-screen { min-height:100svh; min-height:100vh; display:flex; justify-content:center;
  background:radial-gradient(circle at 50% 20%, #3a2f5c 0%, #241d3d 55%, #140f24 100%); color:#efe9fb; }
.sb-inner { width:100%; max-width:560px; padding:24px 16px 60px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.sb-title { font-size:21px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; margin:0; color:#e6c86a; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.sb-sub { font-size:12.5px; color:#b6a9dd; margin:-8px 0 0; }
.sb-status { font-size:14px; color:#cbbff0; margin:0; min-height:38px; line-height:1.35; }
.sb-status.is-lose { color:#ff9f6a; font-weight:700; }
.sb-status.is-other { color:#9fe0ff; }
.sb-status.is-done { color:#7cffb2; font-weight:700; }
.sb-status.is-error { color:#ff8a9c; }

/* Marcador de rondas */
.sb-score { display:flex; gap:8px; }
.sb-dot { width:11px; height:11px; border-radius:50%; background:rgba(230,200,106,.25); border:1px solid rgba(230,200,106,.5); }
.sb-dot.on { background:#e6c86a; box-shadow:0 0 8px rgba(230,200,106,.8); }

/* Rejilla de sobres */
.sb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; max-width:480px; }
.sb-env { position:relative; aspect-ratio:7/5; border-radius:12px; cursor:pointer; perspective:900px;
  -webkit-tap-highlight-color:transparent; }
.sb-card { position:absolute; inset:0; border-radius:12px; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,.1,.2,1); }
.sb-env.open .sb-card { transform:rotateY(180deg); }
.sb-front, .sb-back { position:absolute; inset:0; border-radius:12px; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center; }

/* Frente: sobre cerrado con solapa y letra */
.sb-front { background:linear-gradient(160deg,#efe2c6 0%, #e2d0a8 55%, #d4bf90 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 0 0 1px rgba(120,90,42,.35); overflow:hidden; }
.sb-front::before { content:""; position:absolute; top:0; left:0; right:0; height:56%;
  background:linear-gradient(160deg,#e7d7b2,#dcc99e); clip-path:polygon(0 0, 100% 0, 50% 100%);
  border-bottom:1px solid rgba(120,90,42,.3); }
.sb-letter { position:relative; z-index:2; font-size:30px; font-weight:900; color:#6d4f22;
  font-family:Georgia,serif; text-shadow:0 1px 0 rgba(255,255,255,.4); margin-top:34%; }
.sb-wax { position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #d24a5e, #8f1f30 68%, #6d1422 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.4); }

/* Reverso: el número */
.sb-back { transform:rotateY(180deg); background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(120,90,42,.3); flex-direction:column; gap:2px; }
.sb-back .n { font-size:44px; font-weight:900; color:#111; line-height:1; }
.sb-back .tag { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:#111; }
.sb-env.open .sb-back .n { animation:sbPop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes sbPop { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }

/* Botón juego nuevo (bajo los sobres) */
.sb-new { margin-top:10px; font-size:13px; font-weight:800; letter-spacing:1.5px; padding:12px 34px; border-radius:13px; border:1px solid rgba(230,200,106,.5); background:rgba(230,200,106,.10); color:#e6c86a; cursor:pointer; }
.sb-new:active { transform:translateY(1px); }
.sb-new:disabled { opacity:.4; cursor:default; }

/* ===================== CONTROL ===================== */
.sbc-round { font-size:13px; font-weight:700; color:var(--brand1); letter-spacing:.5px; }
.sbc-preview { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:56px;
  border:1.5px dashed var(--line); border-radius:14px; padding:8px; color:var(--muted); font-size:15px; font-weight:700; }
.sbc-preview .big { font-size:22px; color:var(--brand1); }
.sbc-sec { width:100%; text-align:left; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-bottom:-8px; }
.sbc-letters { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; width:100%; }
.sbc-let { height:46px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800;
  border-radius:11px; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:#3a3550; font-family:Georgia,serif; }
.sbc-let.sel { border-color:var(--brand1); background:var(--brand1); color:#fff; }
.sbc-let.used { opacity:.35; pointer-events:none; text-decoration:line-through; }
.sbc-let:active { transform:translateY(1px); }
.sbc-nums { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; width:100%; }
.sbc-num { height:46px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800;
  border-radius:11px; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:#3a3550; }
.sbc-num.sel { border-color:var(--brand1); background:rgba(108,92,231,.12); color:var(--brand1); box-shadow:0 0 0 2px rgba(108,92,231,.15); }
.sbc-num.used { opacity:.35; pointer-events:none; text-decoration:line-through; }
.sbc-num:active { transform:translateY(1px); }