/* My420Plug Arcade 2.0: arcade page, member dashboard and widget, inside the theme's own pages.
   Everything is scoped to .m420-arcade so the theme's styles are left alone.
   The accent comes from page-level variables printed inline (<style id="m420-vars-inline-css">):
   --m420-accent, --m420-accent-dark, --m420-accent-rgb. No accent color is hard-coded here.
   Every visual choice is a variable on .m420-arcade; override them in Arcade -> Settings -> Custom CSS. */

.m420-arcade {
	--m420-ink: #0e0e0e;
	--m420-text: #55555a;
	--m420-page-bg: transparent;
	--m420-font: inherit;
	--m420-retro: "Press Start 2P", ui-monospace, "Courier New", monospace;
	--m420-pixel: "VT323", ui-monospace, "Courier New", monospace;
	--m420-radius: 18px;
	--m420-radius-sm: 12px;
	--m420-border: 2px;
	--m420-gap: 20px;
	--m420-cols: 3;
	--m420-card-bg: #0e0e0e;
	--m420-card-text: #ffffff;
	--m420-card-muted: rgba(255, 255, 255, 0.72);
	--m420-card-line: rgba(255, 255, 255, 0.14);
	--m420-card-title: var(--m420-accent);
	--m420-card-border: var(--m420-accent);
	--m420-card-glow: 0 0 0 4px rgba(var(--m420-accent-rgb), 0.14), 0 12px 36px rgba(var(--m420-accent-rgb), 0.28);
	--m420-board-bg: rgba(255, 255, 255, 0.04);
	--m420-board-top-bg: rgba(var(--m420-accent-rgb), 0.1);
	--m420-score: var(--m420-accent);
	--m420-faint: rgba(255, 255, 255, 0.28);
	--m420-title-size: 15px;
	--m420-desc-size: 15px;
	--m420-score-size: 22px;
	--m420-top-score-size: 30px;
	--m420-label-size: 11px;
	--m420-dcard-bg: #ffffff;
	--m420-dcard-line: rgba(14, 14, 14, 0.1);
	box-sizing: border-box;
	color: var(--m420-text);
	font-family: var(--m420-font);
	background: var(--m420-page-bg);
}
.m420-arcade *, .m420-arcade *::before, .m420-arcade *::after { box-sizing: border-box; }
.m420-arcade.m420-arcade--white-cards {
	--m420-card-bg: #ffffff;
	--m420-card-text: var(--m420-ink);
	--m420-card-muted: var(--m420-text);
	--m420-card-line: rgba(14, 14, 14, 0.1);
	--m420-card-title: var(--m420-ink);
	--m420-board-bg: #f6f6f7;
	--m420-board-top-bg: rgba(var(--m420-accent-rgb), 0.22);
	--m420-score: var(--m420-ink);
	--m420-faint: rgba(14, 14, 14, 0.3);
}
/* wide inside block themes (alignwide), never wider than the screen */
.m420-arcade.alignwide { width: 100%; max-width: var(--wp--style--global--wide-size, 1240px); margin-left: auto; margin-right: auto; }
.m420-arcade p, .m420-arcade h2, .m420-arcade h3, .m420-arcade ol, .m420-arcade ul { margin: 0; padding: 0; }
.m420-arcade ol, .m420-arcade ul { list-style: none; }
.m420-arcade li { margin: 0; }
.m420-arcade a { text-decoration: none; }
.m420-arcade :focus-visible { outline: 3px solid var(--m420-accent-dark); outline-offset: 3px; }

