@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-800.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400-italic.woff2') format('woff2');
}

:root {
  --mks-cyan: #5dd5e6;
  --mks-yellow: #fbd34a;
  --mks-green: #4ade80;
  --mks-red: #ff7a7a;
  --mks-bg: #0a1628;
  --mks-chrome-1: #03060c;
  --mks-chrome-2: #07101e;
  --mks-card-bg: #0d1a2e;
  --mks-card-border: #1d4258;
  --mks-text: #e8eef2;
  --mks-text-body: #c8d4e0;
  --mks-text-mute: #a8b8c8;
  --mks-text-dim: #7d96b0;
  --mks-text-faint: #5a6a7a;
  --mks-text-fainter: #3a4a5a;
  --mks-glow: rgba(93, 213, 230, 0.22);

  --mks-max-content: 720px;
  --mks-max-prose: 520px;
  --mks-pad-x: 28px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Matches the footer's bottom gradient stop, so any area visible above the
     nav or below the footer during resize/over-scroll blends into the chrome
     instead of flashing the navy body background. */
  background: var(--mks-chrome-1);
}
html, body {
  margin: 0;
  padding: 0;
  color: var(--mks-text);
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--mks-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

/* The 404 page is short; give it enough height that the footer doesn't ride up too close to the nav. */
.mks-404 { min-height: 55vh; }

:focus-visible {
  outline: 2px solid var(--mks-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

/* === Header / Nav ============================================ */

.mks-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--mks-pad-x);
  background: linear-gradient(to bottom, var(--mks-chrome-1) 0%, var(--mks-chrome-1) 55%, var(--mks-chrome-2) 100%);
  border-bottom: 1px solid var(--mks-cyan);
  position: relative;
}
.mks-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 7px;
  background: linear-gradient(to bottom, var(--mks-glow), transparent);
  pointer-events: none;
}
.mks-wordmark-nav {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--mks-cyan);
  text-transform: uppercase;
}
.mks-nav-link {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--mks-text-dim);
  text-transform: uppercase;
  text-decoration: none;
}
.mks-nav-link:hover { color: var(--mks-text-mute); }

/* === Hero ==================================================== */

.mks-hero {
  padding: 44px var(--mks-pad-x);
  text-align: center;
}
.mks-hero-title {
  font-weight: 800;
  font-size: 48px;
  letter-spacing: 6px;
  color: var(--mks-yellow);
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.mks-hero-tagline {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--mks-cyan);
  text-transform: uppercase;
  margin: 22px 0 0;
}

/* === Philosophy ============================================= */

.mks-philosophy {
  padding: 44px var(--mks-pad-x);
  border-top: 1px solid rgba(93, 213, 230, 0.1);
}
.mks-philosophy-body {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.75;
  color: var(--mks-text-body);
  max-width: var(--mks-max-prose);
  margin: 0 auto;
}
.mks-philosophy-body p { margin: 0 0 10px; }
.mks-philosophy-body p:last-child { margin-bottom: 0; }

/* === Game card ============================================== */

.mks-game-section {
  padding: 44px var(--mks-pad-x);
  border-top: 1px solid rgba(93, 213, 230, 0.1);
}
.mks-card-inner {
  background: var(--mks-card-bg);
  border: 1px solid var(--mks-card-border);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--mks-max-prose);
  margin: 0 auto;
}
.mks-card-screenshot {
  position: relative;
  background: #0e1e2e;
  border-radius: 4px;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.mks-card-screenshot img,
.mks-card-screenshot canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Title/CTA overlay scrims so text stays legible over the busy backdrop. */
.mks-card-screenshot::before,
.mks-card-screenshot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  pointer-events: none;
  z-index: 1;
}
.mks-card-screenshot::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(3, 6, 12, 0.55), rgba(3, 6, 12, 0));
}
.mks-card-screenshot::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(3, 6, 12, 0.55), rgba(3, 6, 12, 0));
}
.mks-card-overlay-top,
.mks-card-overlay-bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  padding: 0 16px;
}
.mks-card-overlay-top {
  top: 18px;
}
.mks-card-overlay-bottom {
  bottom: 18px;
}
.mks-card-status {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--mks-green);
  margin: 0 0 8px;
}
.mks-card-title {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 3px;
  color: var(--mks-yellow);
  text-transform: uppercase;
  margin: 0 0 6px;
  line-height: 1.15;
}
.mks-card-subtitle {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--mks-cyan);
  text-transform: uppercase;
  margin: 0;
}
.mks-card-body {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mks-text-body);
  margin: 0;
  text-align: center;
  max-width: 520px;
  align-self: center;
}

/* === Primary CTA / yellow button ============================ */

.mks-cta {
  display: inline-block;
  background: var(--mks-yellow);
  color: var(--mks-bg);
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.mks-cta:hover { filter: brightness(1.05); }
.mks-cta:active { transform: scale(0.98); }

/* === Notify form (inline) =================================== */

.mks-notify-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin: 0;
}
.mks-notify-input {
  flex: 1 1 200px;
  min-width: 0;
  background: var(--mks-bg);
  border: 1px solid var(--mks-card-border);
  border-radius: 4px;
  color: var(--mks-text);
  font-family: inherit;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  min-height: 44px;
}
.mks-notify-input::placeholder {
  color: var(--mks-text-faint);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
}
.mks-notify-input:focus {
  outline: none;
  border-color: var(--mks-cyan);
  box-shadow: 0 0 0 2px var(--mks-glow);
}
.mks-notify-submit {
  flex: 0 0 auto;
}
.mks-notify-message {
  margin: 10px 0 0;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.5;
}
.mks-notify-message.error { color: var(--mks-red); }
.mks-notify-success {
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--mks-cyan);
  margin: 0;
  line-height: 1.6;
}

