@charset "UTF-8";

/* ==========================================================================
   Jogo da Forca - Versão 2 (mobile-first)
   ========================================================================== */

:root {
	--forca-primary: #5DADE2;
	--forca-accent: #FFB347;
	--forca-success: #2ecc71;
	--forca-danger: #e74c3c;
	--forca-word: #7B1FA2;
	--forca-bg: #f7fbff;
}

/* ===================================
   GAME INTRO SECTION
   =================================== */
.game-intro-section {
	margin-bottom: 24px;
}

.game-main-title {
	font-size: 34px;
	font-weight: 700;
	color: var(--forca-word);
	margin-bottom: 20px;
	font-family: var(--font-primary, 'Fredoka', sans-serif);
	line-height: 1.2;
}

.game-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.game-badge {
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
}

.badge-category {
	background: linear-gradient(135deg, #FF8C42 0%, #FFD700 100%);
	color: white;
}

.badge-difficulty {
	background: linear-gradient(135deg, #5DADE2 0%, #7EC8E3 100%);
	color: white;
}

.badge-age {
	background: linear-gradient(135deg, #FF69B4 0%, #FFB6C1 100%);
	color: white;
}

.game-container {
	background: var(--forca-bg);
	border-radius: 20px;
	padding: 16px;
	margin: 10px 0;
	box-shadow: 0 6px 20px rgba(93, 173, 226, 0.18);
}

/* Trava a rolagem da página durante o modo tela cheia */
body.game-fullscreen-lock {
	overflow: hidden !important;
	position: fixed;
	inset: 0;
}

/* Apenas o jogo entra em tela cheia (sem header/anúncios/conteúdo) */
.game-container:fullscreen {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	border-radius: 0;
	background: var(--forca-bg);
	overflow: hidden;
	padding: 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.game-container:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	border-radius: 0;
	background: var(--forca-bg);
	overflow: hidden;
	padding: 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.game-container:-moz-full-screen {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	border-radius: 0;
	background: var(--forca-bg);
	overflow: hidden;
	padding: 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.game-container.is-fullscreen {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	margin: 0;
	border-radius: 0;
	background: var(--forca-bg);
	overflow: hidden;
	padding: 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* No celular o 100vh inclui a barra do navegador e corta o rodapé
   (anúncio e botão "Próxima fase"). O dvh acompanha só a área visível. */
.game-container:fullscreen,
.game-container:-webkit-full-screen,
.game-container:-moz-full-screen,
.game-container.is-fullscreen {
	height: 100dvh;
	max-height: 100dvh;
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Centraliza e dimensiona as telas quando em tela cheia, sem rolagem */
.game-container:fullscreen .category-screen,
.game-container:fullscreen .game-area,
.game-container:-webkit-full-screen .category-screen,
.game-container:-webkit-full-screen .game-area,
.game-container:-moz-full-screen .category-screen,
.game-container:-moz-full-screen .game-area,
.game-container.is-fullscreen .category-screen,
.game-container.is-fullscreen .game-area {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* A área do jogo pode rolar (centralização "safe") quando a mensagem final
   não couber na tela, garantindo acesso ao botão "Próxima fase". */
.game-container:fullscreen .game-area,
.game-container:-webkit-full-screen .game-area,
.game-container:-moz-full-screen .game-area,
.game-container.is-fullscreen .game-area {
	justify-content: safe center;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	padding: 2px 0 12px;
}

/* Ao terminar a rodada o teclado é inútil: ocultá-lo libera espaço
   para a mensagem e o botão aparecerem sem rolagem. */
.game-container:fullscreen.game-over .keyboard,
.game-container:-webkit-full-screen.game-over .keyboard,
.game-container:-moz-full-screen.game-over .keyboard,
.game-container.is-fullscreen.game-over .keyboard {
	display: none;
}

/* Bloco de anúncio que acompanha o jogo em tela cheia */
.game-container:fullscreen .ad-container,
.game-container:-webkit-full-screen .ad-container,
.game-container:-moz-full-screen .ad-container,
.game-container.is-fullscreen .ad-container {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	min-height: 60px;
	margin: 8px 0 0;
	padding: 10px;
	box-sizing: border-box;
}

.game-container:fullscreen .game-topbar,
.game-container:-webkit-full-screen .game-topbar,
.game-container:-moz-full-screen .game-topbar,
.game-container.is-fullscreen .game-topbar {
	flex-shrink: 0;
}

/* Compacta o conteúdo para caber em 100vh, sem rolagem */
.game-container:fullscreen .forca-svg,
.game-container:-webkit-full-screen .forca-svg,
.game-container:-moz-full-screen .forca-svg,
.game-container.is-fullscreen .forca-svg {
	width: min(150px, 32vh);
}

.game-container:fullscreen .forca-box,
.game-container:-webkit-full-screen .forca-box,
.game-container:-moz-full-screen .forca-box,
.game-container.is-fullscreen .forca-box {
	margin-bottom: 6px;
}

.game-container:fullscreen .word-row,
.game-container:-webkit-full-screen .word-row,
.game-container:-moz-full-screen .word-row,
.game-container.is-fullscreen .word-row {
	margin-bottom: 6px;
}

.game-container:fullscreen .word-tile,
.game-container:-webkit-full-screen .word-tile,
.game-container:-moz-full-screen .word-tile,
.game-container.is-fullscreen .word-tile {
	width: 30px;
	height: 36px;
	font-size: 22px;
}

.game-container:fullscreen .btn-hint,
.game-container:-webkit-full-screen .btn-hint,
.game-container:-moz-full-screen .btn-hint,
.game-container.is-fullscreen .btn-hint {
	padding: 6px 16px;
	font-size: 13px;
	margin-bottom: 6px;
}

.game-container:fullscreen .hint-box,
.game-container:-webkit-full-screen .hint-box,
.game-container:-moz-full-screen .hint-box,
.game-container.is-fullscreen .hint-box {
	padding: 6px 10px;
	font-size: 13px;
	margin-bottom: 6px;
}

.game-container:fullscreen .keyboard,
.game-container:-webkit-full-screen .keyboard,
.game-container:-moz-full-screen .keyboard,
.game-container.is-fullscreen .keyboard {
	gap: 4px;
	max-width: 460px;
}

.game-container:fullscreen .key,
.game-container:-webkit-full-screen .key,
.game-container:-moz-full-screen .key,
.game-container.is-fullscreen .key {
	width: 32px;
	height: 34px;
	font-size: 15px;
	border-radius: 8px;
}

.game-container:fullscreen .game-message,
.game-container:-webkit-full-screen .game-message,
.game-container:-moz-full-screen .game-message,
.game-container.is-fullscreen .game-message {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 8px;
	padding: 10px;
	font-size: 15px;
	scroll-margin-bottom: 12px;
}

.game-container:fullscreen .category-title,
.game-container:-webkit-full-screen .category-title,
.game-container:-moz-full-screen .category-title,
.game-container.is-fullscreen .category-title {
	font-size: 20px;
}

.game-container:fullscreen .category-btn,
.game-container:-webkit-full-screen .category-btn,
.game-container:-moz-full-screen .category-btn,
.game-container.is-fullscreen .category-btn {
	padding: 12px 6px;
	gap: 4px;
}

.game-container:fullscreen .cat-emoji,
.game-container:-webkit-full-screen .cat-emoji,
.game-container:-moz-full-screen .cat-emoji,
.game-container.is-fullscreen .cat-emoji {
	font-size: 28px;
}

.game-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.hud {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--font-secondary, sans-serif);
	font-weight: 600;
	color: #34495e;
}

.hud-item {
	background: #fff;
	border: 2px solid #e6eef7;
	border-radius: 12px;
	padding: 6px 12px;
	font-size: 14px;
	white-space: nowrap;
}

.btn-fullscreen {
	background: #fff;
	border: 2px solid #e6eef7;
	border-radius: 12px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #5DADE2;
	transition: all 0.2s;
}

.btn-fullscreen:hover {
	background: #eaf5ff;
	border-color: #5DADE2;
}

/* ---------- Tela de categorias ---------- */
.category-screen {
	text-align: center;
	padding: 20px 8px;
}

.category-title {
	color: #34495e;
	font-family: var(--font-primary, 'Fredoka', sans-serif);
	font-size: 24px;
	margin-bottom: 8px;
}

.category-subtitle {
	color: #7f8c8d;
	font-family: var(--font-secondary, sans-serif);
	font-size: 15px;
	margin-bottom: 24px;
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	max-width: 440px;
	margin: 0 auto;
}

.category-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 20px 8px;
	border: 3px solid #e6eef7;
	border-radius: 18px;
	background: #fff;
	cursor: pointer;
	transition: all 0.2s;
	font-family: var(--font-secondary, sans-serif);
}

.category-btn:hover {
	border-color: var(--forca-primary);
	transform: translateY(-3px);
	box-shadow: 0 6px 14px rgba(93, 173, 226, 0.2);
}

.category-btn:active {
	transform: scale(0.96);
}

.cat-emoji {
	font-size: 40px;
}

.cat-name {
	font-size: 15px;
	font-weight: 700;
	color: #34495e;
}

/* ---------- Área do jogo ---------- */
.game-area {
	margin-top: 4px;
}

.forca-box {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

.forca-svg {
	width: min(220px, 60vw);
	height: auto;
}

.forca-svg .frame {
	fill: none;
	stroke: #8d6e63;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.forca-svg .body {
	fill: none;
	stroke: #5DADE2;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.forca-svg .head {
	fill: #fff3e0;
	stroke: #ffcc80;
	stroke-width: 5;
}

.word-row {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

.word-display {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.word-tile {
	width: 38px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 3px solid #7B1FA2;
	font-size: 28px;
	font-weight: 700;
	color: var(--forca-word);
	font-family: var(--font-primary, 'Fredoka', sans-serif);
	text-transform: uppercase;
	background: #fff;
	border-radius: 6px 6px 0 0;
}

.word-tile.revealed {
	color: var(--forca-success);
	border-bottom-color: var(--forca-success);
	animation: pop 0.25s ease;
}

@keyframes pop {
	0% { transform: scale(0.6); }
	70% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

.btn-hint {
	display: block;
	margin: 0 auto 12px;
	background: var(--forca-accent);
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 10px 22px;
	font-family: var(--font-secondary, sans-serif);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-hint:hover { background: #f39c12; }
.btn-hint:active { transform: scale(0.96); }

.hint-box {
	background: #fff8e1;
	border: 2px dashed #ffcc80;
	border-radius: 12px;
	padding: 10px 14px;
	margin-bottom: 12px;
	color: #6d4c00;
	font-family: var(--font-secondary, sans-serif);
	font-size: 15px;
	text-align: center;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- Teclado ---------- */
.keyboard {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	max-width: 480px;
	margin: 0 auto;
}

.key {
	width: 40px;
	height: 44px;
	border: 2px solid #e6eef7;
	border-radius: 10px;
	background: #fff;
	color: #34495e;
	font-size: 18px;
	font-weight: 700;
	font-family: var(--font-secondary, sans-serif);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.key:hover { background: #eaf5ff; border-color: #5DADE2; }
.key:active { transform: scale(0.9); }

.key.correct {
	background: var(--forca-success);
	border-color: var(--forca-success);
	color: #fff;
	cursor: default;
	opacity: 0.85;
}

.key.wrong {
	background: var(--forca-danger);
	border-color: var(--forca-danger);
	color: #fff;
	cursor: default;
	opacity: 0.8;
}

.key:disabled { cursor: default; }

/* ---------- Mensagem de fim ---------- */
.game-message {
	text-align: center;
	margin-top: 16px;
	padding: 16px;
	border-radius: 16px;
	font-family: var(--font-secondary, sans-serif);
	font-size: 18px;
	font-weight: 700;
	animation: fadeIn 0.3s ease;
}

.game-message.win {
	background: #e8f8f0;
	color: #1e8449;
	border: 2px solid #2ecc71;
}

.game-message.lose {
	background: #fdecea;
	color: #c0392b;
	border: 2px solid #e74c3c;
}

.game-message .answer {
	display: block;
	font-size: 22px;
	margin: 8px 0;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.btn-next {
	display: inline-block;
	margin-top: 12px;
	background: var(--forca-primary);
	color: #fff;
	border: none;
	border-radius: 24px;
	padding: 12px 26px;
	font-family: var(--font-secondary, sans-serif);
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-next:hover { background: #3498db; }
.btn-next:active { transform: scale(0.96); }

/* ---------- Ajustes maiores ---------- */
@media (min-width: 576px) {
	.category-grid {
		grid-template-columns: repeat(3, 1fr);
		max-width: 560px;
	}

	.key {
		width: 44px;
		height: 48px;
		font-size: 19px;
	}

	.word-tile {
		width: 44px;
		height: 54px;
		font-size: 32px;
	}

	.game-container { padding: 24px; }
}

/* ---------- Celular em tela cheia: mantém o botão "Próxima fase" visível ---------- */
@media (max-width: 767px) {
	.game-container:fullscreen,
	.game-container:-webkit-full-screen,
	.game-container.is-fullscreen {
		padding: 10px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}

	.game-container:fullscreen .game-message,
	.game-container:-webkit-full-screen .game-message,
	.game-container.is-fullscreen .game-message {
		margin-top: 6px;
		padding: 8px;
		font-size: 14px;
	}

	.game-container:fullscreen .game-message .answer,
	.game-container:-webkit-full-screen .game-message .answer,
	.game-container.is-fullscreen .game-message .answer {
		font-size: 18px;
		margin: 4px 0;
	}

	.game-container:fullscreen .btn-next,
	.game-container:-webkit-full-screen .btn-next,
	.game-container.is-fullscreen .btn-next {
		margin-top: 8px;
		padding: 10px 22px;
	}
}

@media (max-height: 640px) {
	.game-container:fullscreen .forca-svg,
	.game-container:-webkit-full-screen .forca-svg,
	.game-container:-moz-full-screen .forca-svg,
	.game-container.is-fullscreen .forca-svg {
		width: min(110px, 24vh);
	}
}