/* ---------------------------------------------------------------- buttons */
.m420-arcade .m420-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--m420-ink);
	background: var(--m420-ink); color: #fff; font-family: var(--m420-font); font-size: 15px; font-weight: 800;
	line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap;
}
.m420-arcade .m420-btn:hover { background: transparent; color: var(--m420-ink); }
.m420-arcade .m420-btn--neon { background: var(--m420-accent); border-color: var(--m420-accent); color: var(--m420-ink); }
.m420-arcade .m420-btn--neon:hover { background: transparent; color: var(--m420-accent-dark); }
.m420-arcade .m420-card .m420-btn--neon:hover { color: var(--m420-accent); }
.m420-arcade.m420-arcade--white-cards .m420-card .m420-btn--neon:hover { color: var(--m420-accent-dark); }
.m420-arcade .m420-btn--outline { background: transparent; color: var(--m420-ink); }
.m420-arcade .m420-btn--outline:hover { background: var(--m420-ink); color: #fff; }
.m420-arcade .m420-btn--sm { padding: 0 16px; font-size: 13px; }

/* ---------------------------------------------------------------- page head */
.m420-arcade .m420-logo-wrap { display: flex; justify-content: center; margin: 4px 0 6px; }
.m420-arcade .m420-logo { display: block; height: auto; max-width: 100%; }
.m420-arcade .m420-intro { max-width: 34em; margin: 0 auto 28px; text-align: center; font-size: 17px; line-height: 1.5; color: var(--m420-text); text-wrap: balance; }
.m420-arcade .m420-flash {
	margin: 0 auto 20px; max-width: 760px; padding: 12px 16px; border: 2px solid var(--m420-accent); border-radius: 14px;
	background: rgba(var(--m420-accent-rgb), 0.16); color: var(--m420-ink); font-weight: 700; line-height: 1.4;
}

/* ---------------------------------------------------------------- grid */
.m420-arcade .m420-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--m420-gap); align-items: stretch; }
@media (min-width: 768px) { .m420-arcade .m420-grid { grid-template-columns: repeat(min(2, var(--m420-cols)), minmax(0, 1fr)); gap: calc(var(--m420-gap) + 4px); } }
@media (min-width: 1100px) { .m420-arcade .m420-grid { grid-template-columns: repeat(var(--m420-cols), minmax(0, 1fr)); gap: calc(var(--m420-gap) + 8px); } }
.m420-arcade .m420-grid--single { grid-template-columns: minmax(0, 1fr) !important; max-width: 440px; }

