main[data-state="playing"] {
	grid-template-columns: 1fr 3fr 1fr;
	grid-template-areas:
		"action-prev header action-next"
		"action-prev term action-next"
		"action-prev action-reveal action-next";
}
main:not([data-state="landing"]) .only-not-landing {
	display: initial;
}
main:not([data-state="landing"]) .only-landing {
	display: none;
}
main[data-state="playing"] .only-not-playing {
	display: none;
}

main[data-state="playing"] .only-playing {
	display: initial;
}
body:not([data-state="landing"]) > header,
body:not([data-state="landing"]) > footer {
	display: none;
}
#action-reveal {
	grid-area: action-reveal;
}
#full-list dl {
	margin: auto;
	width: fit-content;
}
dt.term {
	font-weight: bold;
}
dd.explanation:not(:last-child) {
	margin-bottom: 1em;
}

dialog[open] {
	display: grid;
}
dialog::backdrop {
	backdrop-filter: blur(20px);
}

.explanation {
	font-size: clamp(2vw, 42px, 5em);
}

main[data-state="listing"] #term,
main[data-state="listing"] #action-show {
	display: none;
}
main[data-state="listing"] #full-list {
	display: initial;
}

main[data-state="playing"] > #bottom-buttons {
	display: flex;
}

#action-restart {
	display: none;
}