/*
 * Brand layer (D14): swaps fonts, colors and assets on top of Annie's mockup.css
 * and shop.css, so her layout stays as she designed it. Loaded last.
 *
 * Light and dark mode: every color below is a variable. Dark mode only redefines
 * variables, in two places that must stay identical: the system setting (when the
 * visitor hasn't chosen) and the visitor's own choice (data-theme on <html>, set by
 * rvg.js). Annie's files hard-code some colors (white cards, the header, the bands);
 * the "Annie's fixed colors" rules route those through the same variables.
 *
 * RVG Sixteen (D13) is RVG's own lettering, drawn from the logo. The font files in
 * assets/fonts/ are built by docs/design/prototypes/player-one/font/build_font.py;
 * copy them here again after a rebuild.
 */
@font-face { font-family: "RVG Sixteen"; src: url("assets/fonts/rvg-sixteen.woff") format("woff"); font-display: swap; }
@font-face { font-family: "RVG Sixteen Power"; src: url("assets/fonts/rvg-sixteen-power.woff") format("woff"); font-display: swap; }
@font-face { font-family: "RVG Sixteen Wide"; src: url("assets/fonts/rvg-sixteen-wide.woff") format("woff"); font-display: swap; }
/* Annie's fonts, hosted here instead of Google Fonts (Alex, 29 Oct), so no page calls out to a
   third party. Latin only, as Google split them; anything outside the range falls back to the
   next font in the stack. Licenses: assets/fonts/README.md. */
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; src: url("assets/fonts/chakra-petch-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; src: url("assets/fonts/chakra-petch-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Press Start 2P"; src: url("assets/fonts/press-start-2p.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	color-scheme: light;
	--rvg-sixteen: "RVG Sixteen", "Chakra Petch", Arial, sans-serif;
	--rvg-power: "RVG Sixteen Power", "RVG Sixteen", "Chakra Petch", Arial, sans-serif;
	--rvg-wide: "RVG Sixteen Wide", "RVG Sixteen", "Chakra Petch", Arial, sans-serif;
	--rvg-pixel: "Press Start 2P", monospace;
	/* The heading face, in one place: RVG Sixteen Wide, the logo's letters at 125% width with a
	   6-degree slant (Alex, 28 Oct, after comparing faces on staging). Its small caps read
	   short, so it runs at full size; another face would set --heading-scale below 1. */
	--heading-font: var(--rvg-wide);
	--heading-weight: 400;
	--heading-style: normal;
	--heading-scale: 1;
	/* The logo's colors. Annie's --green and --green-dark are used all through her
	   stylesheets, so redefining them recolors the whole site. */
	--green: #308046;      /* halfway between Annie's #2f8f4e and the logo's #31713f (Alex, 28 Oct): 4.9:1 on white */
	--green-dark: #1d4626; /* deeper logo green: dark text */
	--gold: #cfa336;       /* logo gold: accents on dark grounds only in light mode (2.4:1 on white) */
	/* Surfaces Annie hard-coded */
	--surface: #fff;                    /* cards, secondary buttons */
	--header-bg: rgba(255, 255, 255, .96);
	--band: #ebf2ec;                    /* the Locations band and the search box */
	--band-line: #cce0cf;
	--field-bg: #fff;
	--field-line: #a8c7ae;
	--on-green: #fff;                   /* text on green buttons */
	--trade-bg: #1d4626;
	--trade-button-bg: #fff;
	--trade-button-ink: #1d4626;
	--footer-bg: #142219;
	--prompt: #b82331;                  /* the "PLAYER 1" line */
	--prompt-dim: #626262;
	--page-texture: none;
	--toggle-shadow: #c9d6cb;
	--heading-drop: rgba(207, 163, 54, .6);  /* gold, behind the headings */
	--hero-ink: #31713f;                     /* the home page's big heading, in the logo's own green (Alex, 29 Oct: --green read too bright) */
	--hero-ledge: #16251b;                   /* ...on a solid ledge in dark mode's card green, no outline (Alex, 29 Oct: gold at first, then a darker green, top heading only) */
	--button-edge: #1d4626;                  /* the edge green buttons press into */
	--card-cta-bg: var(--green);             /* the home page store cards' Call button */
	--card-cta-ink: var(--on-green);
	--card-cta-edge: var(--button-edge);
	--prose: var(--muted);                   /* long paragraphs (home story, store write-ups); brighter than --muted in dark mode (Alex, 30 Oct) */
}

