/* Her room (the home screen), the sky behind its window, the birthday cake and hero tickets */

.stage {
	/* One pixel of the room's pixel art: about 108 of them across the frame */
	--px: clamp(3px, min(100cqw, 100cqh) / 108, 7px);
	--floor: 34%;
}

/* ---------- Room: wall and floor run the full width; the furniture sits in the frame ---------- */

.room {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background:
		linear-gradient(transparent calc(100% - var(--floor)), #c99067 0) 0 0 / 100% 100% no-repeat,
		repeating-linear-gradient(90deg, #f8dfeb 0 calc(6 * var(--px)), #f3d2e1 0 calc(12 * var(--px)));
}

/* Planks, with the skirting board along the top of the floor */
.room::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--floor);
	border-top: calc(2 * var(--px)) solid #fff0f6;
	box-shadow: 0 calc(-1 * var(--px)) 0 var(--ink);
	background: repeating-linear-gradient(180deg, #c99067 0 calc(7 * var(--px)), #b47c55 0 calc(8 * var(--px)));
}

.room-frame {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: min(100%, 100cqh);
	translate: -50% 0;
}

.room-frame > i {
	position: absolute;
	display: block;
	width: calc(var(--w) * var(--px));
	height: calc(var(--h) * var(--px));
}

.room-frame svg {
	display: block;
	width: 100%;
	height: 100%;
	shape-rendering: crispEdges;
}

.room-lights {
	top: calc(4 * var(--px));
	left: 50%;
	translate: -50% 0;
}

.room-lights b {
	position: absolute;
	left: calc(var(--x) * var(--px));
	top: calc(var(--y) * var(--px));
	width: calc(2 * var(--px));
	height: calc(2 * var(--px));
	background: var(--color);
	box-shadow: 0 0 calc(3 * var(--px)) var(--color);
	animation: bulb 2.4s steps(1, end) var(--delay) infinite;
}

@keyframes bulb {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0.45; }
}

.room-window {
	top: max(10%, calc(14 * var(--px)));
	left: 50%;
	translate: -50% 0;
}

/* The sky sits behind the window's empty panes */
.room-sky {
	position: absolute;
	z-index: -1;
	left: calc(6 * var(--px));
	top: calc(4 * var(--px));
	width: calc(24 * var(--px));
	height: calc(20 * var(--px));
	overflow: hidden;
}

.room-photo {
	left: calc(9 * var(--px));
	bottom: calc(var(--floor) + 34 * var(--px));
}

.room-shelf {
	right: calc(6 * var(--px));
	bottom: calc(var(--floor) + 34 * var(--px));
}

.room-rug {
	left: 50%;
	bottom: calc(var(--floor) - 20 * var(--px));
	translate: -50% 0;
}

.room-bed {
	left: calc(1 * var(--px));
	bottom: calc(var(--floor) - 9 * var(--px));
}

/* Asleep on the blanket */
.room-cat {
	left: calc(29 * var(--px));
	bottom: calc(var(--floor) - 9 * var(--px) + 13 * var(--px));
}

.room-z {
	position: absolute;
	left: calc(1 * var(--px));
	top: calc(-6 * var(--px));
	color: var(--ink);
	font: calc(4 * var(--px)) "Silkscreen", monospace;
	opacity: 0;
	animation: snore 4s steps(4, end) infinite;
}

@keyframes snore {
	0% { opacity: 0; transform: none; }
	25% { opacity: 1; }
	75% { opacity: 1; transform: translate(calc(-2 * var(--px)), calc(-4 * var(--px))); }
	100% { opacity: 0; transform: translate(calc(-3 * var(--px)), calc(-6 * var(--px))); }
}

.room-plant {
	right: calc(37 * var(--px));
	bottom: calc(var(--floor) - 5 * var(--px));
}

.room-desk {
	right: calc(1 * var(--px));
	bottom: calc(var(--floor) - 7 * var(--px));
}

.room-lamp-glow {
	position: absolute;
	left: calc(-6 * var(--px));
	top: calc(-4 * var(--px));
	width: calc(26 * var(--px));
	height: calc(20 * var(--px));
	background: radial-gradient(closest-side, rgba(255, 225, 120, 0.45), transparent);
	pointer-events: none;
}

/* ---------- Sky: by her clock, with the weather on top ---------- */

.room-sky {
	background: #8fd3ff;
	transition: background-color 3s;
}

