/* Sopa de Letras Vintage - Stylesheet */

/* Base Container and Newspaper Frame */
.sopa-vintage-container {
	font-family: 'Lora', Georgia, serif;
	margin: 0 auto;
	width: 100% !important;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.sopa-vintage-container * {
	box-sizing: border-box;
}

.sopa-vintage-newspaper-frame {
	background-color: #f4efe6;
	color: #1a1a1a;
	border: 6px double #1a1a1a;
	padding: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	position: relative;
	transition: all 0.3s ease;
	width: 100% !important;
}

/* Transparent Variant */
.sopa-vintage-transparent {
	background-color: transparent !important;
}

.sopa-vintage-transparent .sopa-vintage-newspaper-frame {
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Dividers */
.sopa-vintage-divider-thick {
	height: 4px;
	background-color: #1a1a1a;
	margin: 8px 0;
	width: 100%;
}

.sopa-vintage-divider-thin {
	height: 1px;
	background-color: #1a1a1a;
	margin: 6px 0;
	width: 100%;
}

/* Header Section */
.sopa-vintage-header {
	text-align: center;
	margin-bottom: 25px;
	width: 100%;
}

.sopa-vintage-transparent .sopa-vintage-header {
	margin-bottom: 20px;
}

.sopa-vintage-main-title {
	font-family: 'Playfair Display', 'Times New Roman', serif;
	font-size: 2.2rem;
	font-weight: 900;
	margin: 0;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.1;
	color: #1a1a1a;
}

.sopa-vintage-sub-title {
	font-family: 'Lora', Georgia, serif;
	font-size: 1.1rem;
	font-weight: 700;
	margin: 5px 0;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #1a1a1a;
}

/* Layout Structural Columns */
.sopa-vintage-body {
	display: flex;
	width: 100% !important;
}

/* Left Column: Story & Words */
.sopa-vintage-col-left {
	display: flex;
	flex-direction: column;
	gap: 25px;
	max-width: 100% !important;
}

.sopa-vintage-section-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.1rem;
	font-weight: 800;
	margin: 0 0 12px 0;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-bottom: 2px solid #1a1a1a;
	padding-bottom: 4px;
	color: #1a1a1a;
}

.sopa-vintage-intro-section {
	text-align: justify;
}

.sopa-vintage-story-text {
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
	text-indent: 0;
	color: #1a1a1a;
}

/* Word List styling */
.sopa-vintage-word-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 15px;
}

.sopa-vintage-word-item {
	font-size: 0.95rem;
	font-weight: bold;
	letter-spacing: 0.5px;
	position: relative;
	display: inline-block;
	transition: all 0.3s ease;
}

.sopa-vintage-word-text {
	padding: 2px 4px;
	border-radius: 3px;
	position: relative;
	color: #1a1a1a;
}

/* Found words list strikeout effect */
.sopa-vintage-word-item.word-found {
	opacity: 0.4;
}

.sopa-vintage-word-item.word-found .sopa-vintage-word-text::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 3px;
	background-color: rgba(26, 26, 26, 0.85);
	transform: translateY(-50%) rotate(-2deg);
	border-radius: 2px;
	animation: strikeout 0.4s ease-out forwards;
}

@keyframes strikeout {
	0% {
		right: 100%;
	}
	100% {
		right: 0;
	}
}

/* Right Column: Game Grid */
.sopa-vintage-col-right {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100% !important;
	max-width: 100% !important;
}

.sopa-vintage-grid-wrapper {
	width: 100% !important;
	max-width: 100% !important;
}

/* Grid Container */
.sopa-vintage-grid-container {
	display: grid !important;
	grid-template-columns: repeat(var(--grid-size, 12), 1fr) !important;
	border: 3px solid #1a1a1a !important;
	background-color: #1a1a1a !important; /* Acts as borders when cell backgrounds are solid */
	gap: 1px !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	touch-action: none; /* Prevents scroll when dragging on touch devices */
}

/* Grid container styling when transparent (avoid solid black gap color) */
.sopa-vintage-transparent .sopa-vintage-grid-container {
	background-color: transparent !important;
	gap: 0 !important; /* Align borders exactly */
	border: 2px solid #1a1a1a !important;
}

/* Grid Cells */
.sopa-vintage-grid-cell {
	background-color: #f4efe6;
	aspect-ratio: 1 / 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: 'Lora', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	transition: background-color 0.15s ease, color 0.15s ease;
	user-select: none;
	-webkit-user-select: none;
	color: #1a1a1a;
}

/* Transparent Cells style */
.sopa-vintage-transparent .sopa-vintage-grid-cell {
	background-color: transparent !important;
	border-right: 1px solid rgba(26, 26, 26, 0.15) !important;
	border-bottom: 1px solid rgba(26, 26, 26, 0.15) !important;
}

/* Remove bottom/right borders from edges in transparent mode to avoid doubling */
.sopa-vintage-transparent .sopa-vintage-grid-cell:nth-child(var(--grid-size)n) {
	border-right: none !important;
}

