/* TimeMyMeeting.com v2 — a post-it note and a notepad on a meeting-room whiteboard.
   Plain CSS (native nesting, custom properties); no framework, no build. */

@font-face {
	font-family: 'Nothing You Could Do';
	src: url('../fonts/NothingYouCouldDo-Regular.woff') format('woff');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque-Regular.woff') format('woff');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque-Bold.woff') format('woff');
	font-weight: 700;
	font-display: swap;
}

:root {
	--board: #eef2f5;
	--board-edge: #dfe5eb;
	--canary: #ffe97a;
	--canary-deep: #fcd95a;
	--pink: #ffb8cb;
	--pink-deep: #ffa3bb;
	--notepad: #fdfdfb;
	--rule: rgb(78 130 196 / 26%);
	--margin-line: rgb(215 66 58 / 45%);
	--ink: #1e2b4a;
	--ink-soft: #3d4a68;
	--muted: #4a5568;
	--red: #b8312b;
	--green: #23804f;

	/* Handwriting is only for item names (the things meetings are compared to) */
	--hand: 'Nothing You Could Do', 'Segoe Print', 'Bradley Hand', cursive;
	--sans: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	color-scheme: light;
}

/* ---- Base ---- */
*, *::before, *::after {box-sizing: border-box;}
[hidden] {display: none !important;}

/* Time-of-day desk lighting (set by seasonal.js). Deliberately subtle; only the desk changes. */
html {
	--desk-tint: transparent;
	--desk-light: rgb(255 255 255 / 55%);
	--desk-vignette: rgb(30 43 74 / 12%);
	--light-x: 22%;
}
html[data-daypart="dawn"] {--desk-tint: rgb(255 196 160 / 5%); --desk-light: rgb(255 238 224 / 55%); --light-x: 14%;}
html[data-daypart="golden"] {--desk-tint: rgb(255 176 90 / 6%); --desk-light: rgb(255 228 184 / 50%); --desk-vignette: rgb(60 40 30 / 14%); --light-x: 80%;}
html[data-daypart="evening"] {--desk-tint: rgb(40 52 92 / 6%); --desk-light: rgb(255 216 164 / 40%); --desk-vignette: rgb(20 28 56 / 20%); --light-x: 74%;}
html[data-daypart="night"] {--desk-tint: rgb(24 32 72 / 9%); --desk-light: rgb(255 210 150 / 32%); --desk-vignette: rgb(16 22 48 / 24%); --light-x: 74%;}

html {
	min-height: 100%;
	overflow-x: clip; /* the coffee stain may hang off the edge of the screen */
	/* The desk (on html so it covers the whole page): a pool of light from the top left and
	   darker edges over a seamless whitewashed-wood tile (img/desk.jpg) */
	background:
		linear-gradient(var(--desk-tint), var(--desk-tint)) no-repeat,
		radial-gradient(ellipse 70% 55% at var(--light-x) 8%, var(--desk-light), transparent 70%) no-repeat,
		radial-gradient(ellipse 120% 90% at 50% 40%, transparent 50%, var(--desk-vignette) 100%) no-repeat,
		url('../../img/desk.jpg') 0 0 / 512px 512px repeat #eceef0;
}

body {
	margin: 0;
	min-height: 100vh;
	padding: clamp(20px, 4vw, 44px) 16px 0;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	overflow-x: clip;
}

p, h1, h2 {margin: 0;}
a {color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px;}
a:hover {color: var(--red);}
:focus-visible {outline: 3px solid rgb(30 43 74 / 55%); outline-offset: 3px; border-radius: 4px;}
code {font-family: inherit; font-weight: 700; color: var(--ink);}

.icon {width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;}
.icon-sprite {position: absolute; width: 0; height: 0; overflow: hidden;}

