@charset "UTF-8";

/* Utilidades visibles en el HTML */
.right { text-align: right; }
.left  { text-align: left; }
.center{ text-align: center; }
.question-small { font-size: 0.9em; }
.small-small    { font-size: 14px; }

.label, .hint { position: absolute; }
.red { color: #F00; }
.green { color: #0F0; }
.blue { color: #00F; }
.gray { color: #777; }
.black { color: #000; }

/* Enunciado */
#question { position: absolute; left: 120px; top: 10px; }

/* Área de trabajo (se respeta posición y tamaño existentes) */
#board{
	display: flex;
	align-items: flex-start;
	position: absolute;
	left: 10px;
/*Updated upstream*/
/*	top: 130px;*/
/*	width: 770px;*/
/*	height: 420px;*/
	top: 80px;
	width: 770px;
	height: 460px;
	background-color: transparent;
}

.footer-tips {
    position: absolute;
    font-size: 0.8rem;
    line-height: 1.6;
    bottom: 5px;
    left: 250px;
}

/* Aviso rojo (si se usa por JS) */
.red-warning{
	position: absolute;
	background: #FF0000;
	opacity: 0.3;
	left: 110px; top: 200px;
	width: 240px; height: 263px;
}

.ui-board {
	display: grid;
	grid-template-columns: 1fr 200px;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 10px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	font-family: sans-serif;
	font-size: 13px;
}

/* =============================
   Columna izquierda (puertas)
   ============================= */
.doors-area {
	overflow: hidden;
	padding-top: 5px;
}

.door-col {
	height: 100%;
	padding-right: 2px;
}

.door-row-0 {
	display: grid;
	grid-template-columns:
    38px 38px 38px 38px 82px 24px 170px 82px;
	align-items: end;
	column-gap: 6px;
	height: 28px;
	margin-bottom: 4px;
}

.door-row-1 {
	display: grid;
	grid-template-columns:
    38px 38px 38px 38px 82px 24px 170px 82px;
	align-items: center;
	column-gap: 6px;
	height: 28px;
	margin-bottom: 4px;
}

.door-row {
	display: grid;
	grid-template-columns:
    38px 126px 38px 38px 24px 170px 82px;
	align-items: center;
	column-gap: 6px;
	height: 28px;
	margin-bottom: 4px;
}

.door-label {
	white-space: nowrap;
	color: #222;
}
.sublbl {
	color: #666;
	font-size: 12px;
	text-align: center;
	align-content: end;
}
.biglbl {
    color: #666;
    font-size: 22px;
    text-align: center;
    align-content: end;
}
.door-num {
	font-weight: bold;
}

.cell {
	height: 24px;
	border: 1px solid #333;
	background: #fff;
	box-sizing: border-box;
}
.sq {
	width: 34px;
}
.head {
	border: 0;

}

.qmark {
	width: 22px;
	height: 24px;
	border: 1px solid #333;
	border-radius: 4px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}

.score-box {
	text-align: right;
	padding-right: 4px;
	font-weight: bold;
	/*color: #333;*/
	color: red;
}

/* Colores para columnas a–d */
.col-a { background: #ffc7c7; }  /* rojo claro */
.col-b { background: #ffe96e; }  /* amarillo */
.col-c { background: #cfe878; }  /* verde */
.col-d { background: #a9d6ff; }  /* azul */

/* Cerradura */
.lock {
	height: 24px;
	background: #fff url("../img/app13/lock.png") center/cover no-repeat;
	border: 1px solid #555;
	box-sizing: border-box;
}

.locks {
	height: 24px;
	background: #fff url("../img/app13/locks.png") center/cover no-repeat;
	/*border: 1px solid #555;*/
	box-sizing: border-box;
}

.good {
	height: 24px;
	background: #fff url("../img/app13/good.png") center/contain no-repeat;
	border: 1px solid #555;
	box-sizing: border-box;
}

.bad {
	height: 24px;
	background: #fff url("../img/app13/bad.png") center/contain no-repeat;
	border: 1px solid #555;
	box-sizing: border-box;
}

/* =============================
   Triángulo derecho
   ============================= */
.triangle-area {
	padding: 6px;
}

.triangle-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.triangle-img {
	max-width: 92%;
	max-height: 92%;
	opacity: .95;
}

.node {
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 13px;
	user-select: none;
}

#tri-a { top: 107px;  right: 92px; }
#tri-b { top: 234px;  right: 102px; }
#tri-c { top: 199px;  right: 20px; }
#tri-d { top: 198px;  right: 143px; }

/* =============================
   Teclado inferior
   ============================= */
.keyboard-area {
	grid-column: 1 / -1;
	background: #fff;
}

.keys-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.key {
	min-width: 32px;
	height: 24px;
	border: 1px solid #333;
	border-radius: 6px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
}

/* Colores de teclas a–d */
.key-a { background: #ffc7c7; }
.key-b { background: #ffe96e; }
.key-c { background: #cfe878; }
.key-d { background: #a9d6ff; }
.key-blank { background: #fff; }
/* =================== Cajas de estado externas ================== */
#score{
	position: absolute; right: 10px; top: 10px; width: 200px;
	padding: 5px 0; background: #CFF; border: 4px solid #09C;
	border-radius: 10px; text-align:center; color: #09C;
}
#score table{ width: 100%; }
#score table td:first-child{ white-space: nowrap; width: 100px; }
#score table td:not(:first-child){ padding-right: 10px; }
#score-val, #will-score-val{ color:#00F; }

#time{
	position: absolute; right: 10px; top: 70px; width:200px;
	padding: 5px 0; background: #C6E9D1; border: 4px solid #386744;
	border-radius: 10px; text-align:center; color: #386744;
}
#time-val{ color:#F00; }

#renew{
	position: absolute; right: 10px; top: 120px; width:200px;
	padding: 5px 0; background: #FBD4F0; border: 4px solid #CC7777;
	border-radius: 10px; text-align:center; color: #CC7777;
}
#renew-cnt{ color:#F00; }

/* Hint y botones (del HTML existente) */
#hint{
	position: absolute; right: 40px; bottom: -10px; font-size:0.8em;
	text-align:center; width:170px;
}
#hint-block{
	position: relative; background: #FFC; height: 100px; width: 170px;
	border-radius: 15px; border: 4px solid #FC6; padding:5px; text-align:left;
}
#hint-block:after{
	content:""; position:absolute; border-top:25px solid #FFC;
	border-right:18px solid transparent; top:100px; left:104px;
}
#hint-block:before{
	content:""; position:absolute; border-top:25px solid #FC6;
	border-right:18px solid transparent; top:113px; left:100px;
}
#buttons-left{ position: absolute; left: 10px; bottom: 10px; }
#buttons-right{ position: absolute; right: 175px; bottom: 10px; }
#points{
	position: absolute; left: 100px; top: 130px; font-size:0.8em;
	list-style: none; padding: 10px;
}

.door-selected {
	outline: 3px solid #ff4949;
	z-index: 10;
}

.value-letter {
	background: #FFE082;       /* ámbar claro */
	color: #222;
	font-weight: 700;
	text-align: center;
}

/* Estilo opcional para operadores en la columna 2 */
.value-operator {
	background: #E3F2FD;       /* azul claro */
	color: #1a237e;
	font-weight: 700;
	text-align: center;
}

/* Asegura buena presentación del contenido en las celdas de puerta */
.cell.sq {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	user-select: none;
}

.container-row {
	display: flex;
	flex-direction: row;
}

.container-row {
	display: flex;
	gap: 0;
	width: 100%;
	height: 100%;
	align-items: stretch;
}

.container-row > .cell,
.container-row > .lock {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
}

/* Contenedor de hint/blow con overlay de candado */
.judge {
	position: relative;
}

.judge .lock-overlay {
	position: absolute;
	inset: 0;
	background: #fff url("../img/app13/locks.png") center/cover no-repeat; /* tu imagen de candados */
	border: 1px solid #555;
	box-sizing: border-box;
	z-index: 2;
	pointer-events: none;
	display: none;
}

/* Mostrar candado */
.judge.locked .lock-overlay {
	display: block;
}

/* Asegura que las cajitas se vean bajo el overlay */
#judge-1 .cell, #judge-2 .cell, #judge-3 .cell, #judge-4 .cell,
#judge-5 .cell, #judge-6 .cell, #judge-7 .cell, #judge-8 .cell,
#judge-9 .cell, #judge-10 .cell {
	position: relative;
	z-index: 1;
}

/*.door-row-0 {*/
/*	display: grid;*/
/*	grid-template-columns: 38px 38px 38px 38px 82px 24px 170px 82px;*/
/*	align-items: end;*/
/*	column-gap: 6px;*/
/*	height: 13px;*/
/*	margin-bottom: 4px;*/
/*}*/

/*.door-row-0 .abcd-header {*/
/*	grid-column: 7;*/
/*	display: flex;*/
/*}*/

/*.door-row-0 .abcd-header .door-label {*/
/*	flex: 1 1 0;*/
/*	min-width: 0;*/
/*	text-align: center;*/
/*	font-weight: bold;*/
/*}*/

.key[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.4;
	filter: grayscale(0.6);
}