@font-face { font-family: "Jersey 15"; src: url("assets/Jersey15-Regular.ttf"); font-display: swap; }
@font-face { font-family: "Jersey 25"; src: url("assets/Jersey25-Regular.ttf"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("assets/PixelifySans.ttf"); font-display: swap; }

:root {
  --base: #00ff88;
  --dark: #0a0e27;
  --bg-dark: color-mix(in srgb, var(--base) 15%, #0a0e27);
  --bg-medium: color-mix(in srgb, var(--base) 20%, #1a1f3a);
  --bg-light: color-mix(in srgb, var(--base) 25%, #2a2f4a);
  --shadow-sm: 2px 2px 0 rgba(0, 0, 0, .5);
  --shadow-md: 4px 4px 0 rgba(0, 0, 0, .5);
  --scanlines: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .09) 2px, rgba(0, 0, 0, .09) 4px);

  --smoothie-font-family: "Jersey 25", "Pixelify Sans", system-ui, sans-serif;
  --smoothie-font-family-display: "Jersey 15", "Pixelify Sans", system-ui, sans-serif;
  --smoothie-color-primary: var(--base);
  --smoothie-color-primary-hover: color-mix(in srgb, var(--base) 90%, var(--dark));
  --smoothie-color-primary-active: color-mix(in srgb, var(--base) 80%, var(--dark));
  --smoothie-color-primary-contrast: #000;
  --smoothie-color-secondary: var(--bg-light);
  --smoothie-color-secondary-hover: color-mix(in srgb, var(--bg-light) 90%, #fff);
  --smoothie-color-secondary-active: color-mix(in srgb, var(--bg-light) 80%, var(--dark));
  --smoothie-color-secondary-contrast: #fff;
  --smoothie-color-surface: var(--bg-medium);
  --smoothie-color-surface-tertiary: var(--bg-light);
  --smoothie-color-text: #fff;
  --smoothie-color-text-secondary: color-mix(in srgb, var(--base) 40%, #b0b8cc);
  --smoothie-color-border: color-mix(in srgb, var(--base) 30%, #4a5568);
  --smoothie-focus-ring-color: var(--base);
  --smoothie-layout-bg: var(--bg-dark) var(--scanlines);
  font-size: 1.2rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--smoothie-font-family); color: var(--smoothie-color-text); background: var(--smoothie-layout-bg); line-height: 1.35; }
h1, h2, h3 { font-family: var(--smoothie-font-family-display); margin: 0 0 1.5rem; line-height: 1.1; }
h1 { font-size: 2rem; }
h3 { font-size: 1.5rem; margin: 0 0 .5rem; }
p { margin: 0; }
a { color: var(--smoothie-color-primary); }
nav a { text-decoration: none; }

.wrap { width: min(64rem, 100% - 3rem); margin: 0 auto; }
header.wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1rem; padding: 1.25rem 0; }
header.wrap .muted { flex-basis: 100%; }
main.wrap { padding: 1rem 0 3rem; }
footer.wrap { padding-bottom: 1rem; }
.footer-row { display: grid; gap: .5rem; padding: 1rem 0; border-top: 1px solid var(--smoothie-color-border); }
.brand { font-family: var(--smoothie-font-family-display); font-size: 1.5rem; color: inherit; text-decoration: none; }
.muted { color: var(--smoothie-color-text-secondary); }
.row { display: flex; flex-wrap: wrap; gap: .75rem; }

.game { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; justify-items: start; }
.shots {
  width: 100%;
  --smoothie-font-stack: var(--smoothie-font-family-display);
  --smoothie-carousel-item-gap: .75rem;
  --smoothie-carousel-bleed: 4px;
  --smoothie-carousel-nav-color: var(--smoothie-color-primary);
  --smoothie-carousel-nav-color-hover: #fff;
  --smoothie-carousel-nav-bg-hover: var(--smoothie-color-surface);
  --smoothie-carousel-nav-bg-active: var(--smoothie-color-surface-tertiary);
}
.shots img { width: 140px; display: block; border: 3px solid #000; box-shadow: var(--shadow-sm); }

.about { max-width: 44rem; display: grid; gap: .75rem; line-height: 1.5; }
.about h3:not(:first-child) { margin-top: 1rem; }
.about ul { margin: 0; padding-left: 1.25rem; }
.about strong { color: var(--smoothie-color-primary); font-weight: 400; }

.lockup { display: inline-flex; align-items: center; gap: .6rem; margin: 0; text-transform: uppercase; }
.lockup img { image-rendering: pixelated; filter: drop-shadow(2.5px 2.5px 0 rgba(0, 0, 0, .35)); }
.lockup > span { display: inline-flex; flex-direction: column; align-items: flex-start; }
.frolf { font-size: 3rem; line-height: 1; text-shadow: 3px 3px 0 #000; }
.fest { font-size: 1.875rem; line-height: 1; margin: -.3em -.22em 0 0; letter-spacing: .22em; color: var(--smoothie-color-primary); text-shadow: 2px 2px 0 #000; }

smoothie-button {
  --smoothie-font-family: var(--smoothie-font-family-display);
  --smoothie-button-text-transform: uppercase;
  --smoothie-button-font-weight: 400;
  --smoothie-button-radius: 4px;
  --smoothie-button-border: 3px solid color-mix(in srgb, var(--smoothie-button-bg, var(--smoothie-color-primary)) 62%, #000);
  --smoothie-button-shadow: var(--shadow-md);
  --smoothie-button-shadow-hover: var(--shadow-md);
  --smoothie-button-shadow-active: var(--shadow-sm);
  --smoothie-button-active-transform: translate(2px, 2px);
}
smoothie-button[variant="ghost"] { --smoothie-button-border: 3px solid #000; --smoothie-button-shadow: var(--shadow-sm); --smoothie-button-shadow-hover: var(--shadow-sm); --smoothie-button-bg: var(--smoothie-color-surface); }

.rating { display: grid; gap: .15rem; color: var(--smoothie-color-primary); font-family: var(--smoothie-font-family-display); font-size: 1.125rem; }
.rating span { display: inline-flex; gap: .4rem; }

.policy { max-width: 44rem; line-height: 1.55; }
.policy h2 { font-size: 1.5rem; margin: 2.5rem 0 .75rem; }
.policy h3 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.policy p { margin: 0 0 1rem; }