/* ---- Header / logo ---- */
.site-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: clamp(26px, 5vw, 48px);
	text-align: center;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ink);
	text-decoration: none;

	&:hover {color: var(--ink);}
	&:hover .brand-mark {transform: rotate(-6deg) scale(1.06);}
}
.brand-mark {width: clamp(56px, 9vw, 72px); height: clamp(56px, 9vw, 72px); transition: transform 0.25s ease;}
.brand-name {font-size: clamp(30px, 5.6vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1;}
.brand-tld {font-weight: 400; color: var(--muted);}
.tagline {font-size: clamp(17px, 2.6vw, 21px); color: var(--ink-soft);}

/* ---- Desk layout: post-it, notepad, idea note ---- */
.board {width: min(100%, 1000px); margin-inline: auto;}

.desk {
	position: relative; /* no z-index: the coffee stain must blend with the board */
	display: grid;
	grid-template-columns: minmax(0, 600px);
	justify-content: center;
	gap: 34px;

	@media (min-width: 1000px) {
		grid-template-columns: minmax(0, 600px) 300px;
		grid-template-areas: 'main pad' 'foot .';
		column-gap: 52px;
		align-items: start;
		padding-bottom: 220px; /* the idea note hangs below the post-it (transforms take no space; padding, unlike margin, can't collapse away) */

		& .note-main, & .bingo-card {grid-area: main;}
		& .pad-column {grid-area: pad; margin: 26px 0 0 -64px; position: relative; z-index: 1;} /* notepad tucked slightly over the post-it's right edge */
		& .desk-links {grid-area: foot; justify-self: start; flex-direction: column; align-items: flex-start; margin: 40px 0 0 10px;} /* stacked: stays left of the pink note */
		& .note-idea {grid-area: main; align-self: end; justify-self: end;}
	}
}

/* ---- Coffee stain on the board, peeking out from under the note ---- */
.coffee-stain {
	position: absolute;
	top: -100px;
	left: -150px;
	width: 470px;
	aspect-ratio: 1;
	background: url('../../img/stain.jpg') no-repeat center / contain;
	mix-blend-mode: multiply;
	opacity: 0.75;
	transform: rotate(-24deg);
	pointer-events: none;

	@media (max-width: 999px) {top: -60px; left: auto; right: -120px; width: 300px;}
}

/* Seasonal prop, tossed on the desk at the post-it's top-left corner */
.desk-prop {
	position: absolute;
	z-index: 3;
	top: -34px;
	left: -36px;
	width: 70px;
	height: 70px;
	pointer-events: none;
	filter: drop-shadow(0 3px 3px rgb(30 43 74 / 30%));

	& svg {width: 100%; height: 100%; display: block;}
	@media (max-width: 999px) {top: -22px; left: -10px; width: 50px; height: 50px;}
}
.desk {position: relative;}

/* ---- Paper ---- */
/* Post-its: the paper itself is ::before; ::after is a skewed shadow tucked beneath one bottom
   corner, so that corner looks like it's peeling up off the desk. (Both sit inside the note's own
   stacking context, behind its content; the note element has no background of its own.) */
.note {
	position: relative;
	isolation: isolate;
	color: var(--ink);
	box-shadow: 0 1px 1px rgb(30 43 74 / 10%), 0 3px 5px -2px rgb(30 43 74 / 16%);

	&::before {content: ''; position: absolute; inset: 0; z-index: -1; background: var(--paper); border-radius: inherit;}
	&::after {
		content: '';
		position: absolute;
		z-index: -2;
		bottom: 12px;
		width: 50%;
		height: 24%;
		box-shadow: 0 18px 14px -3px rgb(30 43 74 / 42%);
	}
}

/* Notepad: flat on the desk, so a tight, crisp shadow */
.notepad {
	position: relative;
	color: var(--ink);
	box-shadow: 0 1px 1px rgb(30 43 74 / 18%), 0 2px 3px rgb(30 43 74 / 12%), 0 5px 8px -5px rgb(30 43 74 / 28%);
}

.note-main {
	aspect-ratio: 1 / 1; /* a real post-it is square; grows if content needs it */
	container-type: inline-size; /* the ENDED stamp sizes to the note */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 7vw, 64px) clamp(22px, 6vw, 56px) clamp(32px, 6vw, 52px);
	--paper:
		linear-gradient(to bottom, rgb(30 43 74 / 5%), rgb(30 43 74 / 0%) 15%), /* glue strip */
		linear-gradient(60deg, rgb(255 255 255 / 30%), transparent 14%), /* light on the lifted corner */
		radial-gradient(circle at 0% 100%, var(--canary-deep), transparent 40%), /* bottom-left curling up */
		linear-gradient(172deg, #fff08f, var(--canary) 55%);
	transform: rotate(-1.5deg);

	border-bottom-left-radius: 46% 12px; /* the lifted corner bends the bottom edge */

	&::after {left: 10px; transform: rotate(-5deg) skewX(-18deg); transform-origin: left bottom;}

	@media (max-width: 560px) {aspect-ratio: auto; min-height: 440px;}
}

.main-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: opacity 0.3s ease;

	.paused & {opacity: 0.55;}
}

