/* #region Timewell styles */
/* - A night look, easy on the eyes: a deep indigo silk sheet behind dark frosted glass panels. */
/* - The sheet fills the whole window, and panels float above it. */
/* #endregion */




/* #region The page */
:root
{
	--ink: #ece6ff;
	--ink-soft: #a99fd2;
	--amber: #ffbe6a;
	--violet: #d9a6ff;
	--glass: rgba(26, 20, 52, 0.62);
	--glass-edge: rgba(170, 150, 255, 0.22);
	--shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
	--title-font: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
	--body-font: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

html,
body
{
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: #100c24;
	color: var(--ink);
	font-family: var(--body-font);
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

/* The sheet's canvas covers the window, and touch on it never scrolls nor zooms. */
#sheet
{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: crosshair;
}
/* #endregion */


/* #region Frosted glass */
.glass
{
	background: var(--glass);
	border: 1px solid var(--glass-edge);
	border-radius: 18px;
	box-shadow: var(--shadow);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
}
/* #endregion */


/* #region The clocks */
#clocks
{
	position: fixed;
	top: max(10px, env(safe-area-inset-top));
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 22px;
	row-gap: 2px;
	padding: 8px 18px 9px;
	pointer-events: none;
	text-align: center;
}

.clock
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.clock-name
{
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.clock-reading
{
	font-family: var(--title-font);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.05;
	font-variant-numeric: lining-nums tabular-nums;
	min-width: 5.2ch;
}

#your-clock-reading
{
	color: var(--amber);
}

.clock-gap
{
	grid-column: 1 / -1;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--violet);
	min-height: 1.3em;
}

.slowing-parts
{
	grid-column: 1 / -1;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

.slowing-parts.is-hidden
{
	display: none;
}
/* #endregion */


/* #region The level's name */
#level-name
{
	position: fixed;
	top: max(10px, env(safe-area-inset-top));
	left: max(10px, env(safe-area-inset-left));
	padding: 8px 14px;
	font-family: var(--title-font);
	font-size: 19px;
	font-weight: 600;
	pointer-events: none;
}

#level-name .level-number
{
	font-variant-numeric: lining-nums;
	color: var(--amber);
	margin-right: 6px;
}
/* #endregion */


/* #region The meters */
#meters
{
	position: fixed;
	bottom: max(10px, env(safe-area-inset-bottom));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 22px;
	padding: 8px 18px;
	pointer-events: none;
}

#meters:empty,
#meters.is-hidden
{
	display: none;
}

.meter
{
	display: flex;
	align-items: center;
	gap: 9px;
}

.meter.is-hidden
{
	display: none;
}

.meter-name
{
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.meter-track
{
	position: relative;
	width: 120px;
	height: 7px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

/* The fill shrinks from the right as the meter drains, by a scale so it never reflows. */
.meter-fill
{
	position: absolute;
	inset: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, #ff9d4a, #ffd27a);
	transform-origin: left center;
}

.meter-fill.fuel
{
	background: linear-gradient(90deg, #8e7bff, #d6b4ff);
}

.meter-reading
{
	min-width: 3.6ch;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
/* #endregion */


/* #region The card */
#card-veil
{
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(6, 4, 16, 0.35);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

/* Hidden panels also leave the keyboard's reach once faded, so Tab and Enter never find a button nobody can see. */
#card-veil.is-showing
{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.35s ease, visibility 0s;
}

#card
{
	width: min(440px, 100%);
	padding: 24px 26px 22px;
	text-align: center;
	transform: translateY(14px) scale(0.97);
	transition: transform 0.45s cubic-bezier(0.2, 1.3, 0.4, 1);
}

#card-veil.is-showing #card
{
	transform: none;
}

#card-kicker
{
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

#card-title
{
	font-variant-numeric: lining-nums;
	margin: 6px 0 4px;
	font-family: var(--title-font);
	font-size: 36px;
	font-weight: 600;
	line-height: 1.05;
}

#card-stars
{
	min-height: 0;
	font-size: 26px;
	letter-spacing: 6px;
	color: var(--amber);
}

#card-stars .is-unearned
{
	color: rgba(255, 255, 255, 0.3);
}

#card-text
{
	margin: 10px 0 18px;
	font-size: 15.5px;
	line-height: 1.5;
	color: #d8d0f4;
}

#card-clocks
{
	margin: -8px 0 18px;
	font-size: 13px;
	font-weight: 800;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

#card-clocks:empty
{
	display: none;
}

#card-buttons
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}
/* #endregion */


/* #region Buttons */
.button
{
	min-width: 120px;
	white-space: nowrap;
	padding: 11px 20px;
	border: 1px solid rgba(200, 180, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--ink);
	font-family: var(--body-font);
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}

.button:hover
{
	background: rgba(255, 255, 255, 0.11);
	border-color: rgba(220, 200, 255, 0.45);
}

.button:active
{
	transform: scale(0.94);
}

.button.is-main
{
	border-color: transparent;
	background: linear-gradient(135deg, #ffb45e, #ff8fb8);
	color: #2a1430;
}

.button:focus
{
	outline: none;
}

.button:focus-visible
{
	box-shadow: 0 0 0 3px rgba(255, 200, 130, 0.55);
}
/* #endregion */


/* #region Notes */
/* - A short note that rises above the sheet's foot to say why something was refused, then fades. */
#note
{
	position: fixed;
	bottom: max(70px, calc(env(safe-area-inset-bottom) + 64px));
	left: 50%;
	max-width: min(440px, calc(100vw - 32px));
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

#note.is-showing
{
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
/* #endregion */


/* #region The pause button */
.round-button
{
	position: fixed;
	top: max(10px, env(safe-area-inset-top));
	right: max(10px, env(safe-area-inset-right));
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	border-radius: 50%;
	color: var(--ink);
	cursor: pointer;
	transition: transform 0.12s ease;
}

.round-button span
{
	width: 4px;
	height: 15px;
	border-radius: 2px;
	background: var(--ink);
}

.round-button:active
{
	transform: scale(0.9);
}

.round-button:focus
{
	outline: none;
}
/* #endregion */


/* #region Showing what fits the screen */
/* - While a menu shows, the playing panels step aside; while playing, the pause button appears. */
body.is-in-menu #clocks,
body.is-in-menu #meters,
body.is-in-menu #level-name
{
	opacity: 0;
	pointer-events: none;
}

#clocks,
#meters,
#level-name
{
	transition: opacity 0.4s ease;
}

#pause-button
{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.12s ease, visibility 0s linear 0.3s;
}

body.is-playing #pause-button
{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s ease, transform 0.12s ease, visibility 0s;
}
/* #endregion */


/* #region Menus */
#menus
{
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
	pointer-events: none;
}

.menu
{
	position: absolute;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1), visibility 0s linear 0.4s;
}

.menu.is-showing
{
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1), visibility 0s;
}

/* The title screen floats on the sheet with no panel, so the sheet stays the star. */
#title-screen
{
	text-align: center;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.game-title
{
	margin: 0;
	font-family: var(--title-font);
	font-size: clamp(64px, 14vw, 128px);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1;
	background: linear-gradient(180deg, #fff6e6 20%, #ffc98a 70%, #ff9fc4);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tagline
{
	margin: 10px 0 30px;
	font-family: var(--title-font);
	font-size: clamp(18px, 3.4vw, 24px);
	font-style: italic;
	color: #d8cff6;
}

.menu-buttons
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.menu-buttons .button
{
	min-width: 210px;
	font-size: 17px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.star-count
{
	min-height: 1.2em;
	margin: 22px 0 0;
	font-size: 13px;
	font-weight: 800;
	color: var(--amber);
}

/* The level select and settings are glass panels that scroll inside themselves when the screen is short. */
#levels-screen,
#settings-screen
{
	width: min(820px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	display: flex;
	flex-direction: column;
	padding: 16px 20px 20px;
	box-sizing: border-box;
}

#settings-screen
{
	width: min(520px, calc(100vw - 32px));
}

.menu-head
{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.menu-head h2
{
	margin: 0;
	font-family: var(--title-font);
	font-size: 32px;
	font-weight: 600;
}

.menu-head .star-count
{
	margin: 0;
	justify-self: end;
}

.button.is-skip
{
	justify-self: end;
}

.button.is-back
{
	justify-self: start;
	min-width: 0;
	padding: 8px 16px;
	font-size: 14px;
}

.chapters,
.settings-list
{
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: rgba(200, 180, 255, 0.35) transparent;
}

.chapters::-webkit-scrollbar,
.settings-list::-webkit-scrollbar
{
	width: 6px;
}

.chapters::-webkit-scrollbar-thumb,
.settings-list::-webkit-scrollbar-thumb
{
	border-radius: 3px;
	background: rgba(200, 180, 255, 0.35);
}

.chapter + .chapter
{
	margin-top: 14px;
}

.chapter-name
{
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.chapter-number
{
	margin-right: 8px;
	font-family: var(--title-font);
	font-size: 16px;
	letter-spacing: 0;
	color: var(--amber);
}

.chapter-tiles
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}

.level-tile
{
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "number title" "number stars" "number best";
	column-gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid rgba(200, 180, 255, 0.18);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--ink);
	font-family: var(--body-font);
	text-align: left;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}

.level-tile:hover:not(.is-locked)
{
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(220, 200, 255, 0.4);
}

.level-tile:active:not(.is-locked)
{
	transform: scale(0.96);
}

.level-tile:focus
{
	outline: none;
}

.level-tile:focus-visible
{
	box-shadow: 0 0 0 3px rgba(255, 200, 130, 0.55);
}

.level-tile.is-locked
{
	opacity: 0.38;
	cursor: default;
}

.tile-number
{
	grid-area: number;
	font-variant-numeric: lining-nums;
	font-family: var(--title-font);
	font-size: 34px;
	font-weight: 600;
	color: var(--amber);
}

.tile-title
{
	grid-area: title;
	font-family: var(--title-font);
	font-size: 20px;
	font-weight: 600;
}

.tile-stars
{
	grid-area: stars;
	font-size: 13px;
	letter-spacing: 3px;
	color: var(--amber);
}

.tile-stars .is-unearned
{
	color: rgba(255, 255, 255, 0.3);
}

.tile-best
{
	grid-area: best;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ink-soft);
}

.setting-row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 2px;
	border-top: 1px solid rgba(200, 180, 255, 0.12);
}

.setting-row:first-child
{
	border-top: none;
}

.setting-words
{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.setting-name
{
	font-size: 16px;
	font-weight: 800;
	white-space: nowrap;
}

.setting-note
{
	font-size: 12.5px;
	color: var(--ink-soft);
}

.setting-switch
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px;
	border: none;
	background: none;
	color: var(--ink);
	font-family: var(--body-font);
	cursor: pointer;
}

.setting-switch:focus
{
	outline: none;
}

.switch-track
{
	position: relative;
	width: 46px;
	height: 26px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.12);
	transition: background 0.25s ease;
}

.setting-switch:focus-visible .switch-track
{
	box-shadow: 0 0 0 3px rgba(255, 200, 130, 0.55);
}

.switch-knob
{
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #e8e0ff;
	transition: transform 0.28s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.setting-switch.is-on .switch-track
{
	background: linear-gradient(135deg, #ffb45e, #ff8fb8);
}

.setting-switch.is-on .switch-knob
{
	transform: translateX(20px);
	background: #fff8ee;
}

.setting-state
{
	min-width: 3.4ch;
	font-size: 14px;
	font-weight: 800;
	text-align: right;
}

.setting-control
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.setting-range
{
	width: 150px;
	accent-color: #ffb45e;
	cursor: pointer;
}
/* #endregion */


/* #region How to Play */
#how-screen
{
	width: min(600px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px 22px 20px;
	box-sizing: border-box;
	text-align: center;
	overflow-y: auto;
}

#how-screen .menu-head
{
	width: 100%;
}

.how-picture
{
	width: 100%;
	height: clamp(130px, 28vh, 220px);
	flex-shrink: 0;
}

.how-title
{
	margin: 8px 0 4px;
	font-family: var(--title-font);
	font-size: 28px;
	font-weight: 600;
}

.how-words
{
	min-height: 4.5em;
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.55;
	color: #d8d0f4;
}

.how-dots
{
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.how-dots span
{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	transition: background 0.3s ease, transform 0.3s ease;
}

.how-dots span.is-current
{
	background: var(--amber);
	transform: scale(1.3);
}

.how-buttons
{
	display: flex;
	justify-content: center;
	gap: 10px;
}

.how-buttons .button:disabled
{
	opacity: 0.35;
	cursor: default;
}
/* #endregion */


/* #region Free Flight's toolbar */
#free-flight-tools
{
	position: fixed;
	bottom: max(10px, env(safe-area-inset-bottom));
	left: 50%;
	transform: translateX(-50%) translateY(16px);
	display: flex;
	gap: 6px;
	padding: 6px;
	border-radius: 999px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 1.3, 0.4, 1), visibility 0s linear 0.4s;
}

#free-flight-tools.is-showing
{
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%);
	pointer-events: auto;
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 1.3, 0.4, 1), visibility 0s;
}

.tool
{
	padding: 9px 16px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--ink-soft);
	font-family: var(--body-font);
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.tool:active
{
	transform: scale(0.92);
}

.tool:focus
{
	outline: none;
}

.tool:focus-visible
{
	box-shadow: 0 0 0 3px rgba(255, 200, 130, 0.55);
}

.tool.is-chosen
{
	background: linear-gradient(135deg, #ffb45e, #ff8fb8);
	color: #2a1430;
}
/* #endregion */


/* #region Short screens */
/* - A phone held sideways: the clocks and meters shrink so the sheet keeps more of the height. */
@media (max-height: 520px)
{
	#clocks
	{
		top: max(6px, env(safe-area-inset-top));
		column-gap: 16px;
		row-gap: 0;
		padding: 4px 14px 5px;
	}
	
	.clock-name
	{
		font-size: 9.5px;
	}
	
	.clock-reading
	{
		font-size: 19px;
	}
	
	.clock-gap,
	.slowing-parts
	{
		font-size: 10.5px;
	}
	
	#level-name
	{
		top: max(6px, env(safe-area-inset-top));
		padding: 5px 11px;
		font-size: 16px;
	}
	
	.round-button
	{
		top: max(6px, env(safe-area-inset-top));
		width: 38px;
		height: 38px;
	}
	
	#meters
	{
		bottom: max(5px, env(safe-area-inset-bottom));
		padding: 5px 14px;
	}
	
	#card
	{
		padding: 14px 20px 14px;
	}
	
	#card-title
	{
		font-size: 28px;
	}
	
	#card-text
	{
		margin: 6px 0 12px;
		font-size: 14px;
	}
}
/* #endregion */


/* #region Narrow screens */
@media (max-width: 520px)
{
	#clocks
	{
		column-gap: 16px;
		padding: 7px 14px 8px;
	}
	
	.clock-name
	{
		font-size: 10px;
		white-space: nowrap;
	}
	
	.clock-reading
	{
		font-size: 22px;
	}
	
	.clock-gap
	{
		font-size: 11.5px;
		white-space: nowrap;
	}
	
	#level-name
	{
		display: none;
	}
	
	#meters
	{
		gap: 14px;
		padding: 7px 14px;
	}
	
	.meter-track
	{
		width: 64px;
	}
	
	#card-title
	{
		font-size: 30px;
	}
	
	.setting-range
	{
		width: 96px;
	}
	
	.chapter-tiles
	{
		grid-template-columns: 1fr 1fr;
	}
	
	.level-tile
	{
		padding: 10px;
		column-gap: 8px;
	}
	
	.tile-number
	{
		font-size: 26px;
	}
	
	.tile-title
	{
		font-size: 17px;
	}
	
	.tile-best
	{
		display: none;
	}
	
	.menu-head h2
	{
		font-size: 24px;
	}
	
	.button.is-back
	{
		padding: 7px 12px;
		font-size: 13px;
	}
}
/* #endregion */


/* #region Reduced motion */
/* - When the device asks for reduced motion, panels and buttons change at once rather than gliding. */
@media (prefers-reduced-motion: reduce)
{
	*,
	*::before,
	*::after
	{
		transition-duration: 0.01s !important;
		animation-duration: 0.01s !important;
	}
}
/* #endregion */