/* Grid Cell Highlights (Marker stroke effects) */
.sopa-vintage-grid-cell.selected {
	background-color: rgba(212, 175, 55, 0.35) !important;
	color: #000 !important;
}

.sopa-vintage-grid-cell.found {
	background-color: rgba(212, 175, 55, 0.25) !important;
	color: #000 !important;
}

.sopa-vintage-grid-cell.secret-found {
	background-color: rgba(186, 45, 45, 0.25) !important;
	color: #8b0000 !important;
	font-weight: 800;
	animation: pulseSecret 1s infinite alternate;
}

@keyframes pulseSecret {
	0% {
		background-color: rgba(186, 45, 45, 0.2) !important;
	}
	100% {
		background-color: rgba(186, 45, 45, 0.35) !important;
	}
}

/* Layout Variant: Side-by-Side (Horizontal) */
.sopa-vintage-layout-side-by-side .sopa-vintage-body {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 30px !important;
}

.sopa-vintage-layout-side-by-side .sopa-vintage-col-left {
	flex: 1 1 250px !important;
	min-width: 0 !important;
}

.sopa-vintage-layout-side-by-side .sopa-vintage-col-right {
	flex: 1.2 1 280px !important;
	min-width: 0 !important;
}

/* Layout Variant: Stacked (Vertical - DEFAULT for narrow columns - HEAVILY FORCE STACKING) */
.sopa-vintage-layout-stacked .sopa-vintage-body {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 25px !important;
	width: 100% !important;
}

.sopa-vintage-layout-stacked .sopa-vintage-col-left {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	min-width: 0 !important;
}

.sopa-vintage-layout-stacked .sopa-vintage-col-right {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	min-width: 0 !important;
	display: flex !important;
	justify-content: center !important;
}

.sopa-vintage-layout-stacked .sopa-vintage-grid-wrapper {
	max-width: 380px !important;
	width: 100% !important;
}

/* Footer Section */
.sopa-vintage-footer-line {
	margin-top: 20px;
	text-align: center;
	width: 100%;
}

.sopa-vintage-footer-text {
	font-size: 0.8rem;
	font-style: italic;
	letter-spacing: 1px;
	opacity: 0.7;
}

/* Modal Popup Styles */
.sopa-vintage-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sopa-vintage-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(26, 26, 26, 0.5);
	backdrop-filter: blur(3px);
}

.sopa-vintage-modal-content {
	position: relative;
	width: 90%;
	max-width: 450px;
	animation: modalSlideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes modalSlideUp {
	from {
		transform: translateY(50px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.sopa-vintage-modal-frame {
	background-color: #f4efe6;
	color: #1a1a1a;
	border: 5px double #1a1a1a;
	padding: 25px;
	text-align: center;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.sopa-vintage-modal-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.8rem;
	font-weight: 900;
	margin: 0 0 10px 0;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sopa-vintage-modal-body {
	margin: 15px 0;
	text-align: justify;
	font-size: 1rem;
	line-height: 1.5;
}

.sopa-vintage-modal-message {
	margin: 0;
	text-indent: 10px;
}

.sopa-vintage-modal-close-btn {
	background: transparent;
	border: 2px solid #1a1a1a;
	color: #1a1a1a;
	font-family: 'Lora', Georgia, serif;
	font-size: 0.95rem;
	font-weight: bold;
	padding: 8px 24px;
	cursor: pointer;
	margin-top: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.2s ease;
}

.sopa-vintage-modal-close-btn:hover {
	background-color: #1a1a1a;
	color: #f4efe6;
}

/* Touch Action Visual Guides */
.sopa-vintage-grid-container.dragging {
	cursor: crosshair;
}

/* Responsiveness adjustments (Fallback media queries) */
@media (max-width: 768px) {
	/* Auto-force stacked layout on mobile viewports */
	.sopa-vintage-body {
		flex-direction: column !important;
		align-items: center !important;
		gap: 20px !important;
	}

	.sopa-vintage-col-left {
		width: 100% !important;
		min-width: 0 !important;
	}

	.sopa-vintage-col-right {
		width: 100% !important;
		min-width: 0 !important;
		display: flex !important;
		justify-content: center !important;
	}

	.sopa-vintage-grid-wrapper {
		max-width: 380px !important;
	}

	.sopa-vintage-main-title {
		font-size: 1.8rem;
	}

	.sopa-vintage-sub-title {
		font-size: 1rem;
		letter-spacing: 2px;
	}
	
	.sopa-vintage-grid-cell {
		font-size: 1.05rem;
	}
}

@media (max-width: 480px) {
	.sopa-vintage-newspaper-frame {
		padding: 15px;
		border-width: 4px;
	}

	.sopa-vintage-word-list {
		grid-template-columns: repeat(2, 1fr);
		font-size: 0.85rem;
	}
	
	.sopa-vintage-grid-cell {
		font-size: 0.9rem;
	}
}