/* Dark mode: the arcade after closing. Green brightens so it reads on the dark ground,
   text on green buttons turns dark, and gold can be text as well as accent (7.7:1). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--ink: #e6efe8; --paper: #0e1812; --white: #16251b; --muted: #a3b3a7; --prose: #c2cec5; --line: #2b3d31;
		--green: #3fa560; --green-dark: #8fdca6;
		--surface: #16251b; --header-bg: rgba(14, 24, 18, .94); --band: #09100b; --band-line: #2b3d31;
		--field-bg: #0b140e; --field-line: #3d5a46; --on-green: #07130b;
		--trade-bg: #173823; --trade-button-bg: #e6efe8; --trade-button-ink: #173823;
		--footer-bg: #08100b; --prompt: #ff6b78; --prompt-dim: #9aa79c; --toggle-shadow: #050a07; --heading-drop: rgba(207, 163, 54, .45); --button-edge: #0f2a18; --card-cta-bg: transparent; --card-cta-ink: var(--green-dark); --card-cta-edge: transparent; --hero-ink: var(--ink); --hero-ledge: var(--heading-drop);
		--page-texture: repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px);
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--ink: #e6efe8; --paper: #0e1812; --white: #16251b; --muted: #a3b3a7; --prose: #c2cec5; --line: #2b3d31;
	--green: #3fa560; --green-dark: #8fdca6;
	--surface: #16251b; --header-bg: rgba(14, 24, 18, .94); --band: #09100b; --band-line: #2b3d31;
	--field-bg: #0b140e; --field-line: #3d5a46; --on-green: #07130b;
	--trade-bg: #173823; --trade-button-bg: #e6efe8; --trade-button-ink: #173823;
	--footer-bg: #08100b; --prompt: #ff6b78; --prompt-dim: #9aa79c; --toggle-shadow: #050a07; --heading-drop: rgba(207, 163, 54, .45); --button-edge: #0f2a18; --card-cta-bg: transparent; --card-cta-ink: var(--green-dark); --card-cta-edge: transparent; --hero-ink: var(--ink); --hero-ledge: var(--heading-drop);
	--page-texture: repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px);
}

body { background-image: var(--page-texture); }

/* ---- Annie's fixed colors, routed through the variables ---- */
.site-header { background: var(--header-bg); }
.button.secondary { background: var(--surface); }
.button.primary, .header-button, .location-card a, .search-row button,
.rvg-storebtn.is-active, .rvg-storebtn.is-active b,
.woocommerce ul.products li.product .button, .woocommerce div.product form.cart .button,
.woocommerce-pagination .current { color: var(--on-green); }
.category-grid article, .location-card { background: var(--surface); }
.inventory-search { background: var(--band); border-color: var(--band-line); }
.search-row input { background: var(--field-bg); border-color: var(--field-line); }
.search-row input:focus { outline-color: rgba(49, 113, 63, .25); }
.locations { background: var(--band); }
.trade { background: var(--trade-bg); }
.trade .button { background: var(--trade-button-bg); color: var(--trade-button-ink); border-color: var(--trade-button-bg); }
footer { background: var(--footer-bg); }
.player-prompt { color: var(--prompt); }
.player-prompt small { color: var(--prompt-dim); }
.slide-arrow { color: #1d4626; } /* white circles over photos in both modes */

/* ---- Header wordmark. RVG Sixteen runs narrow (the name is 147px wide at 28px), so it
   can be large and still leave room for the switches on a 320px phone. ---- */
.brand-name { font: 400 38px/1 var(--rvg-sixteen); letter-spacing: .02em; }
/* The recycling arrows from the brand file (rvg_recycle_mark()): green follows the text, shading stays gold. */
.brand-mark svg { display: block; width: auto; height: .95em; }
.brand-mark .m { fill: currentColor; }
.brand-mark .g { fill: var(--gold); }
@media (max-width: 900px) { .brand-name { font-size: 34px; } }
@media (max-width: 520px) { .brand-name { font-size: clamp(22px, 7.5vw, 32px); letter-spacing: .01em; } }
/* Between the phone menu (900px) and a full desktop the header ran out of room, and "Sell or
   Trade" and "Game mode" broke onto two and three lines (Alex, 30 Oct). Tighter gaps, a smaller
   wordmark and an icon-only Game mode switch keep it on one line. */
.site-header nav a, .rvg-tgl { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) {
	.site-header { gap: 20px; }
	.site-header nav { gap: 18px; }
	.brand-name { font-size: 32px; }
}

/* Slideshow dots sit under the photo, so they never cover the caption (Alex, 28 Oct).
   Each dot is a 24px tap target around a 12px ring. */
.store-showcase { padding-bottom: 34px; }
.slide-dots { left: 0; right: 0; bottom: 0; justify-content: center; flex-wrap: wrap; gap: 0; } /* brand.css loads last, so this beats Annie's phone rule too */
.slide-dots button { position: relative; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; }
.slide-dots button::before { content: ""; position: absolute; inset: 6px; border: 2px solid var(--green); border-radius: 50%; }
.slide-dots button[aria-current="true"]::before { background: var(--green); }
.slide-dots button[aria-current="true"] { background: none; }
/* 14 dots at 24px don't fit a phone in one row; 22px does, and the arrows do the same job. */
@media (max-width: 520px) { .slide-dots button { width: 22px; } .slide-dots button::before { inset: 6px 5px; } }

/* Gold replaces Annie's yellow and cyan accents */
.showcase-label span, .secret-code { color: var(--gold); }
.slide-arrow:focus-visible, .slide-dots button:focus-visible { outline-color: var(--gold); }
.about-copy { border-left-color: var(--gold); }
.about-copy p { color: var(--prose); }
.trade .kicker { color: var(--gold); } /* 4.5:1 on --trade-bg */

/* ---- The fun layer: touches from Alex's prototypes, kept easy to read and use ---- */

/* Headings in RVG Sixteen with a gold drop, like box-art lettering. Lowercase keys of
   RVG Sixteen are small caps, so sentence-case headings keep their shape. */
h1, h2, .section-title h2, .trade h2, .about h2, .location-card h3 { font-family: var(--heading-font); font-weight: var(--heading-weight); font-style: var(--heading-style); letter-spacing: .01em; }
/* RVG Sixteen's small caps look shorter than Annie's Chakra Petch at the same size, so headings go up a step */
h1 { font-size: calc(clamp(54px, 8vw, 100px) * var(--heading-scale)); line-height: .95; text-shadow: 3px 3px 0 var(--heading-drop); }
.section-title h2, .about h2, .trade h2 { font-size: calc(clamp(42px, 6vw, 74px) * var(--heading-scale)); line-height: 1; text-shadow: 2px 2px 0 var(--heading-drop); }
@media (max-width: 520px) { h1 { font-size: calc(50px * var(--heading-scale)); } }
/* The shadow drops straight down, so it stays out of the letters' insides */
.hero h1 { color: var(--hero-ink); letter-spacing: .05em; text-shadow: 0 3px 0 var(--hero-ledge); }
.trade h2 { --heading-drop: rgba(0, 0, 0, .35); }

/* Arcade buttons: a solid edge underneath that the button presses down into */
.button, .header-button, .location-card a, .search-row button { box-shadow: 0 4px 0 var(--button-edge); transition: transform .08s, box-shadow .08s, background .2s; }
.button:hover, .header-button:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--button-edge); }
.button:active, .header-button:active, .location-card a:active, .search-row button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--button-edge); }
.button.secondary { --button-edge: var(--line); }
.rvg-tape .button, .rvg-tape .header-button { box-shadow: none; }