/* ---- Idle (start) screen ---- */
.idle-lead, .longer-than {font-size: clamp(18px, 3vw, 22px); color: var(--ink-soft);}

.teaser, .the-thing {
	margin-top: 8px;
	font-family: var(--hand);
	font-size: clamp(30px, 6.4vw, 46px);
	line-height: 1.15;
	overflow-wrap: anywhere;
	text-wrap: balance;

	& small {
		display: block;
		margin-top: 10px;
		font-family: var(--sans);
		font-size: 16px;
		font-weight: 700;
		color: var(--muted);
	}
}
.teaser {min-height: 2.6em; cursor: pointer; border-radius: 6px; -webkit-tap-highlight-color: transparent;}
.teaser:hover {color: var(--ink-soft);}
.teaser.write {animation: write 0.9s ease-out both;}
.the-thing:empty {display: none;}
.the-thing small {display: none;} /* length under the item: hidden for now (delete this line to bring it back) */

@keyframes write {
	from {clip-path: inset(0 100% 0 0); opacity: 0.4;}
	to {clip-path: inset(0 0 0 0); opacity: 1;}
}

.timing .idle-only, .paused .idle-only, .ended .idle-only {display: none;}

/* ---- Rubber stamps: "ENDED" on the summary post-it, "BINGO!" on the bingo card ---- */
/* JS sets --stamp-angle (stamp.js) so each press lands at a different tilt */
.stamp {
	position: absolute;
	top: clamp(28px, 9cqi, 54px);
	right: clamp(16px, 6cqi, 36px);
	z-index: 2;
	display: none;
	padding: 0.1em 0.38em 0.04em;
	border: 0.11em solid currentColor;
	border-radius: 0.2em;
	outline: 0.05em solid currentColor;
	outline-offset: 0.09em;
	font-size: clamp(28px, 9cqi, 56px); /* cqi: the post-it's width, so it always fits on it */
	pointer-events: none;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.1;
	text-transform: uppercase;
	color: rgb(184 49 43 / 82%);
	mix-blend-mode: multiply;
	transform: rotate(var(--stamp-angle, -12deg));
	/* worn ink: knock out speckles */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E");

	.ended & {display: block; animation: stamp 0.16s cubic-bezier(0.55, 0, 1, 0.45) both; /* pressed straight down: no bounce */}
}
@keyframes stamp {
	0% {opacity: 0; transform: rotate(var(--stamp-angle, -12deg)) scale(1.35);}
	100% {opacity: 1; transform: rotate(var(--stamp-angle, -12deg)) scale(1);}
}
}

