/* Obrazovka: obraz Macu na atramentovom pozadí, stav na lístku papiera. Farby z TITAM brandu. */

@font-face {
	font-family: 'Archivo';
	src: url('/fonts/archivo-latin-wdth-normal.woff2') format('woff2');
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	src: url('/fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2');
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'IBM Plex Mono';
	src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'IBM Plex Mono';
	src: url('/fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--paper: #fcfcfa;
	--ink: #16205a;
	--pencil: #5b6288;
	--marker: #ffe83d;
	--red: #e5382e;
	--line: #dce3f0;

	--sans: 'Archivo', system-ui, sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--edge: max(12px, env(safe-area-inset-top));
	--side: max(12px, env(safe-area-inset-left));

	color-scheme: dark;
}

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

html,
body {
	height: 100%;
	margin: 0;
}

body {
	background: var(--ink);
	color: var(--ink);
	font-family: var(--sans);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

.stage {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
}

/* Obraz sa ukáže až keď naozaj hrá, dovtedy je vidno lístok so stavom. */
video {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.25s;
}

.stage[data-live='true'] video {
	opacity: 1;
}

/* Video s opacity 0 má vlastnú vrstvu nad bežnými prvkami, bez z-indexu by zachytávalo kliky na lístok. */
.card {
	position: relative;
	z-index: 1;
	grid-area: 1 / 1;
	width: min(26rem, calc(100% - 2rem));
	padding: 1.25rem 1.4rem 1.4rem 1.6rem;
	background: var(--paper);
	border-left: 3px solid var(--red);
	border-radius: 4px;
}

.card[hidden] {
	display: none;
}

.card-kicker {
	margin: 0;
	font-family: var(--mono);
	font-size: 0.78rem;
	color: var(--pencil);
}

.card h1 {
	margin: 0.4rem 0 0.55rem;
	font-size: clamp(1.6rem, 7vw, 2.1rem);
	font-weight: 850;
	font-stretch: 125%;
	line-height: 1.05;
	text-wrap: balance;
}

#card-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--pencil);
}

/* Párovací kód: zvýrazňovač, ako dôležité slovo v zošite. */
.code {
	justify-self: start;
	width: fit-content;
	margin: 1rem 0 0;
	padding: 0.2em 0.35em;
	background: var(--marker);
	font: 400 2.2rem/1 var(--mono);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.code[hidden],
.setup[hidden],
.action[hidden] {
	display: none;
}

.setup {
	display: grid;
	gap: 0.5rem;
	margin-top: 1rem;
}

.setup label {
	font-size: 0.85rem;
	font-weight: 650;
}

.setup input {
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--pencil);
	border-radius: 4px;
	background: var(--paper);
	color: var(--ink);
	font: 400 1.1rem/1.2 var(--mono);
}

.setup button,
.action {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border: 0;
	border-radius: 4px;
	background: var(--ink);
	color: var(--paper);
	font: 700 1rem/1 var(--sans);
	cursor: pointer;
}

.setup button {
	margin-top: 0.25rem;
}

.card :focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.chip {
	position: absolute;
	top: var(--edge);
	left: var(--side);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font: 650 0.85rem/1 var(--sans);
	cursor: pointer;
	transition: opacity 0.3s;
}

.chip[data-hidden='true'] {
	opacity: 0;
	pointer-events: none;
}

.dot {
	width: 0.6rem;
	height: 0.6rem;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	background: var(--marker);
}

.chip[data-state='ok'] .dot {
	background: var(--ink);
}

.chip[data-state='bad'] .dot {
	border-color: var(--red);
	background: var(--red);
}

.panel {
	position: absolute;
	top: calc(var(--edge) + 2.75rem);
	left: var(--side);
	display: grid;
	gap: 0.7rem;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper);
}

.panel[hidden] {
	display: none;
}

.stats {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.35rem 1.25rem;
	margin: 0;
	font: 0.78rem/1.3 var(--mono);
}

.stats:empty {
	display: none;
}

.link {
	justify-self: start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--red);
	font: 650 0.85rem/1 var(--sans);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.stats dt {
	color: var(--pencil);
}

.stats dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	video,
	.chip {
		transition: none;
	}
}