/* A menu cursor blinks beside the hero's kicker line */
.hero .kicker::before { content: "\25B6"; margin-right: .5em; color: #d62839; animation: rvg-blink 1.1s steps(2, start) infinite; }
@keyframes rvg-blink { to { visibility: hidden; } }

/* Store cards lift and pick up a gold edge when pointed at */
.location-card { transition: transform .15s, border-color .15s, box-shadow .15s; }
.location-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 10px 22px rgba(0, 0, 0, .12); }

@media (prefers-reduced-motion: reduce) {
	.hero .kicker::before { animation: none; }
	.location-card, .button, .header-button { transition: none; }
}

/* ---- Standard pages (page.php): About, Contact, Privacy. The title in the heading face,
   the text in a column about 70 characters wide. ---- */
.rvg-doc { max-width: 1180px; margin: 0 auto; padding: 64px 5vw 88px; }
.rvg-doc h1 { margin: 0 0 28px; font-size: calc(clamp(46px, 6.5vw, 80px) * var(--heading-scale)); }
.rvg-doc-body { max-width: 720px; font-size: 17px; line-height: 1.7; }
.rvg-doc-body p { margin: 0 0 1.1em; }
.rvg-doc-body h2 { margin: 1.9em 0 .5em; font-size: calc(32px * var(--heading-scale)); line-height: 1.05; text-shadow: 2px 2px 0 var(--heading-drop); }
.rvg-doc-body h3 { margin: 1.6em 0 .4em; font-size: 20px; }
.rvg-doc-body ul, .rvg-doc-body ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.rvg-doc-body li + li { margin-top: .4em; }
.rvg-doc-body a { color: var(--green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rvg-doc-body a:hover { color: var(--green); }

/* The contact form (WPForms Lite): the site's fields and an arcade "Send" button */
.rvg-doc .wpforms-container { max-width: 720px; margin: 28px 0 0;
	/* WPForms' "modern" stylesheet colors its button through these, with selectors more
	   specific than ours, so the colors are set where it reads them. */
	--wpforms-button-background-color: var(--green); --wpforms-button-background-color-alt: var(--green);
	--wpforms-button-text-color: var(--on-green); --wpforms-button-text-color-alt: var(--on-green);
	--wpforms-button-border-radius: 5px; --wpforms-label-color: var(--ink);
	--wpforms-field-background-color: var(--field-bg); --wpforms-field-border-color: var(--field-line); --wpforms-field-text-color: var(--ink); }
.rvg-doc .wpforms-container .wpforms-field { padding: 0 0 20px; }
.rvg-doc .wpforms-container .wpforms-field-label { margin: 0 0 7px; color: var(--ink); font: 700 15px/1.3 Inter, Arial, sans-serif; }
.rvg-doc .wpforms-container .wpforms-required-label { color: var(--prompt); }
.rvg-doc .wpforms-container input[type="text"], .rvg-doc .wpforms-container input[type="email"], .rvg-doc .wpforms-container input[type="tel"],
.rvg-doc .wpforms-container select, .rvg-doc .wpforms-container textarea {
	width: 100%; max-width: 100%; min-height: 50px; padding: 11px 14px; border: 2px solid var(--field-line); border-radius: 6px;
	background: var(--field-bg); color: var(--ink); font: 16px/1.4 Inter, Arial, sans-serif; box-shadow: none; }
.rvg-doc .wpforms-container textarea { min-height: 170px; resize: vertical; }
.rvg-doc .wpforms-container input:focus, .rvg-doc .wpforms-container select:focus, .rvg-doc .wpforms-container textarea:focus {
	border-color: var(--green); outline: 3px solid rgba(63, 165, 96, .3); outline-offset: 1px; }
.rvg-doc .wpforms-container .wpforms-error, .rvg-doc .wpforms-container label.wpforms-error { color: var(--prompt); font-size: 14px; }
.rvg-doc .wpforms-container .wpforms-submit-container { padding-top: 6px; }
/* The form block itself (#wpforms-20) still names rvg-storefront's colors, which don't exist
   here, so the button gets its colors on the button itself, closer than the block's. */
.rvg-doc .wpforms-container button.wpforms-submit { --wpforms-button-text-color: var(--on-green); --wpforms-button-background-color: var(--green); min-height: 52px; padding: 0 28px; border: 0; border-radius: 5px; background: var(--green); color: var(--on-green);
	font: 800 15px/1 Inter, Arial, sans-serif; cursor: pointer; box-shadow: 0 4px 0 var(--button-edge); transition: transform .08s, box-shadow .08s; }
.rvg-doc .wpforms-container button.wpforms-submit:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--button-edge); }
.rvg-doc .wpforms-container button.wpforms-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--button-edge); }
.rvg-doc .wpforms-container button.wpforms-submit:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 900px) { .rvg-doc { padding: 46px 20px 64px; } }

