/* Fold It! — look D from the design canvas (2026-10-24): B's Fold Book (graph paper, plum ink)
   with C's Pip the paper fox and chunky buttons, flat (Nick: "flatter"), warm colours (Nick: red
   too bright, pink blah). The four screen corners belong to the shared buttons: top-left 🏠,
   top-right ⛶, bottom-left 🔊 + 📮, bottom-right is the portal's 💬. */
:root {
	--ink: #3b2a5c;
	--ink-2: #5a4a7a;
	--muted: #7d6a9e;
	--line: #c9b8e6;
	--paper: #fff7ec;
	--grid: #f3e3cf;
	--teal: #0d8a7f;
	--card: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
	background: var(--paper);
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 24px 24px;
	color: var(--ink);
	font-family: Nunito, system-ui, sans-serif;
	overflow: hidden;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

#app {
	position: fixed;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(380px, 470px);
	grid-template-rows: 68px minmax(0, 1fr) auto;
	grid-template-areas: "top top" "stage side" "pick pick";
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* top: the model name and its step circles. Left/right 84px stay clear for 🏠 and ⛶. */
#top {
	grid-area: top;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 84px 0;
	min-width: 0;
}
#mName { font-family: Gaegu, cursive; font-weight: 700; font-size: 30px; white-space: nowrap; margin-right: 8px; }
#dots { display: flex; gap: 8px; flex-wrap: nowrap; }
.dot {
	width: 44px; height: 44px; border-radius: 50%;
	border: 3px solid var(--line); background: var(--card);
	color: var(--muted); font-weight: 900; font-size: 19px;
	display: flex; align-items: center; justify-content: center; padding: 0;
}
.dot.past { border-color: var(--teal); background: var(--teal); color: #fff; }
.dot.now { border-color: var(--ink); background: var(--ink); color: #fff; }

/* the paper */
#stageWrap { grid-area: stage; position: relative; min-width: 0; min-height: 0; }
#stage { position: absolute; inset: 6px 10px 6px 24px; width: calc(100% - 34px); height: calc(100% - 12px); overflow: visible; }

#done {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
#done[hidden] { display: none; }
#doneArt { width: min(92%, 620px); height: auto; max-height: 90%; animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pop { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bit { position: absolute; top: -20px; width: 14px; height: 18px; border: 2px solid var(--ink); border-radius: 2px; animation: fall 2.4s ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

/* right: Pip + buttons */
#side {
	grid-area: side;
	display: flex; flex-direction: column; justify-content: center; gap: 22px;
	padding: 12px 28px 12px 8px;
	min-width: 0;
}
#talk { display: flex; align-items: flex-end; gap: 12px; }
#pip { flex: 0 0 auto; width: 100px; height: 112px; transform-origin: 50% 100%; }
#pip.hop { animation: hop .5s ease-out; }
@keyframes hop { 30% { transform: translateY(-14px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
#bubble {
	flex: 1 1 auto; min-width: 0;
	padding: 16px 20px; border-radius: 22px;
	background: var(--card); border: 3px solid var(--ink);
}
#who { font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
#say { font-family: Gaegu, cursive; font-weight: 700; font-size: 40px; line-height: 1.02; margin-top: 4px; }
#tip { font-size: 19px; line-height: 1.4; margin-top: 8px; color: var(--ink-2); }

.btns { display: flex; gap: 12px; }
.btns[hidden] { display: none; }
.big {
	height: 72px; border-radius: 18px; border: 3px solid var(--ink);
	background: var(--card); font-weight: 900; font-size: 19px; padding: 0 16px;
}
.big.go { flex: 1 1 auto; background: var(--teal); color: #fff; font-size: 28px; }
.big:active { transform: translateY(2px); }

/* bottom strip: things + paper colours. Left 84px for 🔊/📮, right 84px for the portal's 💬. */
#picker {
	grid-area: pick;
	margin: 0 84px 14px;
	min-height: 92px;
	padding: 10px 14px;
	border: 3px dashed var(--line); border-radius: 18px; background: var(--card);
	display: flex; align-items: center; gap: 12px;
}
/* nine things: one row she can swipe, so the strip never grows into the paper */
#things {
	flex: 1 1 auto; min-width: 0;
	display: flex; gap: 8px; align-items: center;
	overflow-x: auto; overflow-y: hidden; padding: 10px 4px 4px; margin: -10px 0 -4px;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#things::-webkit-scrollbar { display: none; }
#colours { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 44px); gap: 6px 8px; }
.thing {
	position: relative; flex: 0 0 auto;
	min-width: 76px; max-width: 96px; height: 70px; padding: 4px 6px; border-radius: 14px;
	border: 3px solid var(--ink); background: var(--card);
	font-weight: 900; font-size: 14px; line-height: 1.05; text-align: center;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.thing svg { width: 34px; height: 26px; }
.thing.on { background: var(--sel, #ffb627); }
.thing .made {
	position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--teal); border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
}
.sw { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); padding: 0; }
.sw.on { border-color: #fff; outline: 4px solid var(--ink); }

/* Upright screens (her iPad held portrait, phones): stack it all. */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
	#app {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr) auto auto;
		grid-template-areas: "top" "stage" "side" "pick";
	}
	#top { flex-wrap: wrap; padding: 10px 70px 0; }
	#mName { width: 100%; text-align: center; margin: 0; font-size: 26px; }
	#dots { flex-wrap: wrap; justify-content: center; }
	#side { padding: 4px 16px; gap: 12px; }
	#say { font-size: 32px; }
	#tip { font-size: 17px; }
	#pip { width: 76px; height: 86px; }
	.big { height: 60px; }
	.big.go { font-size: 24px; }
	#picker { margin: 10px 16px 14px 76px; flex-wrap: wrap; }
	#colours { grid-template-columns: repeat(6, 44px); }
}
@media (max-width: 760px) {
	.dot { width: 44px; height: 44px; font-size: 17px; }
	#picker { gap: 6px; padding: 8px 10px; }
	#things, #colours { gap: 6px; }
	#things { flex-basis: 100%; }
	#colours { grid-template-columns: repeat(6, 44px); gap: 6px; }
	.thing { min-width: 54px; height: 54px; padding: 0 8px; }
	.thing span { display: none; }
	.sw { width: 44px; height: 44px; }
	#say { font-size: 28px; }
}