/* Stile Super Minimal e Custom per Gucci */
body {
	font-family: 'Nunito Sans', sans-serif;
}

img {
	max-width: 100%;
}

.gucci-logo {
	width: 300px;
	margin: auto;
}

#low-contrast-text {
	color: #f2f2f2; 
	background-color: #fefefe;
}

#low-contrast-text::selection {
  color: #f2f2f2; 
background-color: #fefefe;
} 

/* Stile per il feedback (bootstrap alerts) */
.feedback.error {
	color: var(--bs-danger);
	font-weight: bold;
}
.feedback.success {
	color: var(--bs-success);
	font-weight: bold;
}

/* Placeholders per le Immagini/Video (mantengono il minimalismo) */
.image-placeholder-bad {
	min-height: 100px;
	line-height: 100px;
}

.video-placeholder {
	aspect-ratio: 16/9;
	min-height: 120px;
	line-height: 120px;

	iframe {
		width: 100% !important;
		height: 100% !important;
	}
}

/* Stile per la Stanza 3: Accessibilità Motoria - fondamentale per la sfida */
/* Bootstrap gestisce di default il focus con l'outline blu, ma qui lo rendiamo più evidente per la sfida */
.keyboard-challenge button:focus, .keyboard-challenge input:focus, .keyboard-challenge a:focus {
	outline: 3px solid #007bff !important; /* Colore primario di Bootstrap */
	box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.5) !important;
}

/* Stanza 3: Per i tabindex, usiamo la classe flex-column di Bootstrap per vedere l'ordine modificato */
.keyboard-challenge .d-flex {
	/* La logica dei tabindex > 0 è gestita dal browser in base all'ordine nel DOM/tabindex.
	Non usiamo order CSS qui, lasciamo che il tabindex sia la sfida */
}


@keyframes flash {
	0% { background-color: yellow; color: red; }
	100% { background-color: pink; color: blue; }
}
#room4 {
	background-color: #f9f9f9;
	font-family: "Comic Sans MS", cursive;
	color: #333;
	margin: 20px;
}
#room4 h1 {
	font-family: "Papyrus", fantasy;
	color: #9900ff;
	font-size: 38px;
	text-shadow: 2px 2px #ffcc00;
}
#room4 section {
	margin: 30px 0;
	border: 3px dotted #ff00ff;
	padding: 15px;
}
#room4 .flash {
	animation: flash 1s infinite alternate;
}
#room4 .bad-link {
	color: blue;
	text-decoration: underline;
	font-weight: bold;
}
#room4 .alt-font {
	font-family: "Impact", sans-serif;
	color: #00ccff;
	background-color: #ffff00;
	font-size: 20px;
}
#room4 .strange-font {
	font-family: "Courier New", monospace;
	background-color: #e8e8ff;
	color: #004400;
	padding: 5px;
}