/* Fonts
-- Self-hosted, SIL Open Font License (see assets/fonts).
------------------------------------------------------- */

@font-face {
	font-family: 'Silkscreen';
	src: url('../assets/fonts/silkscreen-regular.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'VT323';
	src: url('../assets/fonts/vt323-regular.woff2') format('woff2');
	font-display: swap;
}

/* Base
------------------------------------------------------- */

:root {
	--ink: #f4efd9;
	--ink_2: #c9bfa0;
	--muted: #8a7f68;
	--hay: #f0a04b;
	--hay_light: #ffd78a;
	--panel: rgba(18, 11, 22, 0.88);
	--panel_line: #4a3446;
	--cyan: #7fe0d0;
	--paper: #d6cba4;
	--paper_ink: #2d2416;
	--leather: #5a3a24;
	--pixel: 'Silkscreen', 'Courier New', monospace;
	--body: 'VT323', 'Courier New', monospace;
	--safe_top: env(safe-area-inset-top, 0px);
	--safe_bottom: env(safe-area-inset-bottom, 0px);
	--safe_left: env(safe-area-inset-left, 0px);
	--safe_right: env(safe-area-inset-right, 0px);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: #08070e;
	color: var(--ink);
	font-family: var(--body);
	font-size: 20px;
	line-height: 1.2;
	-webkit-font-smoothing: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	overscroll-behavior: none;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.hidden {
	display: none !important;
}

.world_canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
	image-rendering: pixelated;
}

/* HUD
------------------------------------------------------- */

.hud {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.hud > * {
	pointer-events: auto;
}

/* the top bar: the hay count on the left, money and power on the right, on panels so they read
   over the bright stack; on narrow screens the right panel wraps below rather than overlapping */
.hud_top {
	position: absolute;
	top: calc(8px + var(--safe_top));
	left: calc(8px + var(--safe_left));
	right: calc(8px + var(--safe_right));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}

.hud_bar {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 6px;
}

.hud_tally,
.hud_status {
	background: var(--panel);
	border: 2px solid var(--panel_line);
	padding: 2px 10px 4px;
	pointer-events: none;
}

.hud_tally {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 10px;
	min-width: 0;
	text-shadow: 0 2px 0 #000;
}

.tally_count {
	font-size: 28px;
}

/* the last hundred thousand: the count glows faintly cyan */
.tally_count.tally_final {
	color: #d4fff6;
	text-shadow: 0 0 6px rgba(127, 224, 208, 0.6);
}

.hud_rates {
	font-size: 18px;
	color: var(--ink_2);
	white-space: nowrap;
	text-shadow: 0 1px 0 #000;
}

.hud_rates .hud_eaten {
	color: #e0606c;
	font-weight: 400;
}

.hud_status {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-shadow: 0 2px 0 #000;
}

.hud_money {
	font-size: 26px;
	color: var(--hay_light);
}

.hud_pips {
	display: inline-flex;
	gap: 2px;
}

.hud_pips i {
	width: 8px;
	height: 14px;
	background: var(--hay_light);
	box-shadow: 0 0 0 1px #000;
	display: inline-block;
}

.hud_pips i.off {
	background: #3a2a38;
}

.hud_pips i.part {
	background: linear-gradient(to top, var(--hay_light) var(--fill), #3a2a38 var(--fill));
}

.hud_power {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 22px;
}

.power_num {
	display: inline-block;
	text-align: right;
}

.hud_power b {
	color: var(--cyan);
	font-weight: 400;
}

.hud_power.brown b {
	color: #ff8a6a;
	animation: blink 0.8s steps(2) infinite;
}

.power_bar {
	width: 44px;
	height: 8px;
	background: #2a1e2e;
	box-shadow: 0 0 0 1px #000;
	display: inline-block;
	position: relative;
}

.power_bar i {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--cyan);
	display: block;
}

.tool_badge {
	position: absolute;
	left: calc(12px + var(--safe_left));
	bottom: calc(12px + var(--safe_bottom));
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 6px 6px;
	background: var(--panel);
	border: 2px solid var(--panel_line);
	text-align: left;
}

.tool_icon {
	width: 36px;
	height: 36px;
	image-rendering: pixelated;
}

.tool_text b {
	display: block;
	font-family: var(--pixel);
	font-weight: 400;
	font-size: 11px;
	color: var(--hay_light);
	letter-spacing: 1px;
}

.tool_text small {
	display: block;
	font-size: 17px;
	color: var(--ink_2);
	line-height: 1;
}

.tool_badge.holding {
	border-color: var(--hay);
}

.ledger_button {
	position: absolute;
	right: calc(14px + var(--safe_right));
	bottom: calc(12px + var(--safe_bottom));
	width: 58px;
	height: 74px;
	background: var(--leather);
	border: 2px solid #1d140c;
	box-shadow: inset 7px 0 0 #3d2716, 3px 4px 0 #000;
	display: grid;
	place-items: center;
	padding: 0;
}

.ledger_button::after {
	content: '';
	position: absolute;
	inset: 6px 5px 6px 11px;
	border: 1px solid #7a5434;
}

.ledger_button span {
	font-family: var(--pixel);
	font-size: 9px;
	color: #d9c7a0;
	transform: rotate(-90deg);
	letter-spacing: 1px;
}

.ledger_button.pulse {
	animation: nudge 1.6s ease-in-out infinite;
}

.mode_bar {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 8px 6px 14px;
	background: var(--panel);
	border: 2px solid var(--cyan);
	max-width: 100%;
	white-space: nowrap;
}

.mode_bar span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.mode_bar button,
.tap_menu button,
.screen button,
.ledger button {
	font-family: var(--pixel);
	font-size: 11px;
	letter-spacing: 1px;
	background: #24172a;
	border: 2px solid var(--panel_line);
	padding: 6px 10px;
}

/* the ledger's paper sets a dark ink, so its dark buttons need light text of their own */
.ledger button {
	color: var(--ink);
}

.toast {
	position: absolute;
	left: 50%;
	bottom: calc(104px + var(--safe_bottom));
	transform: translateX(-50%);
	background: var(--panel);
	border: 2px solid var(--panel_line);
	padding: 6px 14px;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
	max-width: calc(100vw - 24px);
	text-align: center;
}

.toast.on {
	opacity: 1;
}

/* Omens
-- The raid warnings: ink and blood, distinct from the whispers, sitting a little above them.
------------------------------------------------------- */

.omen_toast {
	position: absolute;
	left: 50%;
	bottom: calc(150px + var(--safe_bottom));
	transform: translateX(-50%);
	background: rgba(4, 2, 6, 0.95);
	border: 2px solid #3a0810;
	color: #d8404e;
	letter-spacing: 1px;
	padding: 6px 14px;
	opacity: 0;
	transition: opacity 0.35s;
	pointer-events: none;
	max-width: calc(100vw - 24px);
	text-align: center;
}

.omen_toast.on {
	opacity: 1;
	animation: tremble 0.12s steps(2) infinite;
}

@keyframes tremble {
	50% { transform: translate(calc(-50% + 1px), 1px); }
}

/* on a phone the hints wrap to two lines, so the omens sit up under the HUD instead */
@media (max-width: 760px) {
	.omen_toast {
		bottom: auto;
		top: calc(112px + var(--safe_top));
	}
}

@media (prefers-reduced-motion: reduce) {
	.omen_toast.on {
		animation: none;
	}
}

/* Opening words
-- Shown once over the field when a new game begins, then fades away.
------------------------------------------------------- */

.opening_words {
	position: absolute;
	left: 50%;
	top: 38%;
	transform: translate(-50%, -50%);
	font-family: var(--pixel);
	font-size: clamp(26px, 8vw, 56px);
	letter-spacing: 4px;
	white-space: nowrap;
	color: var(--hay_light);
	text-shadow: 3px 3px 0 #000, 0 0 18px rgba(240, 160, 75, 0.45);
	opacity: 0;
	pointer-events: none;
}

.opening_words.on {
	animation: opening_words 4.2s ease-in-out forwards;
}

@keyframes opening_words {
	0% { opacity: 0; }
	20% { opacity: 1; }
	60% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes blink {
	50% { opacity: 0.35; }
}

@keyframes nudge {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

/* Tap menu
------------------------------------------------------- */

.tap_menu {
	position: fixed;
	z-index: 3;
	width: 260px;
	max-width: calc(100vw - 16px);
	background: #140c18;
	border: 2px solid var(--hay);
	box-shadow: 4px 5px 0 #000;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 18px;
}

.tap_menu h5 {
	margin: 0;
	font-family: var(--pixel);
	font-weight: 400;
	font-size: 11px;
	color: var(--ink_2);
	letter-spacing: 1px;
	display: flex;
	justify-content: space-between;
}

.tap_menu .menu_note {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.1;
}

.tap_menu .menu_note.warn {
	color: #ff9a7a;
}

.tap_menu .menu_row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	border: 2px solid var(--panel_line);
	padding: 3px 8px;
	background: none;
	text-align: left;
	font-family: var(--body);
	font-size: 18px;
	letter-spacing: 0;
}

.tap_menu .menu_row:hover:not(:disabled) {
	border-color: var(--hay);
}

.tap_menu .menu_row:disabled {
	opacity: 0.45;
	cursor: default;
}

.tap_menu .menu_row i {
	font-style: normal;
	color: var(--hay_light);
	white-space: nowrap;
}

.tap_menu .menu_row small {
	color: var(--muted);
	font-size: 16px;
}

.split_bar {
	position: relative;
	display: flex;
	height: 42px;
	border: 2px solid #000;
	touch-action: none;
}

.split_seg {
	display: grid;
	place-items: center;
	overflow: hidden;
	font-family: var(--pixel);
	font-size: 10px;
	color: #120c1c;
	white-space: nowrap;
}

.split_seg span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px 5px;
}

.split_seg b {
	font-weight: 400;
}

.split_arrow {
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
	shape-rendering: crispEdges;
}

.split_seg.s0 { background: var(--hay_light); }
.split_seg.s1 { background: #c89a4a; }
.split_seg.s2 { background: var(--cyan); }

.split_div {
	position: absolute;
	top: -6px;
	bottom: -6px;
	width: 22px;
	margin-left: -11px;
	cursor: ew-resize;
	display: grid;
	place-items: center;
	touch-action: none;
}

.split_div::after {
	content: '';
	width: 4px;
	height: 100%;
	background: var(--ink);
	box-shadow: 0 0 0 1px #000;
}

/* Ledger
------------------------------------------------------- */

.ledger {
	position: fixed;
	inset: 0;
	z-index: 4;
	background: rgba(4, 2, 8, 0.72);
	display: grid;
	/* one cell the size of the screen, so the spread's height: 100% is the screen's and not its
	   own content's; without it a short phone screen got the whole book and nothing scrolled */
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	padding: calc(14px + var(--safe_top)) calc(12px + var(--safe_right)) calc(14px + var(--safe_bottom)) calc(12px + var(--safe_left));
}

.ledger_spread {
	position: relative;
	width: min(1040px, 100%);
	height: min(700px, 100%);
	background: var(--paper);
	color: var(--paper_ink);
	border: 3px solid #3d2716;
	box-shadow: 0 0 0 6px var(--leather), 8px 10px 0 6px #000;
	display: grid;
	grid-template-rows: auto auto 1fr;
}

.ledger_tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px 10px 0;
	background: #c4b88e;
	border-bottom: 2px solid #8a7d5a;
}

.ledger .ledger_tabs button {
	background: #8a6a3a;
	color: #f4efd9;
	border: 2px solid #3d2716;
	border-bottom: none;
	padding: 6px 10px 5px;
}

.ledger .ledger_tabs button.on {
	background: var(--paper);
	color: var(--paper_ink);
}

.ledger_head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 14px;
	font-size: 22px;
}

.ledger .ledger_close {
	background: none;
	color: var(--leather);
	border-color: #8a7d5a;
}

.ledger_pages {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 0;
	overflow: hidden;
}

.ledger_page {
	position: relative;
	padding: 4px 18px 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: repeating-linear-gradient(#0000 0 27px, #8a7d5a40 27px 28px);
	background-attachment: local;
}

.ledger_page + .ledger_page {
	border-left: 2px solid #8a7d5a;
	box-shadow: inset 8px 0 10px -8px #0006;
}

.ledger_page h4 {
	font-family: var(--pixel);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 1px;
	margin: 10px 0 4px;
}

.ledger_row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 10px;
	align-items: center;
	padding: 3px 0;
	border-bottom: 1px dashed #8a7d5a66;
}

.ledger_row .row_name {
	font-size: 21px;
}

.ledger_note {
	margin: 6px 0 0;
	font-size: 17px;
	color: #6b5c40;
	line-height: 1;
}

.ledger_row .row_desc {
	grid-column: 1 / 2;
	font-size: 17px;
	color: #6b5c40;
	line-height: 1;
}

.ledger_row.dim {
	color: #8a7d5a;
}

.ledger_row.struck .row_name {
	text-decoration: line-through;
	text-decoration-color: #6b2a1f;
}

.ledger .buy_button {
	grid-row: 1 / span 2;
	grid-column: 2;
	background: #f0e6c4;
	color: var(--leather);
	border: 2px solid var(--leather);
	min-width: 86px;
}

.ledger .buy_button:disabled {
	opacity: 0.45;
	cursor: default;
}

.ledger .buy_button.owned {
	background: none;
	border-color: transparent;
	color: #6b5c40;
}

.ledger_stat {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 2px 0;
	border-bottom: 1px dashed #8a7d5a55;
}

.ledger_stat b {
	font-weight: 400;
}

.ledger textarea {
	width: 100%;
	height: 90px;
	font-family: var(--body);
	font-size: 16px;
	background: #f0e6c4;
	border: 2px solid #8a7d5a;
	color: var(--paper_ink);
	user-select: text;
	-webkit-user-select: text;
}

.ledger .pace_choice {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin: 6px 0;
}

.ledger .pace_choice button.on,
.screen .pace_choice button.on {
	border-color: var(--leather);
	background: #f0e6c4;
	color: var(--leather);
}

.ledger_hand {
	display: inline-block;
	margin-left: 4px;
	font-size: 23px;
	color: #6b2a1f;
	transform: rotate(-4deg) translateY(-6px);
}

.ledger_stat s {
	text-decoration-color: #6b2a1f;
}

.scrawl {
	position: absolute;
	font-size: 23px;
	color: #6b2a1f;
	opacity: 0.6;
	transform: rotate(-6deg);
	white-space: nowrap;
	pointer-events: none;
}

/* Title and ending screens
------------------------------------------------------- */

.screen {
	position: fixed;
	inset: 0;
	z-index: 5;
	display: grid;
	place-items: center;
	padding: 16px;
	background: radial-gradient(ellipse at 30% 20%, #3a2030 0%, #120a18 60%, #050308 100%);
}

.screen:empty {
	display: none;
}

/* the cover rests on the field itself, which keeps drifting behind it; a veil lifts on load */
.screen.title {
	background: radial-gradient(ellipse 90% 100% at 62% 50%, rgba(5, 3, 8, 0) 35%, rgba(5, 3, 8, 0.55) 75%, rgba(5, 3, 8, 0.9) 100%);
}

.screen.title::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #050308;
	pointer-events: none;
	animation: veil_lift 3.5s ease-in forwards;
}

.screen.title .screen_book {
	position: relative;
	animation: fade_in 1.2s ease-out;
}

@keyframes veil_lift {
	from { opacity: 1; }
	to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.screen.title::before {
		display: none;
	}

	.screen.title .screen_book {
		animation: none;
	}
}

body.title_open .hud {
	visibility: hidden;
}

@media (min-width: 900px) {
	.screen.title {
		justify-items: start;
		padding-left: max(32px, 7vw);
	}
}

.screen.fade {
	background: rgba(2, 1, 4, 0.82);
	animation: fade_in 2.5s ease-out;
}

/* the opening: words under the moon */
.hunger_words {
	position: fixed;
	left: 50%;
	top: 72%;
	z-index: 4;
	transform: translate(-50%, -50%);
	font-family: var(--body);
	font-size: clamp(28px, 6vw, 58px);
	letter-spacing: 3px;
	white-space: nowrap;
	color: #e6dcc0;
	text-shadow: 0 0 14px rgba(150, 90, 170, 0.55), 2px 2px 0 #000;
	opacity: 0;
	pointer-events: none;
}

body.opening_open .hud {
	visibility: hidden;
}

/* the loss: the last page, read by the last of a lantern */
.screen.night_page {
	background: radial-gradient(ellipse 55% 75% at 50% 52%, rgba(60, 34, 10, 0.25), rgba(0, 0, 0, 0.97) 70%);
}

.night_page .screen_book {
	position: relative;
	box-shadow: 0 0 0 6px var(--leather), 0 0 60px 20px rgba(255, 190, 110, 0.18);
}

.night_page .screen_book::after {
	content: '';
	position: absolute;
	inset: -6px;
	background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
	pointer-events: none;
}

.night_page .ledger_stat.eaten {
	color: #6b2a1f;
}

.night_note {
	color: #6b2a1f;
	opacity: 0.75;
	font-size: 24px;
	text-align: right;
	transform: rotate(-4deg);
	margin: 6px 8px -4px 0;
}

@keyframes fade_in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.screen_book {
	width: min(460px, 100%);
	background: var(--paper);
	color: var(--paper_ink);
	border: 3px solid #3d2716;
	box-shadow: 0 0 0 6px var(--leather), 8px 10px 0 6px #000;
	padding: 22px 22px 18px;
	text-align: center;
	background-image: repeating-linear-gradient(#0000 0 27px, #8a7d5a40 27px 28px);
}

.screen_book h1 {
	font-family: var(--pixel);
	font-weight: 400;
	font-size: 30px;
	letter-spacing: 2px;
	margin: 4px 0 6px;
}

.screen_book p {
	margin: 6px 0;
	font-size: 21px;
}

.screen_book .screen_hand {
	font-size: 30px;
	color: #6b2a1f;
	transform: rotate(-3deg);
	margin: 14px 0;
}

.screen .screen_actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}

.screen button {
	background: #f0e6c4;
	color: var(--leather);
	border: 2px solid var(--leather);
	padding: 10px 12px;
	font-size: 12px;
}

.screen button.screen_fullscreen {
	align-self: center;
	background: none;
	border-color: transparent;
	padding: 4px 8px;
	font-size: 10px;
	color: #6b5c40;
}

.screen button.screen_fullscreen:hover {
	color: var(--leather);
	border-color: #8a7d5a;
}

.screen .pace_choice {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.screen .pace_choice button {
	padding: 8px 6px;
	background: none;
	border-color: #8a7d5a;
}

.screen .pace_choice small {
	display: block;
	font-family: var(--body);
	font-size: 16px;
	letter-spacing: 0;
	color: #6b5c40;
}

.screen_stats {
	text-align: left;
	margin: 10px 0 0;
}

.pace_choice .pace_best {
	color: #6b2a1f;
}

/* The ending
-- While it plays the HUD steps aside and a clear veil takes taps: hold to hurry.
-- The last page lies lightly over the dawn field, with the photograph taped in.
------------------------------------------------------- */

body.ending_open .hud {
	visibility: hidden;
}

.ending_veil {
	position: fixed;
	inset: 0;
	z-index: 4;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.ending_veil.hidden {
	display: none;
}

.ending_skip {
	position: absolute;
	right: calc(14px + var(--safe_right));
	bottom: calc(14px + var(--safe_bottom));
	background: rgba(10, 6, 14, 0.5);
	color: var(--ink_2);
	border: 1px solid rgba(244, 239, 217, 0.18);
	padding: 8px 12px;
	font-size: 11px;
	opacity: 0;
	animation: skip_in 0.8s ease-out 1.5s forwards;
}

.ending_skip.hidden {
	display: none;
}

@keyframes skip_in {
	to { opacity: 0.75; }
}

.screen.dawn_page {
	background: radial-gradient(ellipse at 50% 50%, rgba(24, 14, 10, 0.15) 30%, rgba(24, 14, 10, 0.55) 100%);
	animation: fade_in 2.5s ease-out;
	overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
	.screen.dawn_page {
		animation: none;
	}
}

.end_photo,
.title_photo {
	position: relative;
	margin: 12px auto 6px;
	width: fit-content;
	max-width: 88%;
	background: #f4efe2;
	padding: 6px 6px 3px;
	box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.35);
	transform: rotate(-2.5deg);
}

/* a strip of tape */
.end_photo::before,
.title_photo::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 50%;
	width: 56px;
	height: 15px;
	margin-left: -28px;
	background: rgba(232, 220, 174, 0.7);
	transform: rotate(3deg);
}

.end_photo img,
.title_photo img {
	display: block;
	max-width: 100%;
	max-height: 28vh;
}

.end_photo figcaption,
.title_photo figcaption {
	font-size: 17px;
	color: #5a4a30;
	text-align: center;
}

.title_photo {
	position: absolute;
	top: -58px;
	right: -14px;
	width: 112px;
	margin: 0;
	padding: 4px 4px 1px;
	transform: rotate(5deg);
}

.title_photo::before {
	width: 34px;
	margin-left: -17px;
	height: 11px;
}

.title_photo figcaption {
	font-size: 13px;
	line-height: 1;
}

.screen button.share_button {
	background: var(--leather);
	color: #f0e6c4;
}

.screen button.share_button:disabled {
	opacity: 0.6;
}

/* the share panel takes the buttons' place when there's no share sheet for the link */
.share_panel {
	display: none;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}

.screen_book.sharing .share_panel {
	display: flex;
}

.screen_book.sharing .screen_actions {
	display: none;
}

.screen_book .share_note {
	margin: 2px 0;
	font-size: 19px;
	line-height: 1.1;
	color: #5a4a30;
}

.share_sites {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.share_sites a {
	flex: 1 1 28%;
	font-family: var(--pixel);
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--leather);
	background: none;
	border: 2px solid #8a7d5a;
	padding: 9px 6px;
	text-decoration: none;
}

.screen button.share_back {
	background: none;
	border-color: #8a7d5a;
}

.share_sites a:hover,
.share_sites a:focus-visible {
	border-color: var(--leather);
	background: #f0e6c4;
}

.end_line {
	font-size: 24px;
	color: #6b2a1f;
	opacity: 0.7;
	transform: rotate(-4deg);
	margin: 8px 0 2px;
}

/* the best for this pace and mode, noted in the margin */
.best_note {
	font-size: 20px;
	color: #6b2a1f;
	opacity: 0.6;
	text-align: right;
	transform: rotate(-3deg);
	margin: 0 8px 4px 0;
}

/* Small screens
------------------------------------------------------- */

@media (max-width: 760px) {
	body {
		font-size: 19px;
	}

	.ledger_pages {
		grid-template-columns: 1fr;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ledger_page {
		overflow: visible;
	}

	.ledger_page + .ledger_page {
		border-left: none;
		border-top: 2px solid #8a7d5a;
	}

	.ledger {
		padding: calc(8px + var(--safe_top)) calc(6px + var(--safe_right)) calc(8px + var(--safe_bottom)) calc(6px + var(--safe_left));
	}

	.ledger_spread {
		height: 100%;
	}

	.hud_tally {
		flex-direction: column;
		padding: 0 8px 2px;
	}

	.tally_count {
		font-size: 24px;
	}

	.hud_rates {
		font-size: 16px;
	}

	.hud_status {
		gap: 8px;
	}

	.hud_money {
		font-size: 22px;
	}

	.power_bar {
		width: 28px;
	}

	.tool_text small {
		font-size: 15px;
	}

	.mode_bar {
		white-space: normal;
	}
}

/* Phones held sideways
-- Wide enough for the two-page spread, but only a few hundred pixels tall: the margins, tabs and
-- heading shrink so the pages keep most of the height, and each page scrolls on its own.
------------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
	.ledger {
		padding: calc(4px + var(--safe_top)) calc(10px + var(--safe_right)) calc(6px + var(--safe_bottom)) calc(10px + var(--safe_left));
	}

	.ledger_spread {
		height: 100%;
		box-shadow: 0 0 0 4px var(--leather), 4px 5px 0 4px #000;
	}

	.ledger_tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
		padding: 4px 6px 0;
	}

	.ledger_tabs::-webkit-scrollbar {
		display: none;
	}

	.ledger .ledger_tabs button {
		flex: none;
		padding: 4px 8px 3px;
		font-size: 11px;
	}

	.ledger_head {
		padding: 2px 12px;
		font-size: 18px;
	}

	.ledger .ledger_close {
		padding: 2px 8px;
	}

	.ledger_page {
		padding: 2px 12px 12px;
	}

	.ledger_page h4 {
		margin: 6px 0 2px;
	}

	.ledger_row .row_name {
		font-size: 19px;
	}

	.ledger_row .row_desc,
	.ledger_note {
		font-size: 15px;
	}
}