/* ---------------------------------------------------------------- card */
.m420-arcade .m420-card {
	display: flex; flex-direction: column; min-width: 0; overflow: hidden;
	background: var(--m420-card-bg); color: var(--m420-card-text);
	border: var(--m420-border) solid var(--m420-card-border); border-radius: var(--m420-radius);
	box-shadow: var(--m420-card-glow); scroll-margin-top: 96px;
}
.m420-arcade .m420-card__art { display: block; position: relative; aspect-ratio: 1 / 1; background: #000; overflow: hidden; border-bottom: 2px solid var(--m420-card-line); }
.m420-arcade .m420-card__canvas, .m420-arcade .m420-card__img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; }
.m420-arcade .m420-card__canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.m420-arcade .m420-card__img { object-fit: cover; }
.m420-arcade .m420-card__art:hover .m420-card__canvas, .m420-arcade .m420-card__art:hover .m420-card__img { filter: brightness(1.12); }
.m420-arcade .m420-card__cover-title {
	position: absolute; left: 0; right: 0; top: 0; padding: 14px 14px 30px; color: var(--m420-accent);
	font-family: var(--m420-retro); font-size: clamp(14px, 4vw, 20px); line-height: 1.3; text-wrap: balance;
	text-shadow: 3px 3px 0 #000; background: linear-gradient(#000 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%); pointer-events: none;
}
.m420-arcade .m420-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 18px 16px 16px; }
.m420-arcade .m420-card__title {
	font-family: var(--m420-retro); font-weight: 400; font-size: var(--m420-title-size); line-height: 1.4;
	letter-spacing: 0.02em; color: var(--m420-card-title); text-transform: none;
}
.m420-arcade .m420-card__desc {
	font-size: var(--m420-desc-size); line-height: 1.45; color: var(--m420-card-muted); min-height: 2.9em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m420-arcade .m420-card__play { width: 100%; min-height: 48px; font-size: 16px; }
.m420-arcade .m420-card__best {
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 2px 2px 0;
	font-size: 13px; color: var(--m420-card-muted);
}
.m420-arcade .m420-card__best-k { font-size: var(--m420-label-size); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
.m420-arcade .m420-card__best-v { font-family: var(--m420-pixel); font-size: 26px; line-height: 1; color: var(--m420-score); }
.m420-arcade .m420-card__best-r { font-family: var(--m420-pixel); font-size: 22px; line-height: 1; color: var(--m420-card-text); }
.m420-arcade .m420-card__best-none { font-weight: 700; color: var(--m420-card-text); }

/* ---------------------------------------------------------------- high score box: 1-3 large left, 4+ right */
.m420-arcade .m420-board {
	margin-top: auto; padding: 12px; border-radius: var(--m420-radius-sm);
	background: var(--m420-board-bg); border: 1px solid var(--m420-card-line); color: var(--m420-card-text);
}
.m420-arcade .m420-board__label {
	margin: 0 0 10px; font-family: var(--m420-font); font-size: var(--m420-label-size); font-weight: 800;
	line-height: 1.3; text-transform: uppercase; letter-spacing: 0.12em; color: var(--m420-card-muted);
}
.m420-arcade .m420-board__cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.m420-arcade .m420-board--short .m420-board__cols { grid-template-columns: minmax(0, 1fr); }
.m420-arcade .m420-board__top { display: grid; grid-auto-rows: 1fr; gap: 6px; }
.m420-arcade .m420-board__top li {
	display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center;
	column-gap: 10px; row-gap: 3px; padding: 6px 10px 6px 8px; border-radius: 10px; background: var(--m420-board-top-bg); min-height: 52px;
}
.m420-arcade .m420-board__top .rk {
	grid-row: 1 / 3; align-self: center; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
	font-family: var(--m420-retro); font-size: 11px; line-height: 1; border: 2px solid var(--m420-accent); color: var(--m420-card-text);
}
.m420-arcade .m420-board__top li:first-child .rk { background: var(--m420-accent); color: var(--m420-ink); }
.m420-arcade .m420-board__top .ini { font-family: var(--m420-retro); font-size: 11px; line-height: 1.2; letter-spacing: 0.08em; color: var(--m420-card-text); }
.m420-arcade .m420-board__top .sc {
	font-family: var(--m420-pixel); font-size: var(--m420-top-score-size); line-height: 0.9; color: var(--m420-score);
	font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m420-arcade .m420-board__top li.empty { background: transparent; border: 1px dashed var(--m420-card-line); }
.m420-arcade .m420-board__top li.empty .rk { border-color: var(--m420-faint); background: transparent; color: var(--m420-faint); }
.m420-arcade .m420-board__top li.empty .ini, .m420-arcade .m420-board__top li.empty .sc { color: var(--m420-faint); }
.m420-arcade .m420-board__rest { display: grid; grid-auto-rows: 1fr; align-content: stretch; }
.m420-arcade .m420-board__rest li {
	display: grid; grid-template-columns: 2.4ch 3.6ch minmax(0, 1fr); gap: 6px; align-items: center;
	font-family: var(--m420-pixel); font-size: var(--m420-score-size); line-height: 24px; font-variant-numeric: tabular-nums;
	border-bottom: 1px solid var(--m420-card-line);
}
.m420-arcade .m420-board__rest li:last-child { border-bottom: 0; }
.m420-arcade .m420-board__rest .rk { color: var(--m420-card-muted); text-align: right; }
.m420-arcade .m420-board__rest .ini { color: var(--m420-card-text); }
.m420-arcade .m420-board__rest .sc { color: var(--m420-score); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m420-arcade .m420-board__rest li.empty .ini, .m420-arcade .m420-board__rest li.empty .sc, .m420-arcade .m420-board__rest li.empty .rk { color: var(--m420-faint); }
/* a board on its own ([m420_leaderboard]) sits on a black card */
.m420-arcade.m420-board-only .m420-board { background: var(--m420-card-bg); border: var(--m420-border) solid var(--m420-card-border); border-radius: var(--m420-radius); padding: 16px; max-width: 460px; }

/* ---------------------------------------------------------------- rules */
.m420-arcade .m420-rules { margin-top: 48px; }
.m420-arcade .m420-rules__title { font-family: var(--m420-font); font-size: 26px; font-weight: 900; line-height: 1.2; color: var(--m420-ink); margin: 0 0 16px; text-align: center; }
.m420-arcade .m420-rules__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 768px) { .m420-arcade .m420-rules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .m420-arcade .m420-rules__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.m420-arcade .m420-rule { padding: 16px; border: 2px solid var(--m420-dcard-line); border-radius: 16px; background: var(--m420-dcard-bg); }
.m420-arcade .m420-rule__h { font-family: var(--m420-font); font-size: var(--m420-label-size); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--m420-ink); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.m420-arcade .m420-rule__h::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--m420-accent); box-shadow: 0 0 0 2px var(--m420-ink); flex: none; }
.m420-arcade .m420-rule__p { font-size: 15px; line-height: 1.5; color: var(--m420-text); }

/* ---------------------------------------------------------------- member dashboard (matches the site's .m4p-card hub) */
.m420-arcade.m420-dash { display: grid; gap: 16px; }
.m420-arcade .m420-dcard { padding: 16px; border: 2px solid var(--m420-dcard-line); border-radius: 16px; background: var(--m420-dcard-bg); color: var(--m420-ink); min-width: 0; }
.m420-arcade .m420-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--m420-text); margin: 0 0 4px; line-height: 1.3; }
.m420-arcade .m420-h { font-family: var(--m420-font); font-size: 19px; font-weight: 900; line-height: 1.25; color: var(--m420-ink); margin: 0 0 8px; }
.m420-arcade .m420-p { font-size: 15px; line-height: 1.5; color: var(--m420-text); margin: 0 0 12px; }
.m420-arcade .m420-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.m420-arcade .m420-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; }
.m420-arcade .m420-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.m420-arcade .m420-stat__num { font-family: var(--m420-pixel); font-size: 42px; line-height: 0.9; color: var(--m420-ink); margin: 0; }
.m420-arcade .m420-form { display: flex; flex-direction: column; gap: 6px; }
.m420-arcade .m420-form label { font-size: 13px; font-weight: 700; color: var(--m420-ink); margin-top: 6px; }
.m420-arcade .m420-input {
	width: 100%; max-width: 380px; min-height: 44px; padding: 8px 14px; border: 2px solid rgba(14, 14, 14, 0.18); border-radius: 12px;
	background: #fff; color: var(--m420-ink); font-family: var(--m420-font); font-size: 16px; box-shadow: none;
}
.m420-arcade .m420-input:focus { border-color: var(--m420-ink); outline: none; box-shadow: 0 0 0 3px rgba(var(--m420-accent-rgb), 0.6); }
.m420-arcade .m420-input--ini { max-width: 132px; font-family: var(--m420-pixel); font-size: 28px; letter-spacing: 0.25em; text-transform: uppercase; padding-block: 2px; }
.m420-arcade .m420-help { font-size: 14px; margin: 2px 0 0; }
.m420-arcade .m420-code { display: block; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #f4f4f5; color: var(--m420-ink); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; white-space: normal; }

/* ---------------------------------------------------------------- "My high scores" widget */
.m420-arcade.m420-widget-root { margin: 0 0 16px; }
.m420-dash > .m420-arcade.m420-widget-root { margin: 0; }
.m420-arcade .m420-widget { padding: 16px; border: 2px solid var(--m420-dcard-line); border-radius: 16px; background: var(--m420-dcard-bg); color: var(--m420-ink); }
.m420-arcade .m420-widget__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.m420-arcade .m420-widget__title { margin: 0; }
.m420-arcade .m420-widget__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: 10px; }
@media (min-width: 768px) { .m420-arcade .m420-widget__grid--fixed { grid-template-columns: repeat(var(--m420-widget-cols, 3), minmax(0, 1fr)); } }
.m420-arcade .m420-widget__item {
	display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border-radius: 14px;
	border: 2px solid var(--m420-dcard-line); background: #fff;
}
.m420-arcade .m420-widget__game { font-family: var(--m420-retro); font-size: 9px; line-height: 1.5; color: var(--m420-ink); min-height: 3em; letter-spacing: 0.02em; }
.m420-arcade .m420-widget__score { font-family: var(--m420-pixel); font-size: 36px; line-height: 0.9; color: var(--m420-ink); }
.m420-arcade .m420-widget__rank { font-size: 13px; color: var(--m420-text); }
.m420-arcade .m420-widget__rank strong { color: var(--m420-ink); font-weight: 900; }
.m420-arcade .m420-widget__none { font-size: 14px; font-weight: 700; color: var(--m420-text); padding: 6px 0 9px; }
.m420-arcade .m420-widget__play { margin-top: auto; width: 100%; }

@media (prefers-reduced-motion: reduce) { .m420-arcade .m420-btn { transition: none; } }

/* ---------------------------------------------------------------- "420 Arcade (full screen)" page template (optional, never auto-applied) */
body.m420-fullscreen { margin: 0; background: #0e0e0e; color: #fff; min-height: 100vh; }
.m420-topbar {
	display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 12px 16px; border-bottom: 2px solid rgba(var(--m420-accent-rgb), 0.2);
	font-family: "Press Start 2P", ui-monospace, "Courier New", monospace; font-size: 10px; letter-spacing: 0.1em;
}
.m420-topbar a { color: var(--m420-accent); text-decoration: none; }
.m420-topbar nav { display: flex; gap: 16px; flex-wrap: wrap; }
.m420-fullscreen-main { max-width: 1240px; margin: 0 auto; padding: 24px 16px; }