/* nima.house: the Arcade. A hub of cabinets, then one big screen. Always dark: it's an arcade. */
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/press-start-2p-latin-400-normal.woff2") format("woff2"); }

.arcade-app { --px: "Press Start 2P", ui-monospace, monospace; --a-gold: #e8b04a; --a-cream: #f4e6c4; --a-teal: #7fb3a1; }

/* ---------- Hub ---------- */
.hub__insert { margin: 0 0 1.25rem; font: 400 0.62rem/1.6 var(--px); letter-spacing: 0.1em; color: var(--gold); animation: hub-blink 1.4s steps(2) infinite; }
@keyframes hub-blink { 50% { opacity: 0.35; } }
.hub__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.hub__tile {
	position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.7rem; height: 100%; padding: 1rem 1rem 1.05rem; border-radius: 20px;
	color: var(--a-cream); text-decoration: none; overflow: hidden;
	background: radial-gradient(120% 70% at 50% 0%, rgba(232, 176, 74, 0.12), transparent 60%), linear-gradient(180deg, #17120c, #0b0a08 55%);
	border: 1px solid rgba(232, 176, 74, 0.38); box-shadow: 0 26px 50px -32px rgba(0, 0, 0, 0.9);
	transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease);
}
.hub__tile:hover, .hub__tile:focus-visible { transform: translateY(-4px); border-color: var(--a-gold); box-shadow: 0 34px 60px -30px rgba(232, 176, 74, 0.35); outline: none; }
.hub__art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; overflow: hidden; box-shadow: inset 0 0 0 5px #050505, inset 0 0 0 6px rgba(232, 176, 74, 0.2); }
.hub__art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px); pointer-events: none; }
.hub__art img { width: 38%; max-width: 6rem; height: auto; image-rendering: pixelated; transition: transform 0.6s var(--ease); }
.hub__tile:hover .hub__art img { transform: scale(1.08) translateY(-2px); }
.hub__name { font: 400 0.78rem/1.5 var(--px); color: var(--a-gold); text-shadow: 0 0 8px rgba(232, 176, 74, 0.45), 2px 2px 0 #6b3d10; }
.hub__name em { margin-left: 0.3rem; padding: 0.15rem 0.35rem; font-style: normal; font-size: 0.48rem; color: #000; background: var(--a-teal); text-shadow: none; vertical-align: 2px; }
.hub__blurb { font-size: 0.88rem; line-height: 1.5; color: #cfc3a6; }
.hub__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid rgba(232, 176, 74, 0.18); font: 400 0.58rem/1 var(--px); }
.hub__hi b { color: var(--a-gold); font-weight: 400; }
.hub__play { color: var(--a-teal); }
.hub__tile:hover .hub__play { color: var(--a-gold); }

/* ---------- One game, large ---------- */
.stage[hidden], .hub[hidden] { display: none; }
.stage { animation: stage-in 0.5s var(--ease); }
@keyframes stage-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stage__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.stage__back { justify-self: start; font: 400 0.6rem/1 var(--px); color: var(--muted); text-decoration: none; padding: 0.6rem 0.8rem; border-radius: 999px; border: 1px solid var(--btn-line); }
.stage__back:hover { color: var(--gold-hi); border-color: var(--gold); }
.stage__title { margin: 0; font: 400 clamp(0.85rem, 1.6vw, 1.1rem)/1.4 var(--px); color: var(--gold); text-align: center; text-shadow: 0 0 10px color-mix(in srgb, var(--gold) 45%, transparent); }
.stage__hi { justify-self: end; margin: 0; font: 400 0.65rem/1 var(--px); color: var(--muted); }
.stage__hi b { color: var(--gold); font-weight: 400; }
.stage__cab {
	padding: clamp(0.6rem, 1.5vw, 1.1rem); border-radius: 26px;
	background: linear-gradient(180deg, #17120c, #0b0a08 40%); border: 1px solid rgba(232, 176, 74, 0.45);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 220, 160, 0.08);
}
.stage__screen {
	position: relative; margin: 0 auto; aspect-ratio: var(--ar);
	width: min(100%, calc((100dvh - 15rem) * var(--ar)));
	min-width: min(100%, 17rem);
	border-radius: 12px; overflow: hidden; background: #000;
	box-shadow: inset 0 0 0 6px #050505, inset 0 0 0 7px rgba(232, 176, 74, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.9);
}
.stage__screen::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.5));
}
.stage__info { display: grid; gap: 0.4rem; max-width: 46rem; margin: 1.1rem auto 0; text-align: center; }
.stage__how { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.cab__ctl { margin: 0; font: 400 0.55rem/1.8 var(--px); color: #7fb3a1; letter-spacing: 0.04em; }
.cab__canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; touch-action: none; outline: none; }
.cab__canvas:focus-visible { box-shadow: inset 0 0 0 3px #e8b04a; }

/* touch pad for Showing Run */
.dpad { display: none; grid-template-columns: repeat(3, 3.4rem); grid-template-rows: repeat(2, 3.4rem); gap: 0.4rem; justify-content: center; margin: 0.9rem auto 0.2rem; }
.dpad button { border: 2px solid rgba(232, 176, 74, 0.6); border-radius: 12px; background: #120d07; color: #e8b04a; font-size: 1.1rem; touch-action: manipulation; }
.dpad button:active { background: #e8b04a; color: #000; }
.dpad [data-dir="up"] { grid-column: 2; grid-row: 1; }
.dpad [data-dir="left"] { grid-column: 1; grid-row: 2; }
.dpad [data-dir="down"] { grid-column: 2; grid-row: 2; }
.dpad [data-dir="right"] { grid-column: 3; grid-row: 2; }
@media (pointer: coarse) { .dpad { display: grid; } }

/* ---------- Open House (memory) ---------- */
.match { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto repeat(4, 1fr); gap: 2.2%; padding: 4%; font-family: "Press Start 2P", monospace; }
.match__hud { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 2px 2px 4px; font-size: clamp(0.5rem, 1.4vw, 0.8rem); color: #f4e6c4; }
.match__card { position: relative; border: 0; padding: 0; cursor: pointer; border-radius: 4px; background: transparent; perspective: 400px; }
.match__card:focus-visible { outline: 2px solid #e8b04a; outline-offset: 1px; }
.match__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 4px; backface-visibility: hidden; transition: transform 0.35s steps(4); image-rendering: pixelated; }
.match__back { background: repeating-linear-gradient(45deg, #2a1a08 0 6px, #3a250c 6px 12px); box-shadow: inset 0 0 0 3px #e8b04a; }
.match__back::after { content: ""; width: 30%; aspect-ratio: 1; background: #e8b04a; clip-path: polygon(50% 0, 100% 45%, 85% 45%, 85% 100%, 15% 100%, 15% 45%, 0 45%); opacity: 0.8; }
.match__front { transform: rotateY(180deg); background: #101820 no-repeat center / 64% auto; box-shadow: inset 0 0 0 3px #3fb7a5; }
.match__card.is-up .match__back { transform: rotateY(180deg); }
.match__card.is-up .match__front { transform: rotateY(360deg); }
.match__card.is-done .match__front { box-shadow: inset 0 0 0 3px #e8b04a; background-color: #1d1606; }
.match__over, .board__over { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; gap: 1.2rem; text-align: center; background: rgba(0, 0, 0, 0.82); color: #e8b04a; font: 400 clamp(0.8rem, 2vw, 1.2rem)/1.6 "Press Start 2P", monospace; }
.match__over[hidden], .board__over[hidden] { display: none; }
.match__over button, .board__over button { justify-self: center; padding: 0.8rem 1.1rem; border: 2px solid #e8b04a; background: #000; color: #f4e6c4; font: inherit; font-size: 0.6rem; cursor: pointer; }
.match__over button:hover, .match__over button:focus-visible, .board__over button:hover, .board__over button:focus-visible { background: #e8b04a; color: #000; outline: none; }
.board__over small { display: block; font-size: 0.55rem; color: #f4e6c4; }

/* ---------- Upgrade (merge board) ---------- */
.board { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; padding: 4%; gap: 3%; font-family: "Press Start 2P", monospace; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.board:focus-visible { box-shadow: inset 0 0 0 3px #e8b04a; }
.board__hud { display: flex; justify-content: space-between; align-items: center; font-size: clamp(0.5rem, 1.5vw, 0.8rem); color: #f4e6c4; }
.board__hud b { color: #e8b04a; font-weight: 400; }
.board__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2.5%; padding: 2.5%; background: #0d0b08; border: 2px solid rgba(232, 176, 74, 0.35); border-radius: 6px; }
.board__cell { border-radius: 4px; background: #17130d; }
.btile { position: absolute; display: grid; place-items: center; align-content: center; gap: 6%; border-radius: 4px; transition: left 0.11s linear, top 0.11s linear; z-index: 1; overflow: hidden; }
.btile img { width: 52%; image-rendering: pixelated; }
.btile span { font-size: clamp(0.32rem, 1vw, 0.55rem); line-height: 1.2; text-align: center; padding: 0 4%; }
.btile.is-new { animation: tile-new 0.18s steps(3); }
.btile.is-merged { animation: tile-pop 0.2s steps(3); }
@keyframes tile-new { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tile-pop { 50% { transform: scale(1.14); } }
[data-motion="off"] .btile { transition: none; }
[data-motion="off"] .match__face { transition: none; }

@media (max-width: 760px) {
	.stage__bar { grid-template-columns: auto 1fr; }
	.stage__hi { display: none; }
	.stage__title { text-align: right; }
	.stage__screen { width: 100%; }
}

/* ---------- Intro: the gator switches on the machine, then we zoom into its screen ---------- */
.intro { position: relative; margin: 0 0 1.25rem; border-radius: 22px; overflow: hidden; background: #07090f; border: 1px solid rgba(232, 176, 74, 0.35); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9); cursor: pointer; transition: opacity 0.42s ease, transform 0.42s var(--ease); }
.intro[hidden] { display: none; }
.intro canvas { display: block; width: 100%; height: auto; max-height: 68vh; aspect-ratio: 16 / 9; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
.intro::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px); }
.intro__skip { position: absolute; right: 0.9rem; bottom: 0.8rem; z-index: 1; padding: 0.55rem 0.8rem; border-radius: 8px; border: 1px solid rgba(232, 176, 74, 0.5); background: rgba(0, 0, 0, 0.55); color: var(--a-gold); font: 400 0.55rem/1 var(--px); letter-spacing: 0.08em; cursor: pointer; }
.intro__skip:hover, .intro__skip:focus-visible { background: var(--a-gold); color: #000; outline: none; }
.intro.is-out { opacity: 0; transform: scale(1.03); }
.hub { opacity: 0; transform: scale(0.985); transition: opacity 0.6s ease, transform 0.7s var(--ease); }
.hub.is-in { opacity: 1; transform: none; }
.hub__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin: 0 0 1.25rem; }
.hub__top .hub__insert { margin: 0; }
.hub__again { padding: 0; border: 0; background: none; color: var(--muted); font: 400 0.5rem/1.6 var(--px); letter-spacing: 0.1em; cursor: pointer; }
.hub__again:hover, .hub__again:focus-visible { color: var(--a-gold); outline: none; }
[data-motion="off"] .hub__again { display: none; }
@media (max-width: 760px) { .intro__skip { top: 0.55rem; bottom: auto; right: 0.55rem; padding: 0.45rem 0.6rem; font-size: 0.46rem; } }

/* The intro spans the full width (4.2.3). The homepage's .intro rules (centred, 52rem wide) no longer leak in;
   on short screens the scene is cropped a little top and bottom rather than shrinking. */
.arcade-app .intro { max-width: none; width: 100%; margin: 0 0 1.25rem; padding-top: 0; text-align: left; }
.arcade-app .intro canvas { width: 100%; max-height: 76vh; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 62%; }
.arcade-app .intro:not([hidden]) { animation: intro-in 0.45s ease both; }
@keyframes intro-in { from { opacity: 0; transform: scale(0.985); } }

/* ---------- 4.15.1 · the hub, refreshed: three across in two rows, two across in three rows on narrower
   screens, and on phones a console: a screen of game icons on a woodgrain deck ---------- */
.hub { container-type: inline-size; container-name: hub; }
.hub__console, .hub__screen { display: contents; }
.hub__deck, .hub__pad { display: none; }
.hub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub__tile { grid-template-rows: auto auto 1fr auto; }
.hub__no { position: absolute; z-index: 2; top: 1.7rem; left: 1.75rem; font: 400 0.5rem/1 var(--px); letter-spacing: 0.08em; color: rgba(244, 230, 196, 0.55); text-shadow: 0 1px 0 #000; }
.hub__art { aspect-ratio: 16 / 10; background: radial-gradient(60% 75% at 50% 58%, color-mix(in srgb, var(--g, #e8b04a) 26%, transparent), transparent 70%), #000; }
.hub__art img { width: 34%; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--g, #e8b04a) 45%, transparent)); }
.hub__blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hub__grid li:nth-child(1) { --g: #e8b04a; } .hub__grid li:nth-child(2) { --g: #7fb3a1; } .hub__grid li:nth-child(3) { --g: #d9774f; }
.hub__grid li:nth-child(4) { --g: #8fa8e8; } .hub__grid li:nth-child(5) { --g: #f0cf6a; } .hub__grid li:nth-child(6) { --g: #c58fd6; }
@container hub (max-width: 52rem) { .hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@container hub (max-width: 34rem) {
	.hub__console {
		display: grid; grid-template-rows: auto 1fr auto; gap: 0.85rem; padding: 0.85rem 0.8rem 1rem; border-radius: 28px;
		min-height: min(calc(100svh - 24px), 36rem); scroll-snap-align: start; scroll-margin-top: 12px;
		background: linear-gradient(180deg, #1c1815, #0d0b0a 70%); border: 1px solid rgba(232, 176, 74, 0.22);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 30px 60px -28px rgba(0, 0, 0, 0.9);
	}
	.hub__deck {
		display: flex; align-items: center; gap: 0.6rem; height: 2.3rem; padding: 0 0.85rem; border-radius: 12px;
		background: repeating-linear-gradient(92deg, #5a3519 0 3px, #6e4220 3px 7px, #4d2c14 7px 9px, #7a4a24 9px 14px), #5a3519;
		box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.35);
	}
	.hub__deck span { flex: 1; font: 400 0.48rem/1 var(--px); letter-spacing: 0.12em; color: #f4e6c4; text-shadow: 1px 1px 0 #2b170a; }
	.hub__led { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 6px #ff5a3c, 0 0 12px rgba(255, 90, 60, 0.6); animation: hub-led 2.4s ease-in-out infinite; }
	@keyframes hub-led { 50% { opacity: 0.55; } }
	.hub__grill { width: 2.2rem; height: 0.9rem; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0 2px, transparent 2px 4px); }
	.hub__screen {
		position: relative; display: grid; align-content: space-evenly; gap: 1rem; padding: 1rem 0.7rem 1.2rem; border-radius: 18px; overflow: hidden;
		background: radial-gradient(120% 90% at 50% 40%, #12161f, #050608 75%);
		box-shadow: inset 0 0 0 4px #050505, inset 0 0 0 5px rgba(232, 176, 74, 0.22), inset 0 0 40px rgba(0, 0, 0, 0.9);
	}
	.hub__screen::before { content: "> SELECT A GAME"; position: relative; z-index: 1; justify-self: center; font: 400 0.46rem/1 var(--px); letter-spacing: 0.14em; color: var(--a-gold); text-shadow: 0 0 8px rgba(232, 176, 74, 0.6); animation: hub-blink 1.4s steps(2) infinite; }
	.hub__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px); }
	.hub__grid { position: relative; z-index: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem 0.4rem; }
	.hub__tile { grid-template-rows: auto auto; justify-items: center; gap: 0.55rem; padding: 0.15rem; border: 0; border-radius: 16px; background: none; box-shadow: none; text-align: center; -webkit-tap-highlight-color: transparent; }
	.hub__tile:hover, .hub__tile:focus-visible { transform: none; box-shadow: none; }
	.hub__tile:focus-visible .hub__art { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--a-gold); }
	.hub__art {
		width: min(100%, 4.1rem); aspect-ratio: 1; border-radius: 26%;
		background: radial-gradient(80% 80% at 30% 20%, color-mix(in srgb, var(--g) 88%, #fff), color-mix(in srgb, var(--g) 55%, #000) 75%);
		box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.3), 0 10px 18px -8px color-mix(in srgb, var(--g) 70%, transparent);
		transition: transform 0.18s ease;
	}
	.hub__art::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 45%); }
	.hub__art img { width: 60%; max-width: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); }
	.hub__tile:active .hub__art { transform: scale(0.92); }
	.hub__name { font-size: 0.44rem; line-height: 1.45; color: #f4e6c4; text-shadow: 1px 1px 0 #000; }
	.hub__name em { display: none; }
	.hub__no, .hub__blurb, .hub__foot { display: none; }
	.hub__pad { display: flex; align-items: center; justify-content: center; gap: 0.7rem; height: 3rem; }
	.hub__dpad { position: relative; width: 2.4rem; height: 2.4rem; margin-right: auto; background: linear-gradient(#2a2622, #2a2622) center / 0.8rem 100% no-repeat, linear-gradient(#2a2622, #2a2622) center / 100% 0.8rem no-repeat; filter: drop-shadow(0 2px 0 #000); }
	.hub__sel { padding: 0.3rem 0.5rem; border-radius: 999px; background: #2a2622; box-shadow: 0 2px 0 #000; font: 400 0.38rem/1 var(--px); letter-spacing: 0.1em; color: #8d8273; }
	.hub__btn { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a5c, #b8321c 70%); box-shadow: 0 3px 0 #4d1208; }
	.hub__btn:first-of-type { margin-left: auto; }
}
@media (max-width: 599px) { html:has(.arcade-app .hub:not([hidden])) { scroll-snap-type: y proximity; } .mx-arc { scroll-snap-type: y proximity; } }
@media (prefers-reduced-motion: reduce) { .hub__led { animation: none; } }
[data-motion="off"] .hub__led { animation: none; }