/* ---- Not found (404.php): game over, continue? ---- */
.rvg-404 { max-width: 760px; margin: 0 auto; padding: 96px 5vw 110px; text-align: center; }
.rvg-404 h1 { margin: 0 auto 18px; }
.rvg-404 p { margin: 0 auto; color: var(--muted); font-size: 18px; line-height: 1.6; }
.rvg-404 .rvg-404-continue { margin-top: 34px; color: var(--prompt); font: 400 16px/1.4 var(--rvg-pixel); text-transform: uppercase; }
.rvg-404 .rvg-404-continue::after { content: " \25AE"; animation: rvg-blink 1.1s steps(2, start) infinite; }
.rvg-404 .actions { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .rvg-404 .rvg-404-continue::after { animation: none; } }

/* ---- Store hours: the "Open now" line, filled in by rvg.js (empty without it) ---- */
.rvg-open { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; }
.rvg-open::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--line); }
.rvg-open:empty { display: none; }
.rvg-open.is-open { color: var(--green-dark); }
.rvg-open.is-open::before { background: #2fbf4f; box-shadow: 0 0 0 3px rgba(47, 191, 79, .22); }
.rvg-open.is-closed::before { background: #d62839; }

/* ---- Store locations page (page-locations.php) ---- */
.rvg-loc-hero { max-width: 1180px; margin: 0 auto; padding: 64px 5vw 22px; }
.rvg-loc-hero h1 { margin-bottom: 14px; }
.rvg-loc-intro p { max-width: 640px; margin: 0 0 26px; color: var(--muted); font-size: 18px; line-height: 1.6; }
/* The store picker: a level-select row, north to south */
.rvg-loc-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rvg-loc-picker a { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 3px; padding: 14px 16px;
	border: 2px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 4px 0 var(--line); transition: transform .1s, box-shadow .1s, border-color .1s; }
.rvg-loc-picker a:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 0 var(--gold); }
.rvg-loc-picker a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.rvg-loc-picker a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.rvg-loc-picker b { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--green); color: var(--on-green); font: 400 14px/1 var(--rvg-pixel); }
.rvg-loc-picker span { color: var(--ink); font-family: var(--heading-font); font-size: calc(24px * var(--heading-scale)); font-style: var(--heading-style); font-weight: var(--heading-weight); line-height: 1.05; }
.rvg-loc-picker small { font-size: 12px; }
.rvg-loc-route { display: flex; align-items: center; gap: 10px; margin: 16px 2px 0; color: var(--muted); font: 700 11px/1 "Chakra Petch", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.rvg-loc-route i { flex: 1; border-top: 3px dashed var(--line); }
/* One card per store */
.rvg-loc-list { max-width: 1180px; margin: 0 auto; padding: 22px 5vw 36px; display: grid; gap: 22px; }
.rvg-store { scroll-margin-top: 96px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 34px; align-items: start; padding: 30px;
	border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 6px 18px rgba(28, 70, 39, .06); }
.rvg-store:target { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold); }
.rvg-store .kicker { margin-bottom: 8px; }
.rvg-store h2 { margin: 0 0 12px; font-size: calc(clamp(42px, 5vw, 62px) * var(--heading-scale)); line-height: .98; text-shadow: 2px 2px 0 var(--heading-drop); }
.rvg-store-about { max-width: 520px; margin: 14px 0 12px; color: var(--prose); font-size: 17px; line-height: 1.6; }
.rvg-store address { margin-bottom: 20px; font-size: 18px; font-style: normal; font-weight: 600; line-height: 1.5; }
.rvg-store-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rvg-hours { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.rvg-hours caption { caption-side: top; margin-bottom: 10px; color: var(--green-dark); font: 700 13px/1.3 "Chakra Petch", sans-serif; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.rvg-hours th, .rvg-hours td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.rvg-hours th { font-weight: 600; text-align: left; }
.rvg-hours td { color: var(--muted); text-align: right; }
.rvg-hours tr.is-today { background: var(--band); }
.rvg-hours tr.is-today th, .rvg-hours tr.is-today td { color: var(--ink); font-weight: 800; }
.rvg-hours tr.is-today th::after { content: "Today"; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--green); color: var(--on-green); font-size: 11px; font-weight: 800; vertical-align: 1px; }
/* The 3D map teaser, in the home page's arcade-cabinet frame */
.rvg-loc-3d { max-width: 1132px; margin: 10px auto 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px;
	border: 8px solid #bababa; background: #050505; color: #f7f7f7; box-shadow: inset 0 0 0 4px #4c4c4c, 0 8px 0 #777; }
.rvg-loc-3d p { margin: 0; }
.rvg-loc-3d-title { margin-bottom: 8px !important; color: var(--gold); font: 400 14px/1.4 var(--rvg-pixel); text-transform: uppercase; }
button.button { flex: none; font: 800 14px Inter, Arial, sans-serif; cursor: pointer; }

/* Home page store cards: four across, the store name as the heading, an "Open now" line,
   and the Call button with a link to the full details. */
.locations { border-block: 1px solid var(--line); }
.location-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.location-card > div { display: flex; flex-direction: column; height: 100%; }
.location-card h3 { margin: 6px 0 8px; font-size: calc(36px * var(--heading-scale)); line-height: 1; text-shadow: 2px 2px 0 var(--heading-drop); }
.location-card p { line-height: 1.5; }
.location-card .rvg-open { display: flex; margin: -6px 0 18px; }
.location-card .rvg-open:empty { display: none; }
.rvg-card-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.location-card .rvg-card-actions a:not(.rvg-loc-more) { border: 2px solid var(--green); background: var(--card-cta-bg); color: var(--card-cta-ink); box-shadow: 0 4px 0 var(--card-cta-edge); }
.location-card .rvg-loc-more { padding: 0; border: 0; background: none; box-shadow: none; color: var(--green-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.location-card .rvg-loc-more:active { transform: none; box-shadow: none; }

@media (max-width: 900px) {
	.rvg-loc-hero { padding: 46px 20px 18px; }
	.rvg-loc-picker { grid-template-columns: 1fr 1fr; }
	.rvg-loc-list { padding: 18px 20px 30px; }
	.rvg-store { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
	.rvg-loc-3d { flex-direction: column; align-items: flex-start; margin: 10px 20px 50px; }
}
@media (max-width: 400px) { .rvg-loc-picker span { font-size: 20px; } }

/* ---- The switches: dark mode and game mode. Shown only where rvg.js runs. ---- */
.rvg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rvg-toggles { display: none; align-items: center; gap: 8px; }
.rvg-js .rvg-toggles { display: flex; }
.rvg-tgl { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 2px solid var(--line); border-radius: 10px;
	background: var(--surface); color: var(--ink); font: 700 13px/1 Inter, Arial, sans-serif; cursor: pointer;
	box-shadow: 0 3px 0 var(--toggle-shadow); transition: transform .08s, box-shadow .08s; }
.rvg-tgl:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--toggle-shadow); }
.rvg-tgl:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.rvg-tgl svg { width: 20px; height: 20px; flex: none; }
.rvg-theme svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.rvg-theme[aria-pressed="true"] { color: var(--gold); }
.rvg-theme[aria-pressed="true"] svg path { fill: var(--gold); stroke: var(--gold); }
.rvg-game svg { width: 30px; }
.rvg-game svg rect { fill: none; stroke: currentColor; stroke-width: 2; }
.rvg-game svg .pad { fill: currentColor; }
.rvg-game svg .btn { fill: #d62839; }
.rvg-switch { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--line); flex: none; }
.rvg-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: left .25s; }
.rvg-game.is-trying .rvg-switch::after { left: 15px; background: var(--gold); }
/* Below a full desktop the words "Game mode" go, but only from sight: screen readers still get the
   button's name (it used to be display: none on phones, which left the button nameless). */
@media (max-width: 1180px) {
	.rvg-game-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 900px) {
	.rvg-switch { display: none; }
	.rvg-tgl { padding: 0 8px; }
}
@media (max-width: 520px) {
	/* Phones: the name and the two switches; Shop lives in the bar below the header. */
	.site-header .header-button { display: none; }
	.rvg-toggles { gap: 6px; }
	.rvg-tgl { height: 36px; }
}

/* ---- The footer controller is a button now (it opens a hint) ---- */
footer .secret-code { padding: 0; border: 0; background: none; color: var(--gold); font: 700 11px "Chakra Petch", sans-serif; letter-spacing: .08em; text-align: left; cursor: pointer; }
footer .secret-code:hover .nes-button { fill: #e0304f; }
footer .secret-code:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* ---- Footer links to the info pages: the only way in to About, Contact and Privacy ---- */
.rvg-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* ---- Holding page (inc/holding.php): the whole public site while the full one is prepared on staging ---- */
.rvg-holding-main { min-height: 100vh; min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 34px; padding: 40px 20px; text-align: center; }
.rvg-holding-main .brand-name { margin: 0; color: var(--green); text-shadow: none; }
.rvg-holding-main .button { padding: 18px 34px; font-size: 18px; }
.rvg-holding-main .rvg-tape::after { font-size: 16px; }
.rvg-holding-towns { margin: 0; color: var(--prose); font: 700 12px/1.5 "Chakra Petch", sans-serif; letter-spacing: .14em; text-transform: uppercase; }

/* One row no longer fits below 1180px: stack it the way Annie's phone layout does. */
@media (max-width: 1180px) {
	footer { align-items: flex-start; flex-direction: column; gap: 10px; }
	footer > a { order: 4; }
}

/* ---- "Under construction" tape (D12, amended 23 Oct): store controls stay in place under
   a strip of comic red tape while the store is closed. Markup from rvg_store_link(). ---- */
.rvg-tape { position: relative; display: inline-flex; isolation: isolate; vertical-align: middle; cursor: pointer; }
.rvg-tape > :not(.rvg-sr) { pointer-events: none; filter: grayscale(.8); opacity: .55; }
.rvg-tape[data-rvg-live="1"] > * { pointer-events: auto; }
.rvg-tape::after { content: attr(data-tape); position: absolute; z-index: 2; left: 50%; top: 50%; width: max-content; min-width: 112%;
	padding: .4em 1.1em .32em; transform: translate(-50%, -50%) rotate(-6deg);
	background: #d62839 repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 7px, transparent 7px 14px);
	color: #fff; font: 400 12px/1.1 var(--rvg-sixteen); letter-spacing: .1em; text-transform: uppercase; text-align: center; white-space: nowrap;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .3); pointer-events: none;
	clip-path: polygon(1.5% 0, 98.5% 0, 100% 30%, 98% 50%, 100% 72%, 98.5% 100%, 1.5% 100%, 0 70%, 2% 50%, 0 28%); }
.rvg-tape:hover::after { transform: translate(-50%, -50%) rotate(-4deg); }
.rvg-tape:focus-visible { outline: 3px dashed #d62839; outline-offset: 4px; }
.quick-links .rvg-tape, .actions .rvg-tape { display: flex; }
.quick-links .rvg-tape::after { font-size: 15px; min-width: 70%; }
nav .rvg-tape::after, .rvg-mobilenav .rvg-tape::after { font-size: 8px; letter-spacing: .04em; min-width: 115%; padding: .4em .5em .3em; }
.rvg-mobilenav .rvg-tape { flex: 0 0 auto; margin: 0 10px; }
.actions .rvg-tape::after, .site-header > .rvg-tape::after { font-size: 13px; }
@media (max-width: 520px) { .site-header > .rvg-tape { display: none; } } /* the header's Search button, hidden on phones */
/* That button's tilted tape reached 3px past the right edge between 521 and 900px wide, so the
   whole page scrolled sideways. The header clips sideways only; the tilt up and down still shows. */
.site-header { overflow-x: clip; }

/* The shop section while the store is closed: a construction zone */
.rvg-soon { position: relative; overflow: hidden; margin: 0 0 28px; padding: 64px 28px 30px; border: 3px dashed var(--line); border-radius: 10px;
	background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(214, 40, 57, .035) 22px 44px), var(--surface); text-align: center; }
.rvg-soon-tapes span { position: absolute; left: -10%; right: -10%; padding: .45em 0 .35em; background: #d62839 repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 7px, transparent 7px 14px);
	color: #fff; font: 400 14px/1 var(--rvg-sixteen); letter-spacing: .3em; text-transform: uppercase; word-spacing: 2em; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.rvg-soon-tapes span:first-child { top: 14px; transform: rotate(-2.5deg); }
.rvg-soon-tapes span:last-child { bottom: 10px; transform: rotate(1.5deg); opacity: .85; }
.rvg-soon-title { margin: 0 0 10px; color: var(--ink); font-family: var(--heading-font); font-size: calc(clamp(28px, 4vw, 40px) * var(--heading-scale)); font-style: var(--heading-style); font-weight: var(--heading-weight); line-height: 1.08; }
.rvg-soon p:not(.rvg-soon-title) { max-width: 560px; margin: 0 auto 22px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.rvg-soon .button { margin-bottom: 36px; }

/* ---- The popup: an RPG-style dialog box, the same in light and dark ---- */
.rvg-pop { position: fixed; z-index: 1000; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100% - 32px));
	padding: 18px 20px 16px; border: 4px solid var(--gold); border-radius: 6px; background: #0b1510; color: #eef3ee;
	box-shadow: 0 0 0 4px #0b1510, 0 14px 34px rgba(0, 0, 0, .45); font: 600 15px/1.55 Inter, Arial, sans-serif;
	transform: translate(-50%, 24px); opacity: 0; transition: transform .22s cubic-bezier(.2, 1.3, .4, 1), opacity .18s; }
.rvg-pop.is-on { transform: translate(-50%, 0); opacity: 1; }
.rvg-pop p { margin: 0; }
.rvg-pop-title { margin-bottom: 10px !important; color: var(--gold); font: 400 12px/1.5 var(--rvg-pixel); text-transform: uppercase; }
.rvg-pop-text { margin-bottom: 14px !important; }
.rvg-pop-bar { height: 14px; margin-bottom: 14px; padding: 2px; border: 2px solid var(--gold); }
.rvg-pop-bar i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 11px); transition: width 1.4s steps(12); }
.rvg-pop-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.rvg-pop-ok, .rvg-pop-go { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border: 2px solid var(--gold); border-radius: 4px; font: 800 14px Inter, Arial, sans-serif; cursor: pointer; }
.rvg-pop-ok { background: var(--gold); color: #0b1510; }
.rvg-pop-ok::after { content: " \25B6"; font-size: 10px; }
.rvg-pop-go { background: transparent; color: var(--gold); }
.rvg-pop-ok:focus-visible, .rvg-pop-go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.rvg-pop, .rvg-pop-bar i, .rvg-switch::after, .rvg-tgl { transition: none; }
}

/* ---- The museum's hands-on exhibit (inc/controller.php): an NES-style controller that takes
   the cheat code. A card like the store cards, shown only where rvg.js runs. The controller's
   plastic keeps its own colors in both modes; everything around it uses the variables.
   Wide screens: beside the slideshow, one column. Tablets: under it, two columns. Phones:
   under it, one column (Alex, 29 Oct: not such a big part of the page on desktop). ---- */
.rvg-exhibit { display: none; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "legend" "pad" "code" "help"; gap: 16px; align-content: center;
	margin-top: 18px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 18px rgba(28, 70, 39, .06); }
.rvg-js .rvg-exhibit { display: grid; }
.rvg-exhibit-copy { grid-area: copy; }
.rvg-exhibit-copy .kicker { margin-bottom: 10px; }
.rvg-exhibit h3 { margin: 0 0 10px; font-family: var(--heading-font); font-weight: var(--heading-weight); font-style: var(--heading-style); font-size: calc(32px * var(--heading-scale)); line-height: 1.02; letter-spacing: .01em; text-shadow: 2px 2px 0 var(--heading-drop); }
.rvg-exhibit-copy > p:not(.kicker) { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
/* What the buttons do, like a game's controls screen */
.rvg-controls { grid-area: legend; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; line-height: 1.3; }
.rvg-controls li { display: flex; align-items: center; gap: 8px; }
.rvg-controls b { flex: none; min-width: 2.7em; padding: 3px 6px 2px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink); font: 700 11px/1 "Chakra Petch", Arial, sans-serif; letter-spacing: .06em; text-align: center; }

/* The museum slideshow, worked by the controller (rvg.js museum()): zoom, screen styles,
   a channel-change flash on each flip, and a badge saying what the last press did */
.store-showcase img { transition: opacity .28s ease, transform .3s ease, filter .3s ease; }
.store-showcase[data-zoom="1"] #store-slide { transform: scale(1.5); }
.store-showcase[data-zoom="2"] #store-slide { transform: scale(2); }
.store-showcase[data-screen] figure::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.store-showcase[data-screen="crt"] figure::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .6) 100%); }
.store-showcase[data-screen="crt"] #store-slide { filter: saturate(1.3) contrast(1.12); }
/* Game Boy Camera: a 128-pixel canvas drawn by rvg.js, shown over the photo with hard pixel edges */
.rvg-gbcam { position: absolute; inset: 0; display: none; width: 100%; height: 100%; image-rendering: pixelated; transition: transform .3s ease; pointer-events: none; }
.store-showcase[data-screen="gbcam"] .rvg-gbcam:not([data-off]) { display: block; }
.store-showcase[data-screen="gbcam"] #store-slide { filter: grayscale(1) contrast(1.25) sepia(1) hue-rotate(38deg) saturate(2.6) brightness(.9); } /* only seen if the canvas can't be drawn */
.store-showcase[data-screen="gbcam"] figure { background: #0f380f; }
.store-showcase[data-zoom="1"] .rvg-gbcam { transform: scale(1.5); }
.store-showcase[data-zoom="2"] .rvg-gbcam { transform: scale(2); }
.store-showcase figure.is-flip::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #fff; pointer-events: none; animation: rvg-channel .25s steps(3) forwards; }
@keyframes rvg-channel { from { opacity: .55; } to { opacity: 0; } }
.rvg-museum-badge { position: absolute; z-index: 2; top: 16px; right: 16px; padding: 7px 10px 6px; border: 2px solid var(--gold); border-radius: 4px; background: rgba(11, 21, 16, .9); color: var(--gold);
	font: 400 11px/1.2 var(--rvg-pixel); opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.rvg-museum-badge.is-on { opacity: 1; transform: none; }
.rvg-exhibit-code { grid-area: code; }
.rvg-exhibit-help { grid-area: help; }

/* The controller: the drawing scales with the box; the buttons sit over it */
.rvg-pad { grid-area: pad; position: relative; width: 100%; max-width: 400px; justify-self: center; aspect-ratio: 520 / 282; border-radius: 12px;
	touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.rvg-pad:focus-visible:not(.by-pointer) { outline: 3px solid var(--gold); outline-offset: 6px; }
.rvg-pad.by-pointer:focus { outline: none; }
.rvg-pad-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rvg-pad-hit { position: absolute; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; touch-action: manipulation; }
.rvg-pad-hit:focus-visible { outline: 3px solid var(--gold); outline-offset: 0; }
/* Pressed: the buttons drop onto their ledge, the D-pad rocks away from the pressed arm */
.rvg-pad-a, .rvg-pad-b, .rvg-pad-select, .rvg-pad-start, .rvg-pad-cross { transition: transform .05s; }
.rvg-pad.is-a .rvg-pad-a, .rvg-pad.is-b .rvg-pad-b { transform: translateY(3px); }
.rvg-pad.is-select .rvg-pad-select, .rvg-pad.is-start .rvg-pad-start { transform: translateY(2.5px); }
.rvg-pad.is-up .rvg-pad-cross { transform: translateY(1.5px); }
.rvg-pad.is-down .rvg-pad-cross { transform: translateY(-1.5px); }
.rvg-pad.is-left .rvg-pad-cross { transform: translateX(1.5px); }
.rvg-pad.is-right .rvg-pad-cross { transform: translateX(-1.5px); }
.rvg-pad.is-up .rvg-arrow-up, .rvg-pad.is-down .rvg-arrow-down, .rvg-pad.is-left .rvg-arrow-left, .rvg-pad.is-right .rvg-arrow-right { stroke: #a3a6aa; }

/* The code: eleven boxes that fill in as it's entered */
.rvg-code { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; max-width: 380px; margin: 0 0 12px; }
.rvg-code span { display: grid; place-items: center; aspect-ratio: 1; border: 2px solid var(--field-line); border-radius: 5px; background: var(--field-bg); color: var(--green); font: 400 9px/1 var(--rvg-pixel); }
.rvg-code span.on { border-color: var(--green); background: var(--green); color: var(--on-green); animation: rvg-slot .18s; }
.rvg-code span.on[data-g="up"]::before, .rvg-code span.on[data-g="down"]::before, .rvg-code span.on[data-g="left"]::before, .rvg-code span.on[data-g="right"]::before {
	content: ""; width: 46%; height: 46%; background: currentColor; clip-path: polygon(50% 8%, 95% 88%, 5% 88%); }
.rvg-code span[data-g="down"]::before { transform: rotate(180deg); }
.rvg-code span[data-g="left"]::before { transform: rotate(-90deg); }
.rvg-code span[data-g="right"]::before { transform: rotate(90deg); }
.rvg-code span.next { border-color: var(--gold); }
.rvg-code.bad span { border-color: var(--prompt); background: var(--field-bg); color: var(--prompt); }
.rvg-code.bad { animation: rvg-shake .35s; }
.rvg-code.won span { border-color: var(--gold); background: var(--gold); color: #0b1510; }
@keyframes rvg-slot { 50% { transform: scale(1.18); } }
@keyframes rvg-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.rvg-pad-status { min-height: 1.6em; margin: 0; color: var(--ink); font-weight: 800; }
.rvg-pad-status.blink { color: var(--prompt); font: 400 11px/1.6 var(--rvg-pixel); animation: rvg-blink 1s steps(2, start) infinite; }

/* Hints, one at a time */
.rvg-hints { margin: 0 0 8px; padding-left: 1.3em; color: var(--muted); font-size: 15px; line-height: 1.55; }
.rvg-hints:not(:has(li:not([hidden]))) { display: none; }
.rvg-hints li + li { margin-top: 6px; }
.rvg-hints b { display: block; margin-bottom: 2px; color: var(--ink); letter-spacing: .04em; }
.rvg-hint-next { padding: 0; border: 0; background: none; color: var(--green-dark); font: 800 15px/1.4 Inter, Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rvg-hint-next:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.rvg-pad-keys { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.rvg-pad-keys kbd { padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); font: 600 12px Inter, Arial, sans-serif; }
@media (hover: none) { .rvg-pad-keys { display: none; } }

/* Wide screens: the slideshow and the exhibit side by side at the same height. Only with the
   script; without it the exhibit is hidden and the slideshow keeps the full width. */
@media (min-width: 1100px) {
	.rvg-js .rvg-museum { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(340px, 1fr); gap: 24px; align-items: stretch; }
	.rvg-js .rvg-museum .store-showcase { display: flex; flex-direction: column; }
	.rvg-js .rvg-museum .store-showcase figure { flex: 1 1 auto; height: auto; min-height: 480px; }
	.rvg-js .rvg-museum .store-showcase img { position: absolute; inset: 0; } /* a tall photo mustn't stretch the row; it fits inside it */
	.rvg-museum .rvg-exhibit { margin-bottom: 34px; } /* ends with the photo, above the slideshow dots */
}
@media (min-width: 761px) and (max-width: 1099px) {
	.rvg-exhibit { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "copy pad" "legend pad" "code pad" "help pad"; gap: 16px 36px; align-items: start; padding: 26px 30px; }
	.rvg-pad { align-self: center; }
}
@media (max-width: 760px) {
	/* One column; the controller borrows the card's side padding so its buttons stay big enough to tap */
	/* The title and intro stay on top; the controls list and hints go under the controller, to keep it
	   as close to the photo as they allow (Alex, 29 Oct) */
	.rvg-exhibit { grid-template-areas: "copy" "pad" "code" "legend" "help"; padding: 22px 16px; }
	.rvg-pad { width: calc(100% + 24px); max-width: 440px; margin-inline: -12px; }
}
@media (prefers-reduced-motion: reduce) {
	.rvg-code span.on, .rvg-code.bad, .rvg-pad-status.blink { animation: none; }
	.rvg-pad-a, .rvg-pad-b, .rvg-pad-select, .rvg-pad-start, .rvg-pad-cross, .store-showcase img, .rvg-museum-badge { transition: none; }
	.store-showcase figure.is-flip::before { animation: none; opacity: 0; }
}

/* ---- Home page flow (draft, Alex 30 Oct; front-page.php). The hero sits right on the arcade
   bar, a slim strip says the shop opens later, each section is a numbered stage, and every
   section shares the hero's content width, so their left edges line up at any screen size. ---- */
:root { --rvg-content: min(calc(1280px - 10vw), calc(100% - 10vw)); } /* the hero's: 1280px wide less its 5vw sides */
.rvg-hero-flow { min-height: 0; padding-bottom: 40px; }
.rvg-hero-flow .hero-photo img { object-position: 50% 62%; } /* the arcade photo: keep the cabinet and counters in the wide tablet frame */
.rvg-stage { margin-right: .15em; color: var(--prompt); font: 400 10px/1 var(--rvg-pixel); letter-spacing: 0; }
.trade .rvg-stage { color: #fff; }
/* While the shop is closed: one line, taped, instead of a big empty box */
.rvg-shop-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 auto 10px; padding: 14px 20px; border: 2px dashed var(--line); border-radius: 10px;
	background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(214, 40, 57, .035) 22px 44px), var(--surface); color: var(--muted); font-size: 15px; line-height: 1.5; }
.rvg-shop-strip b { flex: none; padding: .5em 1em .4em; transform: rotate(-3deg); background: #d62839 repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 7px, transparent 7px 14px);
	color: #fff; font: 400 12px/1 var(--rvg-sixteen); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
/* One content width */
.locations > .section-title, .location-grid { max-width: calc(1280px - 10vw); }
.trade { padding-inline: calc(max(0px, (100% - 1280px) / 2) + 5vw); }
@media (min-width: 901px) {
	.player-prompt, .quick-links, .rvg-shop-strip { width: var(--rvg-content); max-width: none; }
}
/* Our story and the museum, as one section */
.rvg-museum-stage .about { max-width: none; margin: 0 0 30px; padding: 0; }
@media (max-width: 900px) {
	.rvg-shop-strip { margin: 0 20px 10px; }
	.trade { padding-inline: 20px; }
}