/* ---- Timing ---- */
.time-block {
	display: flex;
	flex-direction: column;
	align-items: center;

	.timing &, .paused &, .ended & {
		margin-top: 24px;
		padding-top: 32px;
		/* hand-drawn squiggle divider */
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 7c8-6 14-6 20 0s12 6 20 0 14-6 20 0 12 6 20 0 14-6 20 0 10 5 16 1' fill='none' stroke='%231e2b4a' stroke-opacity='.35' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat top center / 120px 12px;
	}
}

.going-on-for {font-size: 15px; color: var(--muted);}

.time-indicator {
	font-size: clamp(26px, 5vw, 40px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
}

.started-time {
	margin-top: 6px;
	font-size: 14px;

	& a {color: var(--muted); text-decoration: none;}
	& a:hover, & a:focus-visible {color: var(--ink); text-decoration: underline;}
}

/* ---- Notepad: ruled paper (blue rules, red margin line) ---- */
.notepad {
	--line: 28px;
	display: flex;
	flex-direction: column;
	gap: var(--line); /* hidden sections leave no gap, so text stays on the rules */
	padding: var(--line) 20px var(--line) 50px;
	font-size: 15px;
	line-height: var(--line);
	background:
		linear-gradient(to right, transparent 36px, var(--margin-line) 36px 37.5px, transparent 37.5px),
		repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line)),
		var(--notepad);
	transform: rotate(1.25deg);

}

.pad-section:empty {display: none;}

/* End-of-meeting actions (summary): same rhythm as the controls */
.result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 10px;
	padding: 8px 0;

	& .btn {min-height: 40px; padding: 7px 18px;}
}
.ended .social, .ended .btn-share {display: none;}

.pad-heading {font-size: 15px; font-weight: 700; line-height: var(--line); color: var(--ink);}
.notepad p {color: var(--ink-soft);}

/* Start-time picker: label (1 line) + 40px row with 8px above and below (2 lines) + note (1 line) */
.start-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 10px;
	padding: 8px 0;

	& input {
		height: 40px;
		padding: 0 10px;
		border: 1.5px solid rgb(30 43 74 / 35%);
		border-radius: 8px;
		font: inherit;
		font-weight: 700;
		color: var(--ink);
		background: #fff;

		&:focus {outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(30 43 74 / 18%);}
	}
	& .btn {min-height: 40px; padding: 7px 18px;}
}

.next-milestone {
	& .pad-heading {color: var(--muted); font-weight: 400;}
	& strong {display: block; font-family: var(--hand); font-size: 22px; font-weight: 400; line-height: var(--line); color: var(--ink);}
	& small {display: block; font-size: 14px; line-height: var(--line); color: var(--muted);}
}

/* "Already outlasted": earlier milestones, crossed out in red marker, one per ruled line */
.outlasted-list {
	margin: 0;
	padding: 0;
	list-style: none;

	& li {
		position: relative;
		display: flex;
		align-items: baseline;
		gap: 6px;
		cursor: default;
		outline-offset: 1px;
		line-height: var(--line);
		white-space: nowrap;
	}
	& .outlasted-number {flex: none; min-width: 1.6em; font-size: 13px; font-weight: 700; color: var(--muted); text-align: right;}
	& .outlasted-name {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: var(--hand);
		font-size: 19px;
		color: var(--ink-soft);
		text-decoration: line-through;
		text-decoration-color: rgb(184 49 43 / 70%);
		text-decoration-thickness: 2px;
	}
	& small {flex: none; font-size: 12px; color: var(--muted);}

	/* Instant tooltip with the full name and length (the browser's title tooltip is slow) */
	& li[data-tip]:hover::after, & li[data-tip]:focus-visible::after {
		content: attr(data-tip);
		position: absolute;
		z-index: 5;
		bottom: calc(100% - 2px);
		left: 1.6em;
		width: max-content;
		max-width: 260px;
		padding: 6px 10px;
		border-radius: 6px;
		font-size: 13px;
		line-height: 1.35;
		white-space: normal;
		color: #fff;
		background: var(--ink);
		box-shadow: 0 4px 12px -2px rgb(30 43 74 / 35%);
		pointer-events: none;
	}
}