/* === Footer ================================================= */

.mks-footer {
  padding: 30px var(--mks-pad-x) 22px;
  background: linear-gradient(to bottom, var(--mks-chrome-2) 0%, var(--mks-chrome-1) 50%, var(--mks-chrome-1) 100%);
  border-top: 1px solid var(--mks-cyan);
  text-align: center;
  position: relative;
}
.mks-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 7px;
  background: linear-gradient(to top, var(--mks-glow), transparent);
  pointer-events: none;
}
.mks-mukashi-def {
  font-weight: 400;
  font-size: 12px;
  color: var(--mks-text-dim);
  line-height: 1.5;
  margin: 0 auto 18px;
  font-style: italic;
  letter-spacing: 0.5px;
}
.mks-footer-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--mks-text-faint);
  text-transform: uppercase;
  margin: 10px 0;
}
.mks-footer-row a,
.mks-footer-row button {
  color: var(--mks-text-faint);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.mks-footer-row a:hover,
.mks-footer-row button:hover {
  color: var(--mks-text-dim);
  text-decoration: underline;
}
.mks-copyright {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--mks-text-fainter);
  text-transform: uppercase;
  margin: 12px 0 0;
}

/* === Cookie banner ========================================== */

.mks-cookie {
  position: sticky;
  bottom: 0;
  background: var(--mks-chrome-2);
  border-top: 1px solid var(--mks-card-border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: 'JetBrains Mono', monospace;
  z-index: 10;
}
.mks-cookie[hidden] { display: none; }
.mks-cookie-text {
  font-weight: 400;
  font-size: 11px;
  color: var(--mks-text-mute);
  line-height: 1.55;
}
.mks-cookie-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.mks-cookie-btn {
  background: transparent;
  border: 1px solid var(--mks-cyan);
  color: var(--mks-cyan);
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 3px;
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.mks-cookie-btn.primary {
  background: var(--mks-cyan);
  border-color: var(--mks-cyan);
  color: var(--mks-bg);
  font-weight: 700;
}
.mks-cookie-btn:hover { filter: brightness(1.1); }

/* === Page-specific (privacy, 404) =========================== */

.mks-page {
  padding: 60px var(--mks-pad-x);
  max-width: 720px;
  margin: 0 auto;
}
.mks-page h1 {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--mks-yellow);
  text-transform: uppercase;
  margin: 0 0 24px;
  line-height: 1.2;
}
.mks-page h2 {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--mks-cyan);
  text-transform: uppercase;
  margin: 28px 0 8px;
}
.mks-page h3 {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--mks-text);
  text-transform: uppercase;
  margin: 18px 0 6px;
}
.mks-page-meta {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--mks-text-dim);
  text-transform: uppercase;
  margin: -16px 0 24px;
}
.mks-page-meta strong {
  font-weight: 600;
  color: var(--mks-text-mute);
}
.mks-page p,
.mks-page li {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.75;
  color: var(--mks-text-body);
}
.mks-page ul { padding-left: 18px; margin: 6px 0 14px; }
.mks-page a { color: var(--mks-cyan); }

.mks-404 {
  padding: 90px var(--mks-pad-x) 110px;
  text-align: center;
}
.mks-404-code {
  font-weight: 800;
  font-size: 48px;
  letter-spacing: 6px;
  color: var(--mks-yellow);
  margin: 0;
}
.mks-404-msg {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--mks-cyan);
  text-transform: uppercase;
  margin: 18px 0 30px;
}
.mks-404 a {
  color: var(--mks-text-mute);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--mks-card-border);
  padding-bottom: 2px;
}
.mks-404 a:hover { color: var(--mks-cyan); border-color: var(--mks-cyan); }

/* === Responsive ============================================= */

/* Tablet portrait and below */
@media (max-width: 640px) {
  .mks-card-title { font-size: 20px; letter-spacing: 2.2px; }
  .mks-card-overlay-top { top: 14px; }
  .mks-card-overlay-bottom { bottom: 14px; }
}

/* Mobile */
@media (max-width: 640px) {
  :root { --mks-pad-x: 20px; }
  .mks-hero { padding: 36px 20px; }
  .mks-hero-title { font-size: 34px; letter-spacing: 4px; }
  .mks-philosophy { padding: 36px 20px; }
  .mks-game-section { padding: 36px 20px; }
  .mks-card-inner { padding: 14px; }
  .mks-footer { padding: 28px 20px 22px; }
  .mks-footer-row { gap: 18px; }
  .mks-cookie { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 18px; }
  .mks-cookie-buttons { justify-content: stretch; }
  .mks-cookie-btn { flex: 1; }
  .mks-page { padding: 48px 20px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .mks-hero-title { font-size: 28px; letter-spacing: 3px; }
  .mks-card-title { font-size: 17px; letter-spacing: 1.5px; }
  .mks-card-status { font-size: 9px; letter-spacing: 2px; margin-bottom: 6px; }
  .mks-card-subtitle { font-size: 10px; letter-spacing: 1.5px; }
  .mks-card-overlay-top { top: 12px; }
  .mks-card-overlay-bottom { bottom: 12px; }
  .mks-nav { padding: 14px 18px; }
  .mks-wordmark-nav { letter-spacing: 3px; }
  .mks-nav-link { letter-spacing: 1.5px; font-size: 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mks-cta:active { transform: none; }
}