/* R-01 · the base for the static pages outside the app: the arcade (/games/, with css/arcade.css), the 404 and
   the MBG Simulator privacy policy. The home pages (Work at /, Fun at /fun/) are the React app in src/. */

@font-face { font-family: "Quattro"; src: url("/fonts/quattro-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Quattro"; src: url("/fonts/quattro-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Quattro"; src: url("/fonts/quattro-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Mono"; src: url("/fonts/mono-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mono"; src: url("/fonts/mono-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --black: #050304; --panel: #110b0c; --panel2: #1a1112; --line: rgba(244, 237, 228, .12); --line2: rgba(244, 237, 228, .2);
  --ink: #f4ede4; --ink2: #fff8ef; --muted: #a2948c; --dim: #8a7c75;
  --red: #d7263d; --red2: #ff5964; --pink: #f2bac3; --sel: #5c111b; --ok: #6ee7a8; --amber: #ffb547;
  --body: "Quattro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 22px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: var(--ink); font: 400 1.04rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--ink2); text-underline-offset: 3px; text-decoration-color: rgba(255, 89, 100, .6); }
a:hover { color: var(--red2); }
img, video { max-width: 100%; }
::selection { background: var(--sel); color: var(--ink2); }
:focus-visible { outline: 2px solid var(--red2); outline-offset: 3px; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.dots { background-image: radial-gradient(circle, rgba(244, 237, 228, .085) 1.3px, transparent 1.8px); background-size: 22px 22px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo .mark { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line2); }
.logo .wm { height: 20px; width: auto; }

.led { --c: var(--ok); position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 8px var(--c); }
.led--red { --c: var(--red2); }
.led--amber { --c: var(--amber); }
.led::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--c) 70%, transparent); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .led::after { animation: led 2.2s ease-out infinite; } }
@keyframes led { from { transform: scale(1); opacity: 1; } 70%, to { transform: scale(2.75); opacity: 0; } }
kbd { font: 700 .78em/1 var(--mono); padding: 3px 7px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px; color: var(--ink2); }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 14px; border: 1px solid var(--red2); background: var(--red); color: #fff; text-decoration: none; cursor: pointer;
  font: 700 .96rem/1 var(--mono); transition: transform .15s, background .2s; }
.btn:hover { transform: translateY(-2px); background: var(--red2); color: #fff; }
.gate-head { display: flex; align-items: center; gap: 9px; margin: 0; font: 400 .7rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red2); }