@charset "UTF-8";
/* Layout: minecraft.net at the 1.0 release, Nov 2011. Slim 48px dirt
   header with the small logo, menu and a link on the right, 1000px page on
   dark stone, guide steps in grey "tutorialBox" panels on the left,
   animals + orange button on the right, quiet grey footer.
   Single dark look on purpose, like the original. */

:root {
	color-scheme: dark;
	--stone: #111;        /* page ground behind the stone tile */
	--dirt: #211710;      /* header ground behind the dirt tile */
	--text: #e0d0d0;      /* the original's pinkish grey body text */
	--box: #333;          /* tutorialBox fill */
	--box-edge: #444;
	--box-edge-lit: #555;
	--frame: #121212;     /* screenshot + video frame */
	--footer: #444;
	--footer-link: #777;
	--link: #aaf;
	--link-visited: #aaa;
	--orange-hi: #f9a13a; /* Buy Now button */
	--orange-lo: #e07a12;
	--body-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--menu-font: var(--body-font);
	--yt-red: #e00;       /* 2011 YouTube progress bar */
	--yt-bar-hi: #393939;
	--yt-bar-lo: #1c1c1c;
	--yt-icon: #ccc;
}

* { box-sizing: border-box; }

html { background: var(--stone); }

body {
	margin: 0;
	border: none;
	background-color: var(--stone);
	background-image: url('img/bg_main.png');
	color: var(--text);
	font-weight: normal;
	font-family: var(--body-font);
	font-size: 14px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a:link, a:visited { color: var(--link); text-decoration: none; }
a:hover { color: #fff; }
a:active { color: #ff0; }
a:focus-visible, .getButton:focus-visible { outline: 2px solid #ff0; outline-offset: 2px; }

h1 { margin: 0 0 5px; font-size: 28px; text-wrap: balance; }
h3 { margin: 0 0 3px; font-size: 16px; }
p { margin: 0; line-height: 1.45; }

/* ---------- header ---------- */

header {
	height: 48px;
	background: var(--dirt) url('img/bg_top.png');
	font-family: var(--menu-font);
}

#header_container {
	max-width: 1000px;
	height: 48px;
	margin: 0 auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	display: flex;
	align-items: center;
	gap: 10px;
}

#logo { flex: none; display: block; line-height: 0; margin-right: 2px; }
#logo img { border: 0; width: 248px; height: 46px; margin-top: 1px; }

#menu { display: flex; gap: 10px; flex: 1; min-width: 0; white-space: nowrap; }

header a, header a:link, header a:visited {
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}
a.menuItem, a.menuItem:link, a.menuItem:visited { color: #fff; }
a.menuItem:hover { color: #ccc; }

#userbox { flex: none; white-space: nowrap; }
#userbox a:hover { color: #fff; }

/* ---------- page ---------- */

#content {
	flex: 1;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding-block: 34px 40px;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

#guide { flex: 1; min-width: 0; max-width: 640px; }

.intro { font-size: 13px; margin-bottom: 18px; }

#steps { display: flex; flex-direction: column; gap: 16px; }

.tutorialBox {
	padding: 10px 15px 18px;
	background: var(--box);
	border: var(--box-edge) solid 2px;
	border-bottom-color: var(--box-edge-lit);
	border-right-color: var(--box-edge-lit);
	scroll-margin-top: 12px;
}
.tutorialBox p + .shot, .tutorialBox .shot + p { margin-top: 10px; }

/* the original wrapped its video in this black frame */
.shot {
	display: block;
	width: fit-content;
	max-width: 100%;
	background: var(--frame);
	padding: 5px;
	line-height: 0;
}
.shot img { max-width: 100%; height: auto; border: 0; }

.infoBox {
	margin-top: 16px;
	background: var(--stone);
	border: #666 1px solid;
	text-align: left;
	padding: 10px 15px;
	line-height: 1.45;
}

/* ---------- right column ---------- */

#side {
	flex: none;
	width: 300px;
	text-align: center;
	position: sticky;
	top: 12px;
}
#side img.animals { width: 300px; max-width: 100%; height: auto; }

.getButton, .getButton:link, .getButton:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 212px;
	max-width: 100%;
	height: 44px;
	margin: 18px 0 22px;
	padding: 0 0 2px;
	font-family: "Trebuchet MS", "Lucida Grande", Arial, sans-serif;
	font-size: 24px;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 -1px 0 rgba(120, 60, 0, .6);
	background: var(--orange-lo);
	background: linear-gradient(var(--orange-hi), var(--orange-lo));
	border: 1px solid #b85f08;
	border-radius: 5px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.getButton:hover { color: #fff; filter: brightness(1.08); }

.sideVer { margin: -8px 0 16px; font-size: 15px; }
.sideVer b { color: #fff; }
.sideBig { font-size: 15px; line-height: 1.4; }
.sideSmall { font-size: 11px; line-height: 1.4; margin-top: 16px; }

#side ol {
	margin: 20px 0 0;
	padding: 0 0 0 50px;
	text-align: left;
	font-size: 13px;
	line-height: 1.6;
}

/* ---------- footer ---------- */

.footer {
	text-align: center;
	font-size: 13px;
	color: var(--footer);
	padding-block: 14px 16px;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	width: 100%;
}
.footer a:link, .footer a:visited { color: var(--footer-link); }
.footer a:hover { color: #aaa; }

/* ---------- small screens ---------- */

@media (max-width: 860px) {
	#content { flex-direction: column; gap: 28px; }
	#guide { flex: none; max-width: none; width: 100%; }
	#side { position: static; width: 100%; }
	#side ol { display: none; }
}

@media (max-width: 760px) {
	#logo img { width: 186px; height: 34.5px; }
	header a, header a:link, header a:visited { font-size: 14px; }
	#menu { gap: 9px; }
	h1 { font-size: 23px; }
}
@media (max-width: 560px) {
	#userbox { display: none; }
	#logo img { width: 124px; height: 23px; }
	#menu { gap: 8px; }
	header a, header a:link, header a:visited { font-size: 13px; }
}
@media (max-width: 380px) {
	#logo img { width: 100px; height: 18.5px; }
	#menu { gap: 6px; }
}

/* ---------- hub pages ---------- */

.home { display: flex; flex-direction: column; gap: 18px; font-size: 16px; margin-top: 12px; }

.placeholder {
	width: 100%;
	max-width: 480px;
	padding: 60px 10px;
	line-height: 1.4;
	text-align: center;
	color: #888;
	border: 2px dashed #555;
}
.tutorialBox p + .placeholder { margin-top: 10px; }
.intro + .infoBox { margin-top: 0; }
.infoBox + #steps { margin-top: 16px; }

/* ---------- homepage slideshow (2011 YouTube player look) ---------- */

#slideshow { margin-top: 12px; }

.videoEmbed { border: 5px solid var(--frame); background: var(--frame); max-width: 640px; }

#slideStage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	background: #000;
	cursor: zoom-in;
	touch-action: pan-y pinch-zoom;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
#slideStage.dragging { cursor: grabbing; }
#slideTrack { display: flex; height: 100%; will-change: transform; }
#slideTrack .slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
}
#slideTrack .slide:not([src]) { visibility: hidden; }

/* scrub bar: grey track, lighter "loaded" part, red played part, white knob */
#slideScrub {
	position: relative;
	height: 9px;
	background: #2b2b2b;
	border-top: 2px solid #111;
	cursor: pointer;
	touch-action: none;
}
#slideLoaded, #slidePlayed { position: absolute; left: 0; top: 2px; height: 3px; }
#slideLoaded { background: #555; }
#slidePlayed { background: var(--yt-red); max-width: 100%; }
#slideKnob {
	position: absolute;
	right: -7px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, #fff 0 35%, #d6d6d6 70%, #9a9a9a);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .6);
}
#slideScrub:hover #slideLoaded, #slideScrub:hover #slidePlayed,
#slideScrub.active #slideLoaded, #slideScrub.active #slidePlayed { top: 1px; height: 5px; }

/* control bar under the picture */
#slideBar {
	display: flex;
	align-items: stretch;
	height: 30px;
	background: linear-gradient(var(--yt-bar-hi), var(--yt-bar-lo));
	border-top: 1px solid #4a4a4a;
	font-family: Arial, Helvetica, sans-serif;
}
.barBtn {
	flex: none;
	width: 38px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-right: 1px solid #111;
	box-shadow: 1px 0 0 #3c3c3c;
	color: var(--yt-icon);
	cursor: pointer;
}
.barBtn svg { fill: currentColor; filter: drop-shadow(0 1px 0 #000); }
.barBtn:hover { color: #fff; background: linear-gradient(#454545, #262626); }
.barBtn:active { background: #151515; }
#slideFull { border-right: 0; box-shadow: none; border-left: 1px solid #111; }
#slidePlay .icoPlay, #slideshow.paused #slidePlay .icoPause { display: none; }
#slideshow.paused #slidePlay .icoPlay { display: block; }
.barTime {
	flex: none;
	align-self: center;
	padding: 0 10px;
	font-size: 12px;
	color: #999;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.barTime b { color: #fff; }
.barGap { flex: 1; }
#slideshow.single #slidePlay, #slideshow.single #slidePrev, #slideshow.single #slideNext { display: none; }

.barBtn:focus-visible, #slideStage:focus-visible, #slideScrub:focus-visible { outline: 2px solid #ff0; outline-offset: -2px; }

/* phones: bigger targets; swiping does prev/next, so those buttons step aside */
@media (pointer: coarse) {
	#slideBar { height: 40px; }
	.barBtn { width: 46px; }
	#slideScrub { height: 14px; }
	#slideLoaded, #slidePlayed { top: 4px; height: 4px; }
	#slideScrub:hover #slideLoaded, #slideScrub:hover #slidePlayed { top: 4px; height: 4px; }
	#slideKnob { width: 18px; height: 18px; right: -9px; margin-top: -9px; }
	#slidePrev, #slideNext { display: none; }
}

#slideBig {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-block: 16px;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	background: rgba(0, 0, 0, .88);
	cursor: zoom-out;
	touch-action: pan-y pinch-zoom;
}
#slideBig[hidden] { display: none; }
#slideBig .videoEmbed { max-width: 100%; line-height: 0; }
#slideBigImg { max-width: 100%; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); }
.slideHint { font-size: 12px; color: #999; }
.hintTouch { display: none; }
@media (pointer: coarse) { .hintMouse { display: none; } .hintTouch { display: inline; } }

@media (prefers-reduced-motion: reduce) { #slideTrack { transition: none !important; } }

/* ---------- guide list (homepage box + All Guides page) ---------- */

.guideBox {
	background: var(--stone);
	border: #666 1px solid;
	padding: 8px 10px 10px;
}
.guideHead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.guideHead h3 { margin: 0; }
.guideHead a { font-size: 13px; }

.guideList { display: flex; flex-direction: column; gap: 6px; }

.guideRow, .guideRow:link, .guideRow:visited {
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 58px;
	padding: 6px 12px;
	background: var(--box);
	border: var(--box-edge) solid 2px;
	border-bottom-color: var(--box-edge-lit);
	border-right-color: var(--box-edge-lit);
	color: var(--text);
	text-decoration: none;
}
.guideRow b { font-size: 15px; line-height: 1.25; color: var(--link); text-decoration: underline; }
.guideRow span { font-size: 13px; line-height: 1.35; }
.guideRow:hover { background: #3c3c3c; color: var(--text); }
.guideRow:hover b { color: #fff; }

/* homepage: three rows show, the rest scroll */
.guideList.scroll {
	max-height: 186px; /* 3 rows of 58px + 2 gaps of 6px */
	overflow-y: auto;
	scrollbar-color: #666 var(--frame);
	scrollbar-width: thin;
}
.guideList.scroll .guideRow { height: 58px; }
.guideList.scroll .guideRow b, .guideList.scroll .guideRow span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.guideList.scroll:focus-visible { outline: 2px solid #ff0; outline-offset: 2px; }

/* ---------- homepage quote ---------- */

/* sidebar box, same grey panel as the guide list */
.sayBox {
	margin-top: 24px;
	padding: 8px 12px 12px;
	text-align: left;
	background: var(--box);
	border: var(--box-edge) solid 2px;
	border-bottom-color: var(--box-edge-lit);
	border-right-color: var(--box-edge-lit);
}
.sayBox h3 { margin: 0 0 8px; font-size: 15px; color: #fff; }

#quote {
	margin: 0;
	padding: 2px 0 2px 14px;
	border-left: 3px solid #666;
}
#quoteText { font-style: italic; white-space: pre-line; }
#quoteText::before { content: "\201C"; }
#quoteText::after { content: "\201D"; }
#quoteBy { margin-top: 4px; font-size: 13px; color: var(--link-visited); }
#quoteBy[hidden] { display: none; }