body{
	margin:0;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: 100;

	overflow: hidden;

}
canvas{
	float:left;
	margin-right: 20px;
}
#whole_container{
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
/* Each section is its own full-viewport page; only the active one is
   visible (crossfade). No vertical stacking or %-based sliding, so nothing
   peeks in when the mobile toolbar changes the viewport height. */
#screen_one, #screen_two, #screen_three{
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	-webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}
#screen_one.active, #screen_two.active, #screen_three.active{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
#screen_one{
	background: #fff;
}
/* Intro title screen: a fixed 640x380 stage, scaled to fit by JS (same
   pattern as the play area). The dark "door" wordmark + the two hints are
   HTML/CSS; the transparent #canvas_intro overlay draws the interactive
   peep/key/door demo on top of them. */
#intro_stage{
	position: absolute;
	width: 640px;
	height: 380px;
	/* top / left / transform are set by JS fit() */
}
/* Must visually match the collision circle in INTRO_LEVEL
   (radius 120 @ canvas centre) — the peep is blocked at radius+5. */
#intro_circle{
	position: absolute;
	top: 50%; left: 50%;
	width: 240px; height: 240px;
	margin: -120px 0 0 -120px;
	border-radius: 50%;
	background: #333;
	display: flex;
	align-items: center;
	justify-content: center;
}
#intro_word{
	color: #fff;
	font-size: 70px;
	font-weight: 100;
	letter-spacing: 1px;
	line-height: 1;
}
#intro_hint_left, #intro_hint_right{
	position: absolute;
	top: 50%;
	width: 150px;
	color: #999;
	font-size: 19px;
	line-height: 1.3;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#intro_hint_left{ left: 0; text-align: right; }
#intro_hint_right{ right: 0; text-align: left; }
canvas#canvas_intro{
	position: absolute;
	top: 0; left: 0;
	float: none;
	margin: 0;
	z-index: 2;
}
#screen_two{
	background:#333;
}
#screen_three{
	background:#fff;

}
#canvas_container{
	width:940px;
	height:380px;
	position: absolute;
	margin:auto;
	top:0; left:0; right:0; bottom:0;
	background-image: url(levels_bg.png);
	background-repeat: no-repeat;
}

#valentines_text, #rewind_text, #replay_text{
	display: none;
	position: absolute;
	bottom:0;
	width:100%;
	height:50px;
	color:#666;
	font-size: 30px;
	text-align: center;
	letter-spacing: 0px;

	-webkit-transition: letter-spacing 5s ease-out;
	-moz-transition: letter-spacing 5s ease-out;
	-ms-transition: letter-spacing 5s ease-out;
	transition: letter-spacing 5s ease-out;

}
#rewind_text, #replay_text{
	color: #ccc;
	letter-spacing: 2px;
	/*text-align: left;*/
}
/* ---- End / credits screen (minimal) ---- */
/* Flex + margin:auto = "safe centering": centred when it fits, and when
   the content is taller than the viewport it scrolls from the top instead
   of clipping the title under the browser bar. */
#screen_three{
	display: flex;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}
#end_container{
	width: 520px;
	max-width: 90%;
	margin: auto;
	padding: 30px 0 40px;

	color: #444;
	text-align: center;
}
#end_title{
	font-size: 40px;
	font-weight: 100;
	margin: 0 0 12px 0;
	color: #222;
	letter-spacing: 1px;
}
#end_lead{
	font-size: 20px;
	line-height: 1.5;
	color: #666;
	margin: 0 0 28px 0;
}
#end_hint{
	font-size: 15px;
	color: #999;
	margin: 0 0 10px 0;
}
input#your_message{
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-size: 22px;
	padding: 14px 16px;
	border: 2px solid #eee;
	border-radius: 12px;
	margin: 0 0 28px 0;

	color: #444;
	background: #fafafa;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: 100;

	text-align: center;

	-webkit-transition: border-color 0.15s ease-out, background 0.15s ease-out;
	transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
input#your_message:focus{
	outline: none;
	border-color: #ff9db0;
	background: #fff;
}
input#your_message::placeholder{
	color: #bbb;
}
#link_row{
	display: flex;
	gap: 8px;
	align-items: stretch;
}
input#your_link{
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	font-size: 15px;
	padding: 12px 14px;
	background: #f2f2f2;
	border: none;
	border-radius: 10px;

	color: #666;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: 100;

	text-align: left;
}
#copy_btn{
	flex: 0 0 auto;
	font-size: 15px;
	padding: 0 22px;
	border: none;
	border-radius: 10px;
	cursor: pointer;

	color: #fff;
	background: #ff5a7a;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	letter-spacing: 0.5px;

	-webkit-transition: background 0.15s ease-out, transform 0.1s ease-out;
	transition: background 0.15s ease-out, transform 0.1s ease-out;
}
#copy_btn:hover{
	background: #ff3d63;
}
#copy_btn:active{
	transform: scale(0.96);
}
#copy_btn.copied{
	background: #3fbf7f;
}
#end_credits{
	margin-top: 44px;
	font-size: 14px;
	color: #bbb;
}
#end_credits a{
	color: #999;
	text-decoration: none;
	border-bottom: 1px dotted #ccc;
}
#end_credits a:hover{
	color: #ff5a7a;
	border-bottom-color: #ff9db0;
}
#end_credits .sep{
	margin: 0 8px;
	color: #ddd;
}

#loading{
	position: fixed;
	top:0; left:0;

	width:100%;
	height: 100%;

	background: #333;
	color: #fff;
	font-size: 30px;
	letter-spacing: 5px;
	text-align:center;

	z-index: 1;
}
#loading > div{
	position: absolute;
	margin: auto;
	top:0; left:0; right:0; bottom:0;
	width:100%; height:50px;
}

/* ---- Mobile ---- */
html, body{
	/* stop pull-to-refresh / rubber-banding from stealing touch drags */
	overscroll-behavior: none;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
/* ---- Rotate-to-landscape prompt ---- */
#rotate_device{
	display: none;
	position: fixed;
	top:0; left:0;
	width:100%; height:100%;
	background:#fff;
	color:#555;
	z-index: 4; /* above #loading (1) */
	font-size: 26px;
	letter-spacing: 2px;
	text-align: center;
}
#rotate_device > div{
	position: absolute;
	margin:auto;
	top:0; left:0; right:0; bottom:0;
	height: 240px;
}
#rotate_anim{
	display: block;
	width: 150px;
	height: auto;
	margin: 0 auto 24px;
}
/* Only on touch devices (phones/tablets) held in portrait.
   `pointer: coarse` = touchscreen; excludes desktop mouse (pointer: fine),
   so a narrow/tall desktop window never triggers it. */
@media (orientation: portrait) and (max-width: 960px) and (pointer: coarse){
	#rotate_device{ display: block; }
}
/* The share page is fine in portrait — never show the rotate prompt there. */
body.on-end-screen #rotate_device{ display: none !important; }

/* the 3-canvas play area is a fixed 940px; JS scales it to fit width (see index.html) */
#canvas_container{
	transform-origin: center center;
}
@media (max-width: 960px){
	/* keep the credits screen inside the viewport */
	#end_container{
		width: 90%;
		max-width: 520px;
	}
	#end_title{ font-size: 32px; }
	#end_lead{ font-size: 18px; }
}