.room-sky[data-time="dawn"] {
	background: linear-gradient(#ffb8c8, #ffe0a8);
}

.room-sky[data-time="dusk"] {
	background: linear-gradient(#7b4bb0, #ff9a8a);
}

.room-sky[data-time="night"] {
	background: #1d1840;
}

.room-sky[data-weather="rain"] {
	filter: saturate(0.5) brightness(0.8);
}

.room-sky > i {
	position: absolute;
	display: block;
	transition: opacity 3s;
}

.sky-sun,
.sky-moon {
	right: calc(3 * var(--px));
	top: calc(2 * var(--px));
	width: calc(5 * var(--px));
	height: calc(5 * var(--px));
	opacity: 0;
	clip-path: polygon(20% 0, 80% 0, 80% 20%, 100% 20%, 100% 80%, 80% 80%, 80% 100%, 20% 100%, 20% 80%, 0 80%, 0 20%, 20% 20%);
}

.sky-sun {
	background: #ffe14d;
}

.sky-moon {
	background: #fff6dc;
}

[data-time="day"] .sky-sun,
[data-time="dawn"] .sky-sun,
[data-time="dusk"] .sky-sun,
[data-time="night"] .sky-moon {
	opacity: 1;
}

[data-weather="rain"] .sky-sun,
[data-weather="rain"] .sky-moon {
	opacity: 0;
}

.sky-star {
	left: var(--x);
	top: var(--y);
	width: var(--px);
	height: var(--px);
	background: #fff;
	opacity: 0;
}

[data-time="night"]:not([data-weather="rain"]) .sky-star {
	opacity: 1;
	animation: bulb 3s steps(1, end) var(--delay) infinite;
}

.sky-cloud {
	top: var(--y);
	left: 0;
	width: calc(10 * var(--px));
	height: calc(5 * var(--px));
	opacity: 0;
	animation: cloud 40s linear var(--delay) infinite;
}

.sky-cloud svg {
	display: block;
	width: 100%;
	height: 100%;
	shape-rendering: crispEdges;
}

@keyframes cloud {
	from { transform: translateX(calc(-10 * var(--px))); }
	to { transform: translateX(calc(24 * var(--px))); }
}

[data-weather="clouds"] .sky-cloud,
[data-weather="rain"] .sky-cloud {
	opacity: 1;
}

[data-time="night"] .sky-cloud {
	filter: brightness(0.45);
}

.sky-rain {
	inset: 0;
	opacity: 0;
	background: repeating-linear-gradient(105deg, transparent 0 calc(3 * var(--px)), rgba(220, 235, 255, 0.8) 0 calc(3.5 * var(--px)));
	background-size: 100% calc(6 * var(--px));
	animation: rain 0.5s steps(3, end) infinite;
}

@keyframes rain {
	to { background-position: calc(-1 * var(--px)) calc(6 * var(--px)); }
}

[data-weather="rain"] .sky-rain {
	opacity: 1;
}

/* ---------- Hidden hearts: in the same place as the room's frame, so they line up with its furniture ---------- */

.hidden-heart {
	position: absolute;
	width: calc(11 * var(--px));
	height: calc(10 * var(--px));
	padding: calc(2 * var(--px));
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.hidden-heart svg {
	display: block;
	width: 100%;
	height: 100%;
	shape-rendering: crispEdges;
	animation: twinkle-heart 6s steps(1, end) var(--delay, 0s) infinite;
}

/* In the folds of the window's left curtain, pink on pink (the window is 36 px wide, centred) */
.hidden-heart[data-heart="curtain"] {
	--delay: -1s;
	left: calc(50% - 20 * var(--px));
	top: calc(max(10%, 14 * var(--px)) + 17 * var(--px));
}

.hidden-heart[data-heart="plant"] {
	--delay: -4s;
	/* Among the leaves, on the plant's left (the plant sits 37 px in from the right) */
	right: calc(41 * var(--px));
	bottom: calc(var(--floor) + 4 * var(--px));
}

/* Over one of the little hearts in the blanket's pattern (blanket x 15–45 of the bed, which starts at 1) */
.hidden-heart[data-heart="bed"] {
	--delay: -2s;
	left: calc(22 * var(--px));
	bottom: calc(var(--floor) - 4 * var(--px));
}

/* Lying on the rug's left side (the rug is 48 px wide, centred) */
.hidden-heart[data-heart="rug"] {
	--delay: -3s;
	left: calc(50% - 18 * var(--px));
	bottom: calc(var(--floor) - 21 * var(--px));
}

/* As the desk drawer's knob */
.hidden-heart[data-heart="drawer"] {
	--delay: -5s;
	right: calc(4 * var(--px));
	bottom: calc(var(--floor) - 2 * var(--px));
}

/* As one of the fairy lights, the fourth from the left (the string is 100 px wide, centred) */
.hidden-heart[data-heart="lights"] {
	--delay: 0s;
	left: calc(50% - 27 * var(--px));
	top: calc(7 * var(--px));
}

/* Now and then a little sparkle, so a sharp eye can spot it */
@keyframes twinkle-heart {
	0%, 88% { filter: none; transform: none; }
	90% { filter: brightness(1.4) drop-shadow(0 0 var(--px) #fff); transform: scale(1.15); }
	93% { filter: brightness(1.2); transform: none; }
	96%, 100% { filter: none; transform: none; }
}

/* A ticket floating up from where a heart was found */
.found-ticket {
	position: absolute;
	z-index: 5;
	width: 39px;
	height: 24px;
	pointer-events: none;
}

.found-ticket svg {
	display: block;
	width: 100%;
	height: 100%;
	shape-rendering: crispEdges;
}

/* ---------- Home controls ---------- */

.home {
	padding: 18px 16px 22px;
}

/* Hero tickets she has */
.tickets {
	position: absolute;
	top: 18px;
	left: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 6px;
	border: 3px solid var(--ink);
	background: var(--paper);
	box-shadow: 3px 3px 0 var(--ink);
	font: 14px "Silkscreen", monospace;
}

.tickets .ticket {
	width: 26px;
	height: 16px;
	shape-rendering: crispEdges;
}

/* Hero recruitment: a little fanned stack of card backs */
.recruit {
	position: absolute;
	left: 16px;
	bottom: 22px;
	width: 84px;
	height: 96px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.recruit i {
	position: absolute;
	left: 18px;
	bottom: 0;
	width: 48px;
	height: 80px;
	border: 3px solid var(--ink);
	background: conic-gradient(from 45deg, #7b4bb0 25%, #6a3d9c 0 50%, #7b4bb0 0 75%, #6a3d9c 0) 0 0 / 10px 10px;
	box-shadow: 3px 3px 0 var(--ink), inset 0 0 0 3px #b48be0, inset 0 0 0 5px #e3c66a;
	transform-origin: 50% 100%;
}

.recruit i:nth-child(1) {
	rotate: -12deg;
}

.recruit i:nth-child(3) {
	rotate: 12deg;
}

.recruit:active i {
	translate: 0 3px;
}

/* A dot when there are enough tickets for a pull */
.badge {
	position: absolute;
	top: 0;
	right: 6px;
	width: 16px;
	height: 16px;
	border: 3px solid var(--ink);
	background: #e0245e;
	clip-path: polygon(25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%, 0 25%, 25% 25%);
}

/* Her thoughts, like a visual novel's first-person narration: a box above the card stack and phone.
   Tapping it dismisses it. */
.thought {
	position: absolute;
	left: 50%;
	bottom: 154px;
	width: min(100% - 32px, 420px);
	padding: 10px 14px;
	border: 3px solid var(--ink);
	background: rgba(255, 250, 253, 0.94);
	box-shadow: 4px 4px 0 var(--ink);
	color: var(--ink);
	font: 19.5px/1.35 "Cozette", monospace;
	text-align: center;
	transform: translateX(-50%);
	cursor: pointer;
}

/* ---------- Cards room: back home, and the pack's price ---------- */

.home-button {
	position: absolute;
	top: 18px;
	right: 16px;
	width: 34px;
	height: 34px;
	padding: 5px;
	border: 3px solid var(--ink);
	background: var(--paper);
	box-shadow: 3px 3px 0 var(--ink);
	cursor: pointer;
}

.home-button svg {
	display: block;
	width: 100%;
	height: 100%;
	shape-rendering: crispEdges;
}

.home-button:active {
	box-shadow: none;
	transform: translate(3px, 3px);
}

.hub .tickets {
	top: 18px;
	left: 16px;
}

.price {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
	font: 14px "Silkscreen", monospace;
}

.price .ticket {
	width: 26px;
	height: 16px;
	shape-rendering: crispEdges;
}

.pack-spot {
	display: grid;
	justify-items: center;
}

.pack-spot.locked .pack {
	filter: grayscale(0.7) drop-shadow(5px 5px 0 rgba(59, 31, 92, 0.35));
	opacity: 0.6;
	animation: none;
}

.pack-spot.locked .glint {
	display: none;
}

/* ---------- Birthday cake ---------- */

.cake-screen {
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-items: center;
	align-items: center;
	padding: 28px 16px 32px;
}

.bunting {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 28px;
	overflow: hidden;
	border-top: 3px solid var(--ink);
}

/* A pennant: a stepped pixel triangle */
.bunting i {
	position: absolute;
	top: 0;
	left: var(--x);
	width: 24px;
	height: 24px;
	background: var(--color);
	clip-path: polygon(0 0, 100% 0, 100% 30%, 83% 30%, 83% 55%, 67% 55%, 67% 80%, 33% 80%, 33% 55%, 17% 55%, 17% 30%, 0 30%);
}

.cake-title {
	margin: 18px 0 0;
	color: var(--ink);
	font: 22px/1.3 "Silkscreen", monospace;
	text-align: center;
	text-shadow: 3px 3px 0 var(--pink);
}

.cake {
	--cake-px: clamp(5px, min(100cqw, 100cqh) / 52, 9px);
	position: relative;
	width: calc(40 * var(--cake-px));
	height: calc(31 * var(--cake-px));
}

.cake .cake-art {
	display: block;
	width: 100%;
	height: 100%;
	shape-rendering: crispEdges;
}

/* A candle: a striped stick with a flickering flame; the button is bigger than the candle to be easy to hit */
.candle {
	position: absolute;
	left: calc(var(--x) * var(--cake-px) - 2 * var(--cake-px));
	bottom: calc(27 * var(--cake-px));
	width: calc(6 * var(--cake-px));
	height: calc(14 * var(--cake-px));
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.candle::before {
	content: "";
	position: absolute;
	left: calc(2 * var(--cake-px));
	bottom: 0;
	width: calc(2 * var(--cake-px));
	height: calc(6 * var(--cake-px));
	background: repeating-linear-gradient(180deg, #fffafd 0 var(--cake-px), #7fb8ff 0 calc(2 * var(--cake-px)));
	box-shadow: 0 0 0 1px var(--ink);
}

.flame {
	position: absolute;
	left: calc(2 * var(--cake-px));
	bottom: calc(7 * var(--cake-px));
	width: calc(2 * var(--cake-px));
	height: calc(3 * var(--cake-px));
	background: linear-gradient(#fff3a0 0 33%, #ffb52e 0 66%, #ff6a3a 0);
	box-shadow: 0 0 calc(4 * var(--cake-px)) rgba(255, 190, 80, 0.8);
	transform-origin: 50% 100%;
	animation: flicker 0.6s steps(1, end) infinite;
}

@keyframes flicker {
	0%, 49% { transform: none; }
	50%, 100% { transform: scaleY(1.34) translateX(calc(var(--cake-px) * 0.5)); }
}

.candle.out .flame {
	visibility: hidden;
}

.smoke {
	position: absolute;
	left: calc(2.5 * var(--cake-px));
	bottom: calc(8 * var(--cake-px));
	width: var(--cake-px);
	height: var(--cake-px);
	background: #b9a8cf;
	pointer-events: none;
}

.cake-hint {
	min-height: 1.3em;
	color: #8a6aab;
	font: 12px "Silkscreen", monospace;
}

/* The game's gift card: the reward for the candles */
.reward {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 4px 12px;
	padding: 10px 14px;
	border: 3px solid #a8641a;
	background: #ffe58a;
	box-shadow: inset 0 0 0 3px #fff3c2, 4px 4px 0 var(--ink);
	color: #5a3510;
	font: 19.5px/1.2 "Cozette", monospace;
	text-align: left;
	cursor: pointer;
}

.reward-icon {
	grid-row: span 2;
}

.reward .ticket {
	display: block;
	width: 52px;
	height: 32px;
	shape-rendering: crispEdges;
}

.cake-foot {
	display: grid;
	justify-items: center;
	gap: 12px;
	min-height: 90px;
}

.reward-title {
	font: 12px "Silkscreen", monospace;
}

/* Confetti: pixel squares */
.confetti {
	position: absolute;
	inset: 0;
	z-index: 20;
	overflow: hidden;
	pointer-events: none;
}

.confetti i {
	position: absolute;
	top: -12px;
	display: block;
	width: 8px;
	height: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.room-lights b,
	.room-z,
	.sky-star,
	.sky-cloud,
	.sky-rain,
	.flame,
	.hidden-heart svg {
		animation: none;
	}
}