/* Progress toward the next milestone: one ruled line */
.progress {
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--line);
}
.progress-track {
	flex: 1;
	max-width: 140px;
	height: 9px;
	overflow: hidden;
	border: 1.5px solid rgb(30 43 74 / 35%);
	border-radius: 999px;
	background: #fff;
}
.progress-fill {display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; will-change: transform;}
.progress-label {font-size: 13px; color: var(--muted); white-space: nowrap;}

/* Controls only exist while a meeting is being timed. Sized to the 28px rules:
   40px buttons + 8px above and below = two lines (16px between wrapped rows). */
.controls {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 10px;
	padding: 8px 0;

	& .btn {min-height: 40px; padding: 7px 18px;}
}
body:not(.timing):not(.paused) .controls {display: none;}

.social {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
	font-size: 14px;
	color: var(--muted);

	.social-label {width: 100%; font-weight: 700; color: var(--ink);}
	& a {color: var(--ink-soft);}
	& a:hover, & a:focus-visible {color: var(--red);}
}

/* Notepad column: the notepad, with the native share button on the desk below it */
.pad-column {display: flex; flex-direction: column; gap: 22px;}
.btn-share {align-self: flex-end; margin-right: 6px; box-shadow: 0 2px 6px -2px rgb(30 43 74 / 25%);}

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	min-height: 44px;
	padding: 10px 20px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	background: var(--ink);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, color 0.15s ease;

	&:active {transform: translateY(2px);}
}

