/* Skynex Juegos — el carnet de socio y el portero (lo pinta /js/cuenta.js). Sirve encima del recreativo 3D y de
   las páginas normales: todo va dentro de .skc con sus propios colores. Sin animaciones que parpadeen. */
.skc { --skc-fondo: #0d0920; --skc-panel: #15102e; --skc-tinta: #f2eeff; --skc-suave: #b9b0dc; --skc-rosa: #ff2e88; --skc-cian: #7df9ff; --skc-oro: #ffd23f; --skc-verde: #4cff8f; --skc-borde: rgba(160, 140, 255, .32);
  --skc-corte: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  padding: 0; border: 0; background: transparent; color: var(--skc-tinta); max-width: min(560px, calc(100vw - 20px)); width: 100%; max-height: calc(100dvh - 20px); overflow: visible;
  font: 16px/1.45 Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.skc::backdrop { background: rgba(4, 2, 14, .74); }
/* en la puerta del recreativo: abajo a la izquierda, que se vea al portero */
.skc.skc-puerta { margin: auto auto max(14px, 3vh) max(14px, 3vw); max-width: min(500px, calc(100vw - 20px)); }
.skc.skc-puerta::backdrop { background: linear-gradient(90deg, rgba(4, 2, 14, .72), rgba(4, 2, 14, .2) 62%, rgba(4, 2, 14, 0)); }
@media (max-width: 700px) { .skc.skc-puerta { margin: auto 10px 10px; } .skc.skc-puerta::backdrop { background: linear-gradient(0deg, rgba(4, 2, 14, .8), rgba(4, 2, 14, .1) 70%); } }
.skc * { box-sizing: border-box; }
.skc-caja { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 20px); overflow: auto; background: var(--skc-fondo); border-left: 4px solid var(--skc-oro); clip-path: var(--skc-corte); padding: 18px 20px 20px 22px; }
.skc-caja.es-portero { border-left-color: var(--skc-rosa); }
.skc-cab { display: flex; align-items: center; gap: 10px; }
.skc-cab h2 { margin: 0; flex: 1; font-weight: 900; font-stretch: 118%; font-size: clamp(20px, 4.4vw, 26px); letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; }
.skc-sello { font: 700 11px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .14em; padding: 5px 7px; color: #0b0718; background: var(--skc-oro); }
.es-portero .skc-sello { background: var(--skc-rosa); color: #fff; }
.skc-x { width: 36px; height: 36px; border: 1px solid var(--skc-borde); background: transparent; color: var(--skc-suave); font-size: 22px; line-height: 1; cursor: pointer; }
.skc-x:hover { color: var(--skc-tinta); border-color: var(--skc-cian); }

/* el portero habla */
.skc-portero { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 12px; }
.skc-cara { flex: 0 0 52px; height: 52px; background:
  linear-gradient(#0a0a10, #0a0a10) 9px 20px / 14px 6px no-repeat,
  linear-gradient(#0a0a10, #0a0a10) 29px 20px / 14px 6px no-repeat,
  linear-gradient(#0a0a10, #0a0a10) 23px 21px / 6px 2px no-repeat,
  linear-gradient(#5a3424, #5a3424) 18px 37px / 16px 3px no-repeat,
  linear-gradient(#22202c, #22202c) 0 0 / 52px 9px no-repeat,
  #8a5a3c; border: 2px solid var(--skc-borde); }
.skc-dice { margin: 0; padding: 10px 14px; background: var(--skc-panel); border: 1px solid var(--skc-borde); font-size: 17px; color: var(--skc-tinta); min-height: 52px; }

/* opciones de la puerta */
.skc-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skc-op { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 76px; padding: 12px 14px; text-align: left; background: var(--skc-panel); border: 1px solid var(--skc-borde); color: var(--skc-tinta); cursor: pointer; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.skc-op b { font-weight: 900; font-stretch: 112%; font-size: 17px; letter-spacing: .02em; }
.skc-op span { font-size: 13.5px; color: var(--skc-suave); line-height: 1.3; }
.skc-op:hover, .skc-op:focus-visible { border-color: var(--skc-cian); outline: none; }
.skc-op.op-carnet b { color: var(--skc-cian); }
.skc-op.op-socio b { color: var(--skc-verde); }
.skc-op.op-vip b { color: var(--skc-oro); }
.skc-op.op-sin b { color: var(--skc-suave); }

/* formularios */
.skc-form { display: grid; gap: 10px; }
.skc-campo { display: grid; gap: 4px; }
.skc-campo span { font: 700 12px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .08em; color: var(--skc-suave); text-transform: uppercase; }
.skc-campo input { height: 46px; padding: 0 12px; font: 600 17px Archivo, system-ui, sans-serif; color: var(--skc-tinta); background: #07051a; border: 1px solid var(--skc-borde); border-radius: 0; }
.skc-campo input:focus { outline: none; border-color: var(--skc-cian); box-shadow: 0 0 0 1px var(--skc-cian); }
#skc-vip { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.skc-fallo { margin: 0; padding: 8px 12px; background: rgba(255, 46, 136, .14); border-left: 3px solid var(--skc-rosa); color: #ffd0e4; font-size: 15px; }
.skc-nota { margin: 12px 0 0; font-size: 13px; color: var(--skc-suave); }

/* botones */
.skc-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.skc-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 18px; border: 0; background: rgba(255, 255, 255, .09); color: var(--skc-tinta); font: 900 15px Archivo, system-ui, sans-serif; font-stretch: 112%; letter-spacing: .04em; cursor: pointer; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.skc-btn.primario { background: var(--skc-oro); color: #0b0718; }
.es-portero .skc-btn.primario { background: var(--skc-rosa); color: #fff; }
.skc-btn:hover { filter: brightness(1.15); }
.skc-btn:disabled { opacity: .55; cursor: wait; }
.skc-btn:focus-visible, .skc-x:focus-visible { outline: 2px solid var(--skc-cian); outline-offset: 2px; }

/* el carnet y la tarjeta VIP */
.skc-ficha { display: grid; gap: 2px; margin-bottom: 12px; padding: 14px 16px; background: linear-gradient(120deg, #1d1440, #0f0b24 60%, #2a0d2c); border: 1px solid rgba(255, 210, 63, .5); }
.skc-ficha-k { font: 700 11px ui-monospace, Consolas, monospace; letter-spacing: .16em; color: var(--skc-cian); }
.skc-ficha-n { font-weight: 900; font-stretch: 118%; font-size: clamp(26px, 6vw, 36px); line-height: 1.05; word-break: break-word; }
.skc-ficha-d { font: 600 13px ui-monospace, Consolas, monospace; color: var(--skc-suave); }
.skc-tarjeta { margin-bottom: 8px; }
.skc-lienzo { display: block; width: 100%; height: auto; }
.skc-codigo { margin: 0 0 10px; font: 700 clamp(14px, 3.6vw, 18px) ui-monospace, Consolas, monospace; letter-spacing: .06em; color: var(--skc-verde); word-break: break-all; user-select: all; }

@media (max-width: 420px) {
  .skc-caja { padding: 14px 14px 16px 16px; }
  .skc-opciones { grid-template-columns: 1fr; }
  .skc-op { min-height: 0; }
}