/* Pantallas */
.gs-screen.hidden { display:none; }
.gs-screen h3 { margin: 6px 0 10px; }

/* Contenedor y topbar */
.gs-container { max-width: 900px;background-color:#e5f9ff;padding:16px 16px;border-radius:16px; }
.gs-topbar { display:flex; gap:16px; justify-content: space-between; align-items:center; margin-bottom:12px; }
.gs-score, .gs-hearts { font-weight:600; }
.gs-heart { margin-right:4px; }

/* Controles y botones */
.gs-controls {  gap:10px; align-items:center; margin: 8px 0 12px; }
.gs-controls label, .gs-controls select{width:auto!important;appearance: auto;}
select{appearance: auto!important;}
.gs-actions-row { flex-direction:column;margin-top:12px; display:flex; justify-content:flex-end; }
.gs-actions-row.gap { justify-content:flex-start; gap:10px; }

.gs-btn { padding:8px 12px; border:1px solid #ccc; background:#fff; cursor:pointer; border-radius:6px; }
.gs-btn.primary { background-image: linear-gradient(to right, #4CAF50 0%, #68D391 100%); /* Degradado verde */
            color: white; /* Texto blanco */
            padding: 15px 30px; /* Relleno */
            border: none; /* Sin borde */
            border-radius: 10px; /* Bordes redondeados */
            font-size: 1.2em; /* Tamaño de fuente */
            font-weight: bold; /* Negrita */
            cursor: pointer; /* Cursor de puntero */
            transition: all 0.3s ease; /* Transición suave */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra */
            margin-top: 20px; /* Margen superior */
        width:auto;}
.gs-btn.ghost { background:transparent; }
.gs-rules{text-align:center;}
#gsCheckBtn:disabled{background-color:#f5f5f5;color:#666;box-shadow:none;background-image:none;}
#gsCheckBtn.is-next{background-color:#0052b3;background-image:none;border:0px solid red;}



/* Estados */
.gs-status { min-height: 22px; font-size: 14px; color:#666; margin-top:12px; }
.gs-status.ok { color: #177245; }
.gs-status.warn { color: #b45309; }
.gs-status.error { color: #b91c1c; }

/* Traducción y áreas de juego */
.gs-translation { margin:10px 0; padding:10px; background:#ecfdf5; border:1px solid #4ec1f4; border-radius:10px; }
.gs-hint { font-size:14px; color:#666; margin:6px 0 10px; }
.gs-formed, .gs-pool { display:flex; flex-wrap:wrap; gap:8px; padding:10px; border:1px dashed #ddd; border-radius:10px; min-height:54px; }
.gs-formed { background:#f8fafc; margin-bottom:12px; }
.gs-chip { padding:8px 10px; border:1px solid #ddd; background:#fff; border-radius:10px; cursor:pointer; }
.gs-chip.in-formed { background:#eef2ff; }
.wrapper-register-hint{background-color:white;border-radius:12px;padding:16px;font-size:18px;}

/* Feedback fallo */
.gs-feedback { margin-top:10px; padding:10px; background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; }
.gs-feedback.hidden { display:none; }

/* Modales */
.gs-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.4); z-index: 50; }
.gs-modal-card { background:#fff; border-radius:12px; padding:20px; width:min(520px, 92vw); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.gs-actions { margin-top:14px; display:flex; gap:10px; justify-content:center; }