/* The big one: pressed like a rubber stamp */
.btn-start {
	margin-top: 28px;
	padding: 16px 34px;
	font-size: clamp(19px, 3.4vw, 22px);
	box-shadow: 0 5px 0 #0f1830, 0 10px 18px -6px rgb(30 43 74 / 55%);

	&:hover {background: #26365c;}
	&:active {transform: translateY(4px); box-shadow: 0 1px 0 #0f1830, 0 4px 8px -4px rgb(30 43 74 / 55%);}
	& .icon {width: 1.25em; height: 1.25em;}
}

.btn-ink {
	box-shadow: 0 3px 0 #0f1830;
	&:hover {background: #26365c;}
	&:active {box-shadow: 0 1px 0 #0f1830;}
}

.btn-pause {
	color: var(--red);
	border-color: var(--red);
	background: #fff;
	&:hover {color: #fff; background: var(--red);}
}

.btn-quiet {
	color: var(--ink);
	background: #fff;
	border-color: rgb(30 43 74 / 35%);
	&:hover {border-color: var(--ink);}
	&.success {color: var(--green); border-color: var(--green);}
	&.error {color: var(--red); border-color: var(--red);}
}

.btn-danger {
	background: var(--red);
	border-color: var(--red);
	box-shadow: 0 3px 0 #7d211d;
	&:hover {background: #a02a25;}
	&:active {box-shadow: 0 1px 0 #7d211d;}
}

.btn-small {min-height: 38px; padding: 7px 16px; font-size: 14px;}
.btn-start-now {margin-top: 16px;}

/* ---- Idea note ---- */
.note-idea {
	justify-self: center;
	width: min(100%, 300px);
	padding: 32px 24px 24px;
	--paper:
		linear-gradient(to bottom, rgb(30 43 74 / 5%), rgb(30 43 74 / 0%) 18%),
		linear-gradient(-60deg, rgb(255 255 255 / 30%), transparent 16%),
		radial-gradient(circle at 100% 100%, var(--pink-deep), transparent 42%), /* bottom-right curling up */
		linear-gradient(172deg, #ffc8d7, var(--pink) 60%);
	transform: rotate(-2.5deg);

	border-bottom-right-radius: 46% 10px;

	&::after {right: 10px; transform: rotate(5deg) skewX(18deg); transform-origin: right bottom;}

	/* Wide screens: stuck over the post-it's bottom-right corner, below the notepad */
	@media (min-width: 1000px) {width: 280px; transform: translate(-4%, 84%) rotate(4deg);}
}

.idea-form {display: flex; flex-direction: column; gap: 10px;}
.idea-heading {font-size: 20px; font-weight: 700; line-height: 1.2;}
.idea-label {font-size: 14px; line-height: 1.4; color: var(--ink-soft);}

.idea-form input {
	width: 100%;
	padding: 8px 2px 6px;
	border: 0;
	border-bottom: 2px solid rgb(30 43 74 / 45%);
	border-radius: 0;
	font-family: var(--hand); /* the idea is an item name */
	font-size: 20px;
	color: var(--ink);
	background: transparent;

	&::placeholder {color: rgb(30 43 74 / 60%);}
	&:focus {outline: 0; border-bottom-color: var(--ink);}
	&:focus-visible {box-shadow: 0 3px 0 -1px var(--ink);}
}

.idea-form .btn {align-self: flex-start; margin-top: 4px;}
#idea-submission-button.success {background: var(--green); border-color: var(--green); box-shadow: 0 3px 0 #145232;}

/* ---- Meeting Bingo page: a printed bingo card (card stock, red frame, B-I-N-G-O header) ---- */
.bingo-page .desk {@media (min-width: 1000px) {padding-bottom: 80px;}}
.bingo-card {
	--frame: #c62f3c; /* card stock and dauber colors are picked at random by bingo.js */
	--dab: 214 51 132;
	--grid-line: rgb(30 43 74 / 55%);
	container-type: inline-size; /* the BINGO! stamp sizes to the card */
	position: relative;
	isolation: isolate;
	padding: 0 clamp(8px, 1.8vw, 14px) clamp(8px, 1.8vw, 14px);
	border-radius: 14px;
	color: var(--ink);
	background:
		linear-gradient(115deg, rgb(255 255 255 / 18%), transparent 40%),
		var(--frame);
	transform: rotate(-1deg);
	/* card stock lies flat: tight shadow like the notepad */
	box-shadow: 0 1px 1px rgb(30 43 74 / 22%), 0 2px 3px rgb(30 43 74 / 14%), 0 7px 10px -6px rgb(30 43 74 / 34%);
}
.bingo-card-top {
	padding: clamp(10px, 2vw, 14px) 4px 2px;
	color: #fff;
}
.bingo-title {margin: 0; font-size: clamp(17px, 3.4vw, 22px); font-weight: 700; letter-spacing: 0.01em;}
.card-number {margin: 0; padding: 6px 4px 0; font-size: clamp(10px, 1.9vw, 12px); font-variant-numeric: tabular-nums; color: #fff; opacity: 0.85;}
.bingo-letters {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	& span {
		padding: 2px 0 4px;
		font-size: clamp(30px, 7vw, 50px);
		font-weight: 700;
		line-height: 1;
		text-align: center;
		color: #fff;
		text-shadow: 0 2px 0 rgb(0 0 0 / 18%);
	}
}
.bingo-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5px;
	padding: 1.5px;
	border-radius: 4px;
	background: var(--grid-line); /* the gaps are the printed grid lines */
}
.bingo-square {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 5px;
	border: 0;
	font: inherit;
	font-size: clamp(9.5px, 2.15vw, 13.5px);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
	overflow-wrap: anywhere;
	color: var(--ink);
	background: #fffdf6; /* card stock */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;

	&:hover {background: #fff6dc;}
	&:focus-visible {outline: 3px solid var(--ink); outline-offset: -3px; z-index: 1;}
	/* Marked: a dab of translucent dauber ink, each a little different (bingo.js sets the --dab-* values) */
	&[aria-pressed="true"]::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: var(--dab-size, 82%);
		aspect-ratio: 1;
		border-radius: var(--dab-shape, 50%);
		background: radial-gradient(circle at 40% 36%, rgb(var(--dab) / 46%), rgb(var(--dab) / 62%) 72%, rgb(var(--dab) / 78%));
		opacity: var(--dab-alpha, 1);
		mix-blend-mode: multiply;
		transform: translate(calc(-50% + var(--dab-x, 0%)), calc(-50% + var(--dab-y, 0%))) rotate(var(--dab-rot, 0deg));
		pointer-events: none;
	}
	&.win {background: #fff8e0;}

	/* The free space: always marked. The joke on top, "Free" dabbed in dauber ink below it */
	&.free {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.35em;
		font-weight: 400;
		font-style: italic;
		font-size: clamp(8px, 1.75vw, 11.5px);
		color: var(--ink-soft);
		& strong {
			padding: 0.12em 0.6em 0.16em;
			border-radius: 999px;
			font-style: normal;
			font-size: clamp(11px, 2.6vw, 17px);
			font-weight: 700;
			color: #fff;
			background: rgb(var(--dab) / 80%);
			transform: rotate(-6deg);
		}
	}

	@media (max-width: 560px) {aspect-ratio: auto; min-height: 68px; padding: 4px 3px;}
}
.bingo-status {margin-top: 10px; font-size: 15px; color: var(--muted); &:empty {display: none;}}
/* BINGO! lands big across the middle of the card and stays (it doesn't block taps) */
.bingo-stamp {
	top: 54%;
	left: 50%;
	right: auto;
	translate: -50% -50%;
	z-index: 3;
	font-size: clamp(54px, 17cqi, 104px);
	white-space: nowrap;

	&.stamped {display: block; animation: stamp 0.16s cubic-bezier(0.55, 0, 1, 0.45) both; /* pressed straight down: no bounce */}
	&.quiet {animation: none;}
}
.bingo-actions {display: flex; flex-wrap: wrap; gap: 16px 10px; padding: 8px 0; & .btn {min-height: 40px; padding: 7px 18px; text-decoration: none;}}

/* Links on the desk under the timer's post-it: Pop out + Meeting Bingo */
.desk-links {display: flex; flex-wrap: wrap; gap: 10px; justify-self: center; & .btn {text-decoration: none; box-shadow: 0 2px 6px -2px rgb(30 43 74 / 25%);}}

/* ---- Result image modal ---- */
.result-dialog {
	width: min(92vw, 860px);
	padding: 22px;
	border: 0;
	border-radius: 14px;
	color: var(--ink);
	background: var(--notepad);
	box-shadow: 0 30px 60px -20px rgb(15 24 48 / 55%);

	&::backdrop {background: rgb(30 43 74 / 45%); backdrop-filter: blur(3px);}
	&[open] {animation: dialog-in 0.2s ease-out;}
}
.result-dialog {position: relative;}
.result-dialog-head {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 44px 14px 0;}
.result-dialog-title {font-size: 18px; font-weight: 700;}
.dialog-x {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	color: var(--ink);
	background: transparent;
	cursor: pointer;

	&:hover {background: rgb(30 43 74 / 8%);}
	& .icon {width: 20px; height: 20px;}
}
/* Size picker: one small segmented control, so the modal stays uncluttered */
.size-picker {
	display: inline-flex;
	padding: 2px;
	border: 1.5px solid rgb(30 43 74 / 22%);
	border-radius: 999px;

	& button {
		padding: 4px 12px;
		border: 0;
		border-radius: 999px;
		font: inherit;
		font-size: 13px;
		font-weight: 700;
		color: var(--ink-soft);
		background: transparent;
		cursor: pointer;
	}
	& button[aria-pressed="true"] {color: #fff; background: var(--ink);}
}
.result-image {display: block; max-width: 100%; max-height: min(62vh, 640px); width: auto; height: auto; margin: 0 auto; border-radius: 6px; box-shadow: 0 2px 10px rgb(30 43 74 / 18%); background: var(--board);}
.result-dialog-actions {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; & .btn {text-decoration: none;}}
@keyframes dialog-in {from {opacity: 0; transform: translateY(8px) scale(0.98);}}

/* ---- Footer ---- */
.site-footer {
	margin: 0 auto 32px;
	font-size: 13px;
	text-align: center;
	color: var(--muted);

	& a {color: var(--muted);}
	& a:hover {color: var(--ink);}
}

/* ---- Motion ---- */
.tug {animation: tug 0.5s cubic-bezier(0.445, 1.8, 0.36, 0.65);}
@keyframes tug {
	0% {transform: scale(1);}
	25% {transform: scale(1.12);}
}

/* After 2 hours the elapsed time shakes ("intensifies") */
.intensifying .time-block {animation: intensifies 3s infinite ease-out; transform-origin: bottom center;}
@keyframes intensifies {
	0% {transform: translate(5px, 2px);} 5% {transform: translate(-4px, -1px);}
	10% {transform: translate(3px, 3px);} 15% {transform: translate(-1px, -5px);}
	20% {transform: translate(5px, 2px);} 25% {transform: translate(-2px, -3px);}
	30% {transform: translate(4px, 2px);} 35% {transform: translate(-5px, -1px);}
	40% {transform: translate(2px, 3px);} 45% {transform: translate(-4px, -3px);}
	50% {transform: translate(1px, 4px);} 55% {transform: translate(-3px, -3px);}
	60% {transform: translate(4px, 5px);} 65% {transform: translate(-4px, -5px);}
	70% {transform: translate(2px, 5px);} 75% {transform: translate(-5px, -4px);}
	80% {transform: translate(4px, 5px);} 85% {transform: translate(-1px, -5px);}
	90% {transform: translate(4px, 2px);} 95% {transform: translate(-4px, -1px);}
	100% {transform: translate(0, 0);}
}

/* ---- Pop-out mini timer (its own small window) ---- */
body.mini {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 14px 16px 22px;
}
.mini-note {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	max-width: 380px;
	padding: 20px 18px 18px;
	text-align: center;
	--paper:
		linear-gradient(to bottom, rgb(30 43 74 / 5%), rgb(30 43 74 / 0%) 16%),
		radial-gradient(circle at 0% 100%, var(--canary-deep), transparent 40%),
		linear-gradient(172deg, #fff08f, var(--canary) 55%);
	border-bottom-left-radius: 46% 10px;
	transform: rotate(-1deg);

	&::after {left: 10px; transform: rotate(-5deg) skewX(-18deg); transform-origin: left bottom;}
	.paused & {opacity: 0.7;}
}
.mini-lead {font-size: 13px; color: var(--ink-soft);}
.mini-thing {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--hand);
	font-size: 24px;
	line-height: 1.15;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.mini-time {font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;}
.mini-toggle {margin-top: 6px;}

@media (prefers-reduced-motion: reduce) {
	.tug, .teaser.write, .intensifying .time-block, .result-dialog[open], .ended .stamp, .bingo-stamp.stamped {animation: none;}
	.main-content, .btn, .brand-mark {transition: none;}
}

/* ---- ?autostart: big, chrome-free display for embeds (Retro TV) ---- */
.autostart {
	padding: 16px;

	.site-header, .pad-column, .note-idea, .site-footer, .btn-start, .btn-start-now, .desk-links, .desk-prop {display: none;}
	.desk {grid-template-columns: minmax(0, 1400px); grid-template-areas: 'main';}
	.note-main {aspect-ratio: auto; min-height: calc(100vh - 72px); padding: 4vh 5vw;}
	/* Sized by screen height too, so the whole note fits a TV or iframe without scrolling */
	.longer-than {font-size: clamp(22px, min(4vw, 6vh), 60px);}
	.the-thing {
		font-size: clamp(32px, min(7vw, 10vh), 120px);
		& small {display: none;}
	}
	.time-block {margin-top: 2vh; padding-top: 3vh;}
	.time-indicator {font-size: clamp(22px, min(4vw, 6vh), 56px);}
}