.cf-game {
	--cf-bg: #14110f;
	--cf-surface: #1f1b18;
	--cf-surface-2: #2a2521;
	--cf-text: #f4ede4;
	--cf-muted: #a89c8f;
	--cf-accent: #f2b33d;
	--cf-accent-ink: #1b1409;
	--cf-hot: #3fbf7f;
	--cf-warm: #e8b04a;
	--cf-cold: #d4574e;
	--cf-radius: 12px;

	max-width: 560px;
	margin: 1.5rem auto;
	padding: 1.5rem 1.25rem 1.75rem;
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(242, 179, 61, .12), transparent 60%),
		var(--cf-bg);
	color: var(--cf-text);
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
	font-size: 16px;
	line-height: 1.45;
	box-sizing: border-box;
}

.cf-game *,
.cf-game *::before,
.cf-game *::after { box-sizing: border-box; }

.cf-head { text-align: center; margin-bottom: 1rem; }

.cf-title {
	margin: 0;
	color: var(--cf-text);
	font-size: clamp(1.5rem, 5vw, 2rem);
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.cf-meta {
	margin: .35rem 0 0;
	color: var(--cf-muted);
	font-size: .9rem;
}

.cf-meta strong { color: var(--cf-text); }
.cf-dot { margin: 0 .4rem; }

.cf-rules {
	margin: 0 0 1rem;
	background: var(--cf-surface);
	border-radius: var(--cf-radius);
	padding: .6rem .9rem;
	font-size: .92rem;
}

.cf-rules summary { cursor: pointer; font-weight: 600; color: var(--cf-accent); }
.cf-rules ul { margin: .6rem 0 .2rem 1.1rem; padding: 0; color: var(--cf-muted); }
.cf-rules li { margin: .25rem 0; }

.cf-archive { margin: 0 0 1rem; }
.cf-archive[hidden] { display: none; }

.cf-cal-toggle { width: 100%; padding: .6rem 1rem; font-size: .92rem; }
.cf-cal-toggle[aria-expanded="true"] { background: var(--cf-accent); color: var(--cf-accent-ink); }

.cf-cal {
	margin-top: .5rem;
	padding: .85rem;
	background: var(--cf-surface);
	border: 1px solid var(--cf-surface-2);
	border-radius: var(--cf-radius);
}

.cf-cal[hidden] { display: none; }

.cf-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .6rem;
}

.cf-cal-head strong { font-size: 1rem; letter-spacing: .02em; }

.cf-cal-nav {
	appearance: none;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--cf-surface-2);
	color: var(--cf-text);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.cf-cal-nav:disabled { opacity: .25; cursor: default; }
.cf-cal-nav:not(:disabled):hover { filter: brightness(1.2); }

.cf-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.cf-cal-wd {
	text-align: center;
	font-size: .72rem;
	font-weight: 700;
	color: var(--cf-muted);
	padding-bottom: .2rem;
}

.cf-cal-day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-height: 34px;
	border-radius: 8px;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}

.cf-cal-day.is-off { color: var(--cf-muted); opacity: .35; }

.cf-cal-day.has-game {
	appearance: none;
	border: 0;
	padding: 0;
	background: var(--cf-surface-2);
	color: var(--cf-text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: transform .1s, background .15s;
}

.cf-cal-day.has-game:hover { background: rgba(242, 179, 61, .3); transform: translateY(-1px); }
.cf-cal-day.has-game:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 1px; }
.cf-cal-day.is-won { background: rgba(63, 191, 127, .28); }
.cf-cal-day.is-gave { background: rgba(212, 87, 78, .25); }
.cf-cal-day.is-playing { background: rgba(232, 176, 74, .25); }
.cf-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--cf-muted); }
.cf-cal-day.is-current { background: var(--cf-accent); color: var(--cf-accent-ink); }

.cf-cal-day i {
	position: absolute;
	top: 1px;
	right: 4px;
	font-style: normal;
	font-size: .62rem;
	line-height: 1.2;
}

.cf-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	margin-top: .7rem;
	font-size: .75rem;
	color: var(--cf-muted);
}

.cf-dot-game {
	display: inline-block;
	width: .7em;
	height: .7em;
	margin-right: .3em;
	border-radius: 3px;
	background: var(--cf-surface-2);
	vertical-align: -1px;
}

.cf-form { display: flex; gap: .5rem; }
.cf-form[hidden] { display: none; }

.cf-input {
	flex: 1;
	min-width: 0;
	padding: .8rem 1rem;
	border: 2px solid var(--cf-surface-2);
	border-radius: var(--cf-radius);
	background: var(--cf-surface);
	color: var(--cf-text);
	font-size: 1rem;
	outline: none;
	transition: border-color .15s;
}

.cf-input::placeholder { color: var(--cf-muted); }
.cf-input:focus { border-color: var(--cf-accent); }

