/* block89.dsd164.com: the device is the design system.
   Palette from the game source: plastic #d6dade page field, LCD glass #c0beb8,
   ink #1a1a1a, purple-grey bezel #9292ab->#6e6e88, dark casing #484c52,
   and the four SNES button colours as the only saturated accents. */

@font-face {
	font-family: 'Silkscreen';
	src: url('../fonts/silkscreen-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Silkscreen';
	src: url('../fonts/silkscreen-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

:root {
	--plastic: #d6dade;
	--plastic-deep: #c3c8ce;
	--casing: #484c52;
	--casing-deep: #3a3e44;
	--lcd: #c0beb8;
	--lcd-light: #a8a6a0;
	--ink: #1a1a1a;
	--ink-soft: #3f3e3a;
	--bezel-hi: #9292ab;
	--bezel-lo: #6e6e88;
	--btn-green: #3ca03c;
	--btn-green-hi: #64d264;
	--btn-green-lo: #1e5a1e;
	--btn-yellow: #d2b432;
	--btn-yellow-hi: #f0dc6e;
	--btn-yellow-lo: #8c6e14;
	--btn-red: #be3232;
	--btn-red-hi: #e66464;
	--btn-red-lo: #6e1919;
	--btn-blue: #3250be;
	--btn-blue-hi: #648cE6;
	--btn-blue-lo: #19286e;
	--px: 'Silkscreen', monospace;
	--mono: ui-monospace, 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	background: var(--plastic);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 16px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--btn-blue); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }

.wrap { max-width: 920px; margin: 0 auto; padding: 0 20px; }

/* ─── Nav ─────────────────────────────────────────────── */

nav {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	max-width: 920px; margin: 0 auto; padding: 18px 20px;
}
nav .logo {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--px); font-weight: 700; font-size: 18px;
	text-decoration: none; letter-spacing: 1px;
}
nav .logo img { width: 38px; height: 38px; border-radius: 8px; }
nav .links { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
nav .links a {
	font-family: var(--px); font-size: 11px; letter-spacing: 1px;
	text-decoration: none; color: var(--ink-soft); padding: 6px 2px;
}
nav .links a:hover { color: var(--ink); }
nav .links a.play {
	background: radial-gradient(circle at 35% 30%, var(--btn-green-hi), var(--btn-green) 60%, var(--btn-green-lo) 130%);
	color: #fff; padding: 8px 16px; border-radius: 999px;
	box-shadow: 0 3px 0 var(--btn-green-lo), 0 5px 8px rgba(26,26,26,.25);
}
nav .links a.play:hover { filter: brightness(1.06); }
nav .links a.play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-green-lo); }

/* ─── Hero ────────────────────────────────────────────── */

.hero { padding: 28px 0 8px; }
.hero .wrap {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	gap: 40px; align-items: center;
}
.hero h1 {
	font-family: var(--px); font-weight: 700;
	font-size: clamp(40px, 7vw, 64px); line-height: 1; letter-spacing: 2px;
}
.hero .tagline {
	font-family: var(--px); font-size: clamp(13px, 2vw, 16px);
	color: var(--ink-soft); margin: 10px 0 18px; letter-spacing: 1px;
}
.hero .lede { max-width: 46ch; }
.hero .fine {
	font-family: var(--px); font-size: 11px; letter-spacing: 2px;
	color: var(--ink-soft); margin-top: 18px;
}

.device { max-width: 420px; margin: 0 auto; }
.device svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 28px rgba(58,62,68,.35)); }

/* the falling piece: discrete LCD steps, like the game */
.fall { animation: herofall 5.6s steps(16, end) infinite; }
@keyframes herofall {
	from { transform: translateY(-16px); }
	to   { transform: translateY(112px); }
}
@media (prefers-reduced-motion: reduce) {
	.fall { animation: none; transform: translateY(48px); }
}

/* ─── Button tray (main CTA) ──────────────────────────── */

