/* ---------- Cruzadinha de Cinema ---------- */

.cf-game.cf-cw {
	--cw-paper: #f4ede4;
	--cw-ink: #1b1409;
	--cw-word: #f8dc96;
	--cw-active: #f2b33d;
	--cw-num: #75685a;
	--cw-wrong-bg: #f5c4be;
	--cw-wrong: #b42318;
	--cw-ok: #17703f;
	--cw-revealed: #1f5fa8;
	max-width: 1000px;
}

.cf-cw-theme {
	margin: .4rem 0 0;
	color: var(--cf-muted);
	font-size: .92rem;
}

.cf-cw-theme strong { color: var(--cf-accent); }
.cf-cw-timer { font-variant-numeric: tabular-nums; color: var(--cf-text); font-weight: 600; }

.cf-cw-layout {
	display: grid;
	gap: 1.25rem;
	align-items: start;
}

@media (min-width: 820px) {
	.cf-cw-layout { grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); }
	.cf-cw-clues ol { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
}

/* Barra da dica atual (fica grudada no topo no celular) */
.cf-cw-bar {
	position: sticky;
	top: 8px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .6rem;
	padding: .55rem .5rem;
	min-height: 3.2rem;
	background: var(--cf-surface-2);
	border-radius: var(--cf-radius);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.cf-cw-bar-text { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.3; }
.cf-cw-bar-text strong { color: var(--cf-accent); margin-right: .35rem; white-space: nowrap; }

.cf-cw-bar-nav {
	flex: 0 0 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--cf-surface);
	color: var(--cf-text);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

/* Tabuleiro */
.cf-cw-grid {
	--cw-cell: 30px;
	display: grid;
	grid-template-columns: repeat(var(--cw-cols, 15), minmax(0, 1fr));
	gap: 2px;
	width: 100%;
	max-width: calc(var(--cw-cols, 15) * 42px);
	margin: 0 auto;
	user-select: none;
	touch-action: manipulation;
}

.cf-cw-blank { aspect-ratio: 1; }

.cf-cw-cell {
	position: relative;
	aspect-ratio: 1;
	background: var(--cw-paper);
	border-radius: 3px;
	transition: background-color .12s;
}

.cf-cw-cell input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: var(--cw-ink);
	caret-color: transparent;
	text-align: center;
	text-transform: uppercase;
	font: 700 max(16px, calc(var(--cw-cell) * .52)) / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	padding-top: calc(var(--cw-cell) * .12);
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cf-cw-num {
	position: absolute;
	top: 1px;
	left: 2px;
	z-index: 1;
	font-size: max(8px, calc(var(--cw-cell) * .27));
	font-weight: 600;
	line-height: 1;
	color: var(--cw-num);
	pointer-events: none;
}

.cf-cw-cell.is-word { background: var(--cw-word); }
.cf-cw-cell.is-active { background: var(--cw-active); box-shadow: 0 0 0 2px var(--cf-text); z-index: 2; }
.cf-cw-cell.is-wrong { background: var(--cw-wrong-bg); }
.cf-cw-cell.is-wrong input { color: var(--cw-wrong); }
.cf-cw-cell.is-wrong.is-active { background: var(--cw-active); }
.cf-cw-cell.is-ok input { color: var(--cw-ok); }
.cf-cw-cell.is-revealed input { color: var(--cw-revealed); }

.cf-cw-cell.is-revealed::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-style: solid;
	border-width: 0 7px 7px 0;
	border-color: transparent var(--cw-revealed) transparent transparent;
	border-top-right-radius: 3px;
}

/* Ferramentas */
.cf-cw-tools {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .45rem;
	margin-top: 1rem;
}

.cf-cw-tools[hidden] { display: none; }
.cf-cw-tools .cf-btn { padding: .6rem .85rem; font-size: .9rem; }

/* Dicas */
.cf-cw-clues { display: grid; gap: 1rem; }

@media (min-width: 560px) and (max-width: 819px) {
	.cf-cw-clues { grid-template-columns: 1fr 1fr; }
}

.cf-cw-clues h3 {
	margin: 0 0 .4rem;
	color: var(--cf-accent);
	font-size: .85rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cf-cw-clues ol { list-style: none; margin: 0; padding: 0; }

.cf-cw-clues li {
	display: flex;
	gap: .55rem;
	padding: .4rem .55rem;
	border-radius: 8px;
	border-left: 3px solid transparent;
	font-size: .92rem;
	line-height: 1.35;
	cursor: pointer;
}

.cf-cw-clues li:hover { background: var(--cf-surface); }
.cf-cw-clues li.is-active { background: rgba(242, 179, 61, .2); border-left-color: var(--cf-accent); }
.cf-cw-clues li.is-cross { background: rgba(242, 179, 61, .07); }
.cf-cw-clues li.is-done .cf-cw-ct { color: var(--cf-muted); }
.cf-cw-cn { flex: 0 0 1.6rem; font-weight: 700; text-align: right; color: var(--cf-accent); font-variant-numeric: tabular-nums; }
.cf-cw-ct em { color: var(--cf-muted); font-style: normal; font-size: .82rem; white-space: nowrap; }

.cf-cw-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .75rem; }
.cf-cw-answers h4 { margin: 0 0 .3rem; font-size: .8rem; color: var(--cf-muted); text-transform: uppercase; letter-spacing: .06em; }
.cf-cw-answers ol { list-style: none; margin: 0; padding: 0; }
.cf-cw-answers li { padding: .15rem 0; }
.cf-cw-answers li span { display: inline-block; min-width: 1.6rem; color: var(--cf-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
	.cf-cw-grid { gap: 1px; }
	.cf-cw-cell, .cf-cw-cell input { border-radius: 2px; }
	.cf-cw-answers { grid-template-columns: 1fr; }
}