.cf-btn {
	appearance: none;
	border: 0;
	border-radius: var(--cf-radius);
	padding: .75rem 1.1rem;
	background: var(--cf-surface-2);
	color: var(--cf-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: transform .1s, filter .15s;
}

.cf-btn:hover { filter: brightness(1.15); }
.cf-btn:active { transform: translateY(1px); }
.cf-btn:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-btn[hidden] { display: none; }
.cf-btn-primary { background: var(--cf-accent); color: var(--cf-accent-ink); }
.cf-btn-ghost { background: transparent; color: var(--cf-muted); }

.cf-message {
	min-height: 1.5rem;
	margin: .6rem .2rem;
	font-size: .92rem;
	color: var(--cf-muted);
}

.cf-message.is-error { color: #f08a82; }
.cf-message.is-warn { color: var(--cf-warm); }
.cf-message.is-ok { color: var(--cf-hot); }

.cf-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .4rem;
}

.cf-list-last { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--cf-surface-2); }

.cf-row {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .65rem .9rem;
	border-radius: 10px;
	background: var(--cf-surface);
	overflow: hidden;
	font-weight: 600;
}

.cf-bar {
	position: absolute;
	inset: 0 auto 0 0;
	opacity: .85;
	border-radius: 10px;
	transition: width .4s ease;
}

.cf-hot .cf-bar { background: var(--cf-hot); }
.cf-warm .cf-bar { background: var(--cf-warm); }
.cf-cold .cf-bar { background: var(--cf-cold); }

.cf-word,
.cf-rank { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.cf-word small { font-weight: 500; font-size: .72rem; opacity: .8; margin-left: .3rem; text-transform: uppercase; }
.cf-rank { font-variant-numeric: tabular-nums; }

.cf-row.is-title { box-shadow: inset 0 0 0 2px var(--cf-accent); }

.cf-clues {
	display: grid;
	gap: .35rem;
	margin: 0 0 1rem;
	padding: .75rem .9rem;
	background: var(--cf-surface);
	border-left: 3px solid var(--cf-accent);
	border-radius: 0 var(--cf-radius) var(--cf-radius) 0;
}

.cf-clues[hidden] { display: none; }
.cf-clue { display: flex; gap: .6rem; align-items: baseline; }
.cf-clue dt { flex: 0 0 6.5rem; color: var(--cf-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.cf-clue dd { margin: 0; font-weight: 600; letter-spacing: .03em; word-break: break-word; }

.cf-actions { flex-wrap: wrap; }

.cf-row.is-last { box-shadow: 0 0 0 2px var(--cf-text); }

.cf-actions {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.25rem;
}

.cf-result {
	text-align: center;
	margin: .5rem 0 1.25rem;
	padding: 1.25rem 1rem;
	border-radius: var(--cf-radius);
	background: var(--cf-surface);
	border: 1px solid rgba(242, 179, 61, .35);
}

.cf-result[hidden] { display: none; }
.cf-result-kicker { margin: 0; color: var(--cf-muted); }
.cf-result-title { margin: .35rem 0 .15rem; color: var(--cf-accent); font-size: 1.6rem; line-height: 1.2; }
.cf-result-sub { margin: 0 0 1rem; color: var(--cf-muted); font-size: .9rem; }
.cf-result-next { margin: 1rem 0 0; color: var(--cf-muted); font-size: .88rem; }

.cf-top { margin-top: 1rem; text-align: left; }
.cf-top summary { cursor: pointer; color: var(--cf-accent); font-weight: 600; text-align: center; }
.cf-top ol { list-style: none; margin: .75rem 0 0; padding: 0; columns: 2; column-gap: 1rem; }
.cf-top li { padding: .2rem 0; break-inside: avoid; }
.cf-top li span { display: inline-block; min-width: 1.8rem; color: var(--cf-muted); font-variant-numeric: tabular-nums; }

.cf-empty { text-align: center; padding: 2rem 0 1rem; }
.cf-small { color: var(--cf-muted); font-size: .9rem; }

.cf-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 420px) {
	.cf-game { padding: 1.25rem 1rem; }
	.cf-form { flex-direction: column; }
	.cf-top ol { columns: 1; }
}

/* ---------- Abas dos jogos [cinema_jogos] ---------- */
.cf-hub { max-width: 1000px; margin: 1.5rem auto; }
.cf-hub .cf-game { margin-top: 0; }

.cf-tabs {
	display: flex;
	gap: .35rem;
	max-width: 560px;
	margin: 0 auto 1rem;
	padding: .35rem;
	background: #14110f;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.cf-tab {
	flex: 1;
	min-width: 0;
	padding: .7rem 1rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #a89c8f;
	font: inherit;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.cf-tab:hover { color: #f4ede4; }
.cf-tab.is-active { background: #f2b33d; color: #1b1409; }
.cf-tab:focus-visible { outline: 2px solid #f2b33d; outline-offset: 2px; }
.cf-tab-panel[hidden] { display: none; }

.cf-tab-short { display: none; }

@media (max-width: 520px) {
	.cf-tab { padding: .6rem .5rem; font-size: .92rem; }
	.cf-tab-long { display: none; }
	.cf-tab-short { display: inline; }
}