.tray {
	display: inline-flex; gap: 26px; align-items: flex-start;
	background: linear-gradient(#d0d0cc, #c4c4c0 30%, #b8b8b4 70%, #acacaa);
	border-radius: 22px; padding: 18px 26px 14px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 4px 10px rgba(26,26,26,.2);
	margin-top: 22px;
}
.rbtn { text-decoration: none; text-align: center; display: block; }
.rbtn .disc {
	width: 72px; height: 72px; border-radius: 50%; margin: 0 auto;
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,.92); font-size: 26px; line-height: 1;
	box-shadow: 0 5px 0 rgba(0,0,0,.28), 0 8px 12px rgba(26,26,26,.3), inset 0 2px 3px rgba(255,255,255,.35);
	transition: transform .06s, box-shadow .06s;
}
.rbtn:hover .disc { filter: brightness(1.07); }
.rbtn:active .disc { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.28), inset 0 2px 6px rgba(0,0,0,.3); }
.rbtn small {
	display: block; margin-top: 10px;
	font-family: var(--px); font-size: 10px; letter-spacing: 1px; color: var(--ink-soft);
}
.rbtn .disc.green { background: radial-gradient(circle at 35% 30%, var(--btn-green-hi), var(--btn-green) 55%, var(--btn-green-lo) 135%); }
.rbtn .disc.blue { background: radial-gradient(circle at 35% 30%, var(--btn-blue-hi), var(--btn-blue) 55%, var(--btn-blue-lo) 135%); }
.rbtn .disc.red { background: radial-gradient(circle at 35% 30%, var(--btn-red-hi), var(--btn-red) 55%, var(--btn-red-lo) 135%); }
.rbtn .disc.yellow { background: radial-gradient(circle at 35% 30%, var(--btn-yellow-hi), var(--btn-yellow) 55%, var(--btn-yellow-lo) 135%); }

/* ─── Proof strip ─────────────────────────────────────── */

.proof { margin-top: 34px; border-top: 2px solid var(--plastic-deep); border-bottom: 2px solid var(--plastic-deep); }
.proof .wrap {
	display: flex; flex-wrap: wrap; gap: 8px 34px; justify-content: center;
	padding: 14px 20px; font-family: var(--px); font-size: 11px; letter-spacing: 1px;
	color: var(--ink-soft);
}
.proof b { font-weight: 700; font-size: 14px; color: var(--ink); }

/* ─── Sections ────────────────────────────────────────── */

section { padding: 58px 0 8px; }
.eyebrow {
	font-family: var(--px); font-size: 11px; letter-spacing: 3px;
	color: #55556e; text-transform: uppercase;
}
h2 {
	font-family: var(--px); font-weight: 700; letter-spacing: 1px;
	font-size: clamp(22px, 4vw, 30px); line-height: 1.25; margin: 6px 0 14px;
}
.section-intro { max-width: 62ch; }
section .wrap > p + p { margin-top: 12px; }

/* ─── Reviews carousel (dark casing band) ─────────────── */

.reviews {
	background: var(--casing); color: var(--plastic);
	margin-top: 58px; padding: 54px 0 46px;
	box-shadow: inset 0 6px 12px rgba(0,0,0,.25), inset 0 -4px 8px rgba(0,0,0,.2);
}
.reviews .eyebrow { color: var(--plastic); }
.reviews h2 { color: #fff; }
.carousel { position: relative; margin-top: 22px; }
.car-track {
	display: flex; gap: 18px; overflow-x: auto;
	scroll-snap-type: x mandatory; scrollbar-width: none;
	padding: 4px 2px 10px;
}
.car-track::-webkit-scrollbar { display: none; }
.car-card {
	flex: 0 0 min(430px, 86%); scroll-snap-align: center;
	background: var(--lcd); color: var(--ink);
	border: 6px solid; border-image: linear-gradient(var(--bezel-hi), var(--bezel-lo)) 1;
	border-radius: 6px; padding: 20px 22px 16px;
	box-shadow: inset 0 0 0 1px rgba(26,26,26,.15), 0 6px 14px rgba(0,0,0,.35);
}
.car-card .stars { color: var(--ink); letter-spacing: 4px; font-size: 15px; }
.car-card blockquote { font-size: 17px; line-height: 1.5; margin: 10px 0 8px; }
.car-card .orig { font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.car-card cite {
	display: block; margin-top: 10px; font-style: normal;
	font-family: var(--px); font-size: 10px; letter-spacing: 1px; color: var(--ink-soft);
}
.car-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; }
.car-btn {
	width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
	color: rgba(255,255,255,.92); font-size: 20px;
	box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.35);
	transition: transform .06s, box-shadow .06s;
}
.car-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 2px 5px rgba(0,0,0,.3); }
.car-btn.prev { background: radial-gradient(circle at 35% 30%, var(--btn-green-hi), var(--btn-green) 55%, var(--btn-green-lo) 135%); }
.car-btn.next { background: radial-gradient(circle at 35% 30%, var(--btn-red-hi), var(--btn-red) 55%, var(--btn-red-lo) 135%); }
.car-dots { display: flex; gap: 8px; }
.car-dots span {
	width: 10px; height: 10px; border-radius: 2px;
	background: rgba(214,218,222,.3);
}
.car-dots span.on { background: var(--lcd); }

/* ─── Download keys ───────────────────────────────────── */

.stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.stores .key {
	flex: 1 1 180px; text-decoration: none; text-align: center;
	background: linear-gradient(#3a3a3a, #2c2c2c);
	color: #d6dade; border-radius: 12px; padding: 16px 14px 13px;
	border: 1px solid #555;
	font-family: var(--px); font-size: 13px; letter-spacing: 1px;
	box-shadow: 0 4px 0 #141414, 0 7px 10px rgba(26,26,26,.3);
	transition: transform .06s, box-shadow .06s;
}
.stores .key small { display: block; font-size: 10px; color: #a9a9a9; margin-top: 5px; letter-spacing: 1px; }
.stores .key:hover { filter: brightness(1.15); }
.stores .key:active { transform: translateY(3px); box-shadow: 0 1px 0 #141414; }
.stores .key.lit {
	background: linear-gradient(#cdcbc5, var(--lcd));
	color: var(--ink); border-color: var(--lcd-light);
	box-shadow: 0 4px 0 #8a8880, 0 7px 10px rgba(26,26,26,.25);
}
.stores .key.lit small { color: var(--ink-soft); }
.stores .key.lit:active { box-shadow: 0 1px 0 #8a8880; }

/* ─── Screenshots ─────────────────────────────────────── */

.shots { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 24px; justify-content: center; }
.shots figure { flex: 1 1 200px; max-width: 250px; }
.shots img {
	border-radius: 14px; width: 100%;
	border: 5px solid; border-image: linear-gradient(var(--bezel-hi), var(--bezel-lo)) 1;
	box-shadow: 0 10px 22px rgba(58,62,68,.3);
}
.shots figcaption {
	font-family: var(--px); font-size: 10px; letter-spacing: 2px;
	color: var(--ink-soft); text-align: center; margin-top: 10px;
}

/* ─── The piece set / how it works ────────────────────── */

.pieces {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px; margin-top: 24px; list-style: none;
}
.pieces li {
	background: var(--lcd); border-radius: 8px; padding: 14px 12px 10px;
	text-align: center;
	box-shadow: inset 0 0 0 1px rgba(26,26,26,.12), 0 2px 5px rgba(58,62,68,.15);
}
.pieces svg { width: 68px; height: 68px; margin: 0 auto 8px; display: block; }
.pieces b { font-family: var(--px); font-size: 10px; letter-spacing: 1px; font-weight: 400; color: var(--ink-soft); }

.mechanics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 26px; }
.mech {
	background: var(--lcd); border-radius: 10px; padding: 20px 20px 16px;
	box-shadow: inset 0 0 0 1px rgba(26,26,26,.12), 0 3px 7px rgba(58,62,68,.18);
}
.mech h3 { font-family: var(--px); font-size: 13px; letter-spacing: 1px; margin-bottom: 8px; }
.mech p { font-size: 14.5px; }
.mech p + p { margin-top: 8px; }

/* ─── Guides ──────────────────────────────────────────── */

.guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }
.gcard {
	display: flex; gap: 14px; align-items: flex-start; text-decoration: none;
	background: var(--lcd); border-radius: 10px; padding: 18px;
	box-shadow: inset 0 0 0 1px rgba(26,26,26,.12), 0 3px 7px rgba(58,62,68,.18);
	transition: transform .08s, box-shadow .08s;
}
.gcard:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(26,26,26,.12), 0 6px 12px rgba(58,62,68,.28); }
.gcard svg { width: 40px; height: 40px; flex: 0 0 40px; margin-top: 2px; }
.gcard b { font-family: var(--px); font-size: 12px; letter-spacing: 1px; display: block; line-height: 1.4; }
.gcard span { font-size: 13.5px; color: var(--ink-soft); display: block; margin-top: 4px; }

/* ─── Story ───────────────────────────────────────────── */

.story .wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.timeline { list-style: none; margin-top: 18px; }
.timeline li { display: flex; gap: 16px; padding: 10px 0; }
.timeline .year {
	font-family: var(--px); font-weight: 700; font-size: 15px;
	flex: 0 0 64px; color: #55556e;
}
.timeline p { font-size: 15px; }
.story figure { max-width: 250px; margin: 0 auto; }
.story figcaption {
	font-family: var(--px); font-size: 10px; letter-spacing: 2px;
	color: var(--ink-soft); text-align: center; margin-top: 10px;
}
.story img {
	border-radius: 14px;
	border: 5px solid; border-image: linear-gradient(var(--bezel-hi), var(--bezel-lo)) 1;
	box-shadow: 0 10px 22px rgba(58,62,68,.3);
}

/* ─── FAQ ─────────────────────────────────────────────── */

.faq { max-width: 720px; }
.faq details {
	border-bottom: 2px solid var(--plastic-deep); padding: 4px 0;
}
.faq summary {
	font-family: var(--px); font-size: 13px; letter-spacing: .5px;
	padding: 12px 4px; cursor: pointer; list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--px); font-weight: 700; color: var(--bezel-lo); }
.faq details[open] summary::after { content: '-'; }
.faq details p { padding: 0 4px 14px; font-size: 15px; max-width: 62ch; }
.faq a { color: var(--btn-blue); }

/* ─── Final CTA ───────────────────────────────────────── */

.finale { text-align: center; padding-bottom: 40px; }
.finale .tray { text-align: center; }

/* ─── Footer ──────────────────────────────────────────── */

footer {
	background: var(--casing); color: var(--lcd);
	margin-top: 60px; padding: 36px 0 42px;
	box-shadow: inset 0 6px 12px rgba(0,0,0,.25);
}
footer .cols { display: flex; flex-wrap: wrap; gap: 20px 56px; }
footer h4 { font-family: var(--px); font-size: 11px; letter-spacing: 2px; color: var(--plastic); margin-bottom: 10px; }
footer ul { list-style: none; }
footer li { margin: 5px 0; font-size: 14px; }
footer a { color: var(--plastic); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .legal {
	margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(214,218,222,.2);
	font-family: var(--px); font-size: 10px; letter-spacing: 1px; color: var(--plastic);
}
footer .legal a { text-decoration: underline; }

/* ─── Guide article pages ─────────────────────────────── */

.article { max-width: 720px; margin: 0 auto; padding: 30px 20px 10px; }
.article .crumbs { font-family: var(--px); font-size: 10px; letter-spacing: 1px; color: var(--ink-soft); }
.article .crumbs a { color: var(--ink-soft); }
.article h1 {
	font-family: var(--px); font-weight: 700; letter-spacing: 1px;
	font-size: clamp(24px, 5vw, 34px); line-height: 1.25; margin: 14px 0 6px;
}
.article .g-icon { width: 52px; height: 52px; margin: 18px 0 2px; }
.article h2 { font-size: clamp(17px, 3vw, 21px); margin-top: 34px; }
.article p { margin: 13px 0; }
.article ul, .article ol { margin: 13px 0 13px 24px; }
.article li { margin: 6px 0; }
.article a { color: var(--btn-blue); }
.article .cta-line {
	background: var(--lcd); border-radius: 10px; padding: 16px 20px;
	margin: 26px 0; box-shadow: inset 0 0 0 1px rgba(26,26,26,.12);
}
.article .next {
	font-family: var(--px); font-size: 11px; letter-spacing: 1px;
	margin-top: 34px; padding-top: 18px; border-top: 2px solid var(--plastic-deep);
}

/* ─── Responsive ──────────────────────────────────────── */

@media (max-width: 760px) {
	.hero .wrap { grid-template-columns: 1fr; gap: 26px; }
	.hero .device { grid-row: 1; max-width: 300px; }
	.story .wrap { grid-template-columns: 1fr; }
	.tray { gap: 20px; padding: 16px 20px 12px; }
	.rbtn .disc { width: 62px; height: 62px; font-size: 22px; }
	section { padding-top: 44px; }
}