/* ==========================================================================
   UNO Deck Builder — vista previa de la carta (estilo baraja de colores)
   ========================================================================== */

.udb-builder { margin: 20px 0; padding: 20px; border: 1px solid #e2e2e2; border-radius: 10px; background: #fafafa; }
.udb-builder h3 { margin-top: 0; }
.udb-columns { display: flex; gap: 30px; flex-wrap: wrap; }
.udb-preview-col { flex: 0 0 230px; text-align: center; }
.udb-upload-col { flex: 1 1 300px; min-width: 260px; }

/* --- Escenario / giro de la carta --- */
.udb-card-stage { perspective: 1200px; width: 210px; height: 330px; margin: 0 auto 14px; }
.udb-card { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; cursor: pointer; }
.udb-card.is-flipped { transform: rotateY(180deg); }

.udb-card-face {
	position: absolute; inset: 0;
	backface-visibility: hidden;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(0,0,0,.20);
	overflow: hidden;
	padding: 4.2%;                      /* borde blanco exterior */
	box-sizing: border-box;
}
.udb-card-back { transform: rotateY(180deg); }

/* --- Cuerpo de color con esquinas redondeadas --- */
.udb-card-body {
	position: relative;
	width: 100%; height: 100%;
	border-radius: 13%/8%;
	background: #1864be;
	overflow: hidden;                   /* recorta el óvalo contra la carta */
	display: block;
}
.udb-body-back { background: #121212; }

/* --- Óvalo blanco inclinado con la foto dentro --- */
.udb-oval {
	position: absolute; left: 50%; top: 50%;
	width: 92%; height: 104%;
	transform: translate(-50%, -50%) rotate(-16deg);
	background: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
.udb-oval-inner {
	position: absolute; inset: 4%;
	border-radius: 50%;
	overflow: hidden;
}
/* La foto se contra-rota para verse recta y cubre toda la carta */
.udb-photo {
	position: absolute; left: 50%; top: 50%;
	width: 260%; height: 190%;
	transform: translate(-50%, -50%) rotate(16deg);
	background-size: cover;
	background-position: center;
}

/* --- Índices de las esquinas --- */
.udb-index {
	position: absolute;
	font-family: Impact, "Arial Black", Haettenschweiler, sans-serif;
	font-weight: 900;
	font-size: 34px;
	line-height: 1;
	color: #fff;
	-webkit-text-stroke: 1px #000;
	paint-order: stroke fill;
	text-shadow: 1.5px 1.5px 0 rgba(0,0,0,.55);
	letter-spacing: -1px;
	pointer-events: none;
}
.udb-index-tl { top: 5%; left: 5%; }
.udb-index-br { bottom: 5%; right: 5%; transform: rotate(180deg); }

/* Círculo comodín (4 colores) en las esquinas */
.udb-index.is-wild {
	width: 30px; height: 30px; border-radius: 50%; text-indent: -9999px;
	-webkit-text-stroke: 0; text-shadow: none; overflow: hidden;
	border: 2px solid #fff; box-shadow: 0 0 0 2px #000;
	background:
		conic-gradient(#d6262a 0deg 90deg, #f4b400 90deg 180deg, #1e8c46 180deg 270deg, #1864be 270deg 360deg);
}

/* --- Texto del dorso --- */
.udb-back-text {
	position: absolute; left: 50%; top: 58%;
	transform: translate(-50%, -50%) rotate(-22deg);
	width: 88%;
	text-align: center;
	font-family: Impact, "Arial Black", sans-serif;
	font-size: 17px; line-height: 1.05;
	color: #e6193c;
	-webkit-text-stroke: 1.5px #000;
	paint-order: stroke fill;
	text-shadow: 2px 2px 0 #000;
	word-break: break-word;
	pointer-events: none;
}

.udb-placeholder {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	color: #666; font-size: 13px; background: rgba(255,255,255,.9);
	padding: 4px 10px; border-radius: 6px; z-index: 3;
}

/* --- Selectores de color y símbolo --- */
.udb-color-row, .udb-symbol-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.udb-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ccc; background: var(--c); cursor: pointer; padding: 0; }
.udb-swatch.is-active { border-color: #111; transform: scale(1.12); }
.udb-symbol {
	min-width: 30px; height: 26px; border-radius: 6px; border: 1px solid #ccc;
	background: #fff; cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1; padding: 0 6px;
}
.udb-symbol.is-active { background: #111; color: #fff; border-color: #111; }

.udb-flip-btn { margin-bottom: 8px; }
.udb-hint { font-size: 12px; color: #777; max-width: 220px; margin: 0 auto; }

.udb-field { margin-bottom: 20px; }
.udb-field label { display: block; margin-bottom: 6px; }
.udb-field input[type="text"] { width: 100%; max-width: 360px; }
.udb-field .description { font-size: 12px; color: #666; margin: 4px 0 8px; }
.udb-tip { font-size: 12px; color: #555; background: #fff7e0; border-radius: 6px; padding: 8px 10px; }

.udb-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.udb-thumb { width: 52px; height: 52px; border-radius: 6px; border: 2px solid transparent; background-size: cover; background-position: center; cursor: pointer; }
.udb-thumb.is-active { border-color: #111; }