html,
body {

	font-family: 'SassoonPrimary', 'childFriendly', sans-serif;
	overflow:auto;
	user-select: none;
	-webkit-user-select: none;


}
@font-face {
	font-family: 'childFriendly';
	src: url('fonts/childFriendly.ttf');
	src: local('childFriendly'), local('childFriendly'), url('fonts/childFriendly.ttf') format('truetype');
}
@font-face {
	font-family: 'SassoonPrimary';
	src: url('fonts/Sassoon-Williams-SassoonPrimary-Bold.otf') format('opentype');
}

/* ============================================================
   Fold-a-Book player
   ============================================================ */

/* Any element toggled via the DOM `hidden` property must stay hidden even
   if it (or a rule targeting it) also sets its own `display` — an author
   rule with equal specificity to the browser's default [hidden]{display:none}
   otherwise wins and the element never actually hides. Global safeguard so
   this class of bug (hit 3 times already: pause overlay, player view,
   picker view) can't recur on some future element. */
[hidden] { display: none !important; }

#app {
	width: 860px; height: 550px; max-width: 100%;
	margin: 0 auto; padding: 6px 10px 10px; box-sizing: border-box;
	background: #f2faec; border-radius: 20px;
	overflow: hidden;
	display: flex; flex-direction: column;
}
#app.fullscreen { position: fixed; top: 50%; left: 50%; transform-origin: center center; z-index: 999; }
body.appFullscreen { overflow: hidden; }
/* Full-viewport backdrop behind the scaled #app box — needed because the
   scaled box's aspect ratio (860:550) rarely matches the browser window's,
   so there's letterboxed space around it where the rest of the page (still
   sitting in normal flow underneath) would otherwise show through. */
body.appFullscreen::before {
	content: ""; position: fixed; inset: 0; background: #cecece; z-index: 998;
}

#chrome { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; flex: 0 0 auto; }
#chromeLeft { display: flex; align-items: center; gap: 10px; min-width: 0; }
#chromeRight { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.chromeBtn { background: none; border: none; cursor: pointer; padding: 4px; min-width: 44px; min-height: 44px; flex: 0 0 auto; }
.chromeBtn img { width: 56px; height: auto; display: block; }

#pickerView {
	flex: 1 1 auto; min-height: 0; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; text-align: center;
}
#pickerView h1 { color: #3b602c; margin: 0 0 2px; font-family: 'childFriendly', sans-serif; font-size: 55px; }
.subtitle { color: #555; font-size: 16px; margin: 0 0 6px; }

.bookGrid {
	display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
	gap: 8px; width: 100%; flex: 1 1 auto; min-height: 0;
}
.bookCard {
	background: #f4faf0; border: none; border-radius: 16px;
	padding: 8px; cursor: pointer; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 4px; font-family: inherit;
	min-height: 0; overflow: hidden;
}
.bookThumb { flex: 1 1 auto; min-height: 0; font-size: 40px; display: flex; align-items: center; justify-content: center; }
.bookThumb img { max-height: 100%; max-width: 100%; }
.bookCardTitle { flex: 0 0 auto; font-size: 14px; color: #333; text-align: center; }
.bookCardScissors { flex: 0 0 auto; font-size: 11px; color: #7a5b00; }
.bookCardRuler { flex: 0 0 auto; font-size: 11px; color: #7a5b00; }
.bookCardGlue { flex: 0 0 auto; font-size: 11px; color: #7a5b00; }

.textBtn { background: none; border: none; color: #3b602c; font-size: 14px; cursor: pointer; padding: 6px 4px; }

#playerView { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

#playerTitle { color: #3b602c; margin: 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { background: #a1d494; color: #204014; border-radius: 14px; padding: 5px 10px; font-size: 13px; white-space: nowrap; }
.badgeScissors { background: #ffe3a3; color: #7a5b00; }
.badgeRuler { background: #ffe3a3; color: #7a5b00; }
.badgeGlue { background: #ffe3a3; color: #7a5b00; }

#videoWrap {
	position: relative; background: #000; border-radius: 16px; overflow: hidden;
	flex: 1 1 auto; min-height: 0;
	display: flex; align-items: center; justify-content: center;
}
#video { height: 100%; width: auto; max-width: 100%; display: block; }
.videoPosterWrap {
	position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85);
	display: flex; align-items: center; justify-content: center;
}
.videoPoster {
	max-width: 55%; max-height: 55%; object-fit: contain; display: block;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.statusOverlay {
	position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); color: #fff;
	display: flex; align-items: center; justify-content: center;
	text-align: center; padding: 20px; font-size: 16px;
}
.pauseOverlay {
	position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px; text-align: center; padding: 20px; font-size: 18px;
}

.progressBar {
	position: relative; height: 12px; background: #dcdcdc; border-radius: 6px;
	margin: 8px 0; cursor: pointer; flex: 0 0 auto;
}
.progressFill { position: absolute; top: 0; left: 0; bottom: 0; background: #a1d494; border-radius: 6px; width: 0%; }
.progressTicks { position: absolute; inset: 0; }
.progressTick { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; flex: 0 0 auto; }
.bigBtn {
	min-width: 44px; min-height: 40px; padding: 8px 14px; font-size: 15px;
	border: none; border-radius: 12px; background: #3b602c; color: #fff;
	cursor: pointer; font-family: inherit;
}
.bigBtn:hover { background: #2c481f; }
.toggleBtn.active { background: #ffb648; color: #4a2e00; }

/* Horizontal scrolling strip — height stays fixed no matter how many steps a
   book has (bounded, unlike a wrapping grid). Each chip is just the step
   number as a circular button (no title text) — the full step title is
   still available as a hover tooltip / aria-label for accessibility. */
.stepChips {
	display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto;
	flex: 0 0 auto; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch;
}
.stepChip {
	flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
	border: 3px solid #cecece; background: #fff; color: #333;
	font-weight: bold; font-size: 15px; font-family: inherit;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.stepChip.current { border-color: #3b602c; background: #a1d494; color: #204014; }
.stepChip.completed { background: #3b602c; border-color: #3b602c; color: #fff; }