/* Era identity layer for the Game Boy family guide. No external fonts or assets. */

/* Home: a small archive wall that mixes the family eras. */
html.era-home {
  --page: #e8e2d2;
  --surface: #f8f5e9;
  --ink: #20271f;
  --muted: #4f5a4c;
  --accent: #385b43;
  --accent-ink: #ffffff;
  --spec: #d4d8bb;
  --line: #b8bca3;
  --soft: #e3e4d0;
  --shadow: 0 24px 60px rgba(34, 43, 31, .14);
}
html.era-home body {
  background-image: radial-gradient(ellipse at 80% 0%, rgba(240, 234, 211, .8), transparent 45rem),
    linear-gradient(135deg, rgba(73, 82, 59, .035) 25%, transparent 25% 50%, rgba(73, 82, 59, .035) 50% 75%, transparent 75%);
  background-size: auto, 12px 12px;
}
html.era-home .hero {
  grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr);
  gap: clamp(28px, 4.2vw, 54px);
}
html.era-home .hero-media.family-stage {
  display: block;
  position: relative;
  isolation: isolate;
  min-height: 374px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #53604c;
  border-radius: 18px 18px 28px 18px;
  background: linear-gradient(145deg, #cad58e 0%, #9bbc0f 52%, #73920c 100%);
  box-shadow: 7px 7px 0 rgba(68, 47, 74, .2), 0 24px 44px rgba(38, 48, 33, .18), inset 0 1px rgba(255,255,255,.8);
}
html.era-home .family-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .4;
  background-image: repeating-linear-gradient(0deg, rgba(15, 56, 15, .11) 0 1px, transparent 1px 4px),
    radial-gradient(circle, rgba(15, 56, 15, .16) .7px, transparent .9px),
    radial-gradient(ellipse at 50% 34%, rgba(255,255,255,.62), transparent 60%);
  background-size: auto, 5px 5px, auto;
}
html.era-home .family-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 4%;
  right: 4%;
  bottom: 50%;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, #53684a, #d4d6a5 38%, #53684a);
  box-shadow: 0 7px 0 rgba(37, 50, 33, .13);
}
html.era-home .family-kicker {
  position: absolute;
  z-index: 6;
  top: 14px;
  left: 16px;
  margin: 0;
  color: #1a301e;
  font: 800 .62rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html.era-home .family-era-stamp {
  position: absolute;
  z-index: 6;
  top: 12px;
  right: 13px;
  padding: 5px 8px;
  border: 1px solid rgba(15, 56, 15, .28);
  border-radius: 4px;
  background: rgba(244, 245, 218, .78);
  color: #233820;
  font: 750 .58rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .05em;
}
html.era-home .family-device {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  line-height: 0;
  filter: drop-shadow(0 10px 8px rgba(24, 31, 26, .3));
}
html.era-home .family-device img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
html.era-home .family-device span {
  position: absolute;
  left: 50%;
  bottom: -20px;
  padding: 3px 6px;
  transform: translateX(-50%);
  border: 1px solid rgba(28, 43, 29, .19);
  border-radius: 4px;
  background: rgba(248, 247, 230, .9);
  color: #263326;
  font: 800 .55rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .035em;
  white-space: nowrap;
}
html.era-home .family-device--dmg { left: 6%; bottom: 51%; width: 19%; z-index: 2; }
html.era-home .family-device--pocket { left: 28%; bottom: 51%; width: 14.5%; z-index: 2; }
html.era-home .family-device--color { left: 46%; bottom: 51%; width: 15%; z-index: 2; }
html.era-home .family-device--sp { left: 68%; bottom: 51%; width: 19%; z-index: 2; }
html.era-home .family-device--advance { left: 11%; bottom: 16%; width: 35%; z-index: 4; }
html.era-home .family-device--micro { left: 55%; bottom: 19%; width: 29%; z-index: 4; }
html.era-home .family-caption {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: 9px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #1d321e;
  font: 750 .65rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
html.era-home .family-caption span:first-child::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 6px 0 1px;
  border-radius: 50%;
  background: #70415d;
  vertical-align: 1px;
}
html.era-home .era-card {
  position: relative;
  overflow: hidden;
  min-height: 185px;
  border-radius: 8px 8px 18px 8px;
  box-shadow: 0 12px 22px rgba(32, 42, 34, .07);
}
html.era-home .era-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--era-color);
}
html.era-home .era-card--original { --era-color: #426b39; background: linear-gradient(150deg, #f3f3e5, #e7ebd4); }
html.era-home .era-card--color { --era-color: #a34c9c; background: linear-gradient(150deg, #f8eef7, #eee1f3); }
html.era-home .era-card--advance { --era-color: #506caa; background: linear-gradient(150deg, #f2f5fb, #e0e8f4); }
html.era-home .era-card .card-label,
html.era-home .era-card .card-link { color: color-mix(in srgb, var(--era-color), #19231d 22%); }

/* Original / Pocket: molded gray plastic, pea-green LCD and pixel-like type. */
html.era-original body {
  --page: #d8dad3;
  --surface: #f0f1e8;
  --ink: #1e2921;
  --muted: #3e4d40;
  --accent: #70415d;
  --accent-ink: #ffffff;
  --spec: #d9e1bb;
  --line: #9da69a;
  --soft: #e5e8d7;
  --shadow: 0 20px 46px rgba(29, 42, 31, .14);
  position: relative;
  isolation: isolate;
  background-color: var(--page);
  background-image: linear-gradient(135deg, rgba(255,255,255,.44), transparent 46%),
    repeating-linear-gradient(0deg, rgba(15,56,15,.022) 0 1px, transparent 1px 6px);
}
html.era-original body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: repeating-linear-gradient(0deg, rgba(15,56,15,.1) 0 1px, transparent 1px 5px),
    radial-gradient(circle, rgba(15,56,15,.11) .7px, transparent .9px);
  background-size: auto, 6px 6px;
}
html.era-original .shell { position: relative; z-index: 1; }
html.era-original { --lcd-1: #0f380f; --lcd-2: #306230; --lcd-3: #8bac0f; --lcd-4: #9bbc0f; }
html.era-original h1,
html.era-original h2,
html.era-original h3 {
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: .7px 0 currentColor;
}
html.era-original .hero h1 { letter-spacing: -.09em; }
html.era-original .site-header { border-bottom-style: dashed; }
html.era-original .hero-media {
  border: 2px solid #7d8978;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--lcd-4), var(--lcd-3) 56%, var(--lcd-2));
  box-shadow: 5px 5px 0 rgba(112, 65, 93, .25), 0 20px 42px rgba(29, 42, 31, .13);
}
html.era-original .hero-media::before {
  opacity: .33;
  background-image: repeating-linear-gradient(0deg, rgba(15,56,15,.14) 0 1px, transparent 1px 4px),
    radial-gradient(circle, rgba(15,56,15,.2) .7px, transparent .9px);
  background-size: auto, 5px 5px;
}
html.era-original .spec-strip { border-radius: 5px; }
html.era-original .swatch { border-radius: 5px; }
html.era-original .inspect-card { border-radius: 6px; box-shadow: 4px 4px 0 rgba(51, 74, 48, .1); }
html.era-original .game-table { border-radius: 6px; }
html.era-original .game-row { border-top-style: dashed; }
html.era-original .button { border-radius: 5px; box-shadow: 3px 3px 0 rgba(40, 31, 38, .13); }
html.era-original .button-primary { border-color: #70415d; background: linear-gradient(180deg, #80506d, #60364f); }
html.era-original .pixel-accent i { box-shadow: 0 0 0 1px rgba(15,56,15,.12); }
html.era-original a:focus-visible,
html.era-original button:focus-visible { outline: 3px solid #70415d; outline-offset: 3px; }

/* Color: transparent-plastic reflections, soft glass and playful color. */
html.era-color body {
  --page: #eee5f2;
  --surface: #fff9ff;
  --ink: #302438;
  --muted: #584b62;
  --accent: #634477;
  --accent-ink: #ffffff;
  --spec: #e3d6ed;
  --line: #c7b2d1;
  --soft: #f2e7f5;
  --shadow: 0 20px 52px rgba(69, 42, 87, .13);
  background-color: var(--page);
  background-image: radial-gradient(ellipse at 7% 8%, rgba(169, 106, 184, .19), transparent 35rem),
    radial-gradient(ellipse at 91% 17%, rgba(39, 157, 157, .12), transparent 32rem),
    linear-gradient(140deg, rgba(255,255,255,.26), transparent 60%);
}
html.era-color {
  --gbl-berry: #be416c;
  --gbl-teal: #168b8d;
  --gbl-dandelion: #d6a620;
  --gbl-kiwi: #6d9f38;
}
html.era-color .site-header { border-bottom-color: color-mix(in srgb, var(--line), transparent 16%); }
html.era-color .hero h1,
html.era-color .section-title,
html.era-color .inspect-card h3 { letter-spacing: -.04em; }
html.era-color .hero-media {
  border-radius: 38px 18px 38px 18px;
  background: radial-gradient(ellipse at 48% 44%, color-mix(in srgb, var(--surface), transparent 3%) 0 35%, transparent 76%),
    linear-gradient(145deg, color-mix(in srgb, var(--gbl-berry), white 84%), color-mix(in srgb, var(--gbl-teal), white 86%) 54%, var(--soft));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 22px 44px rgba(77, 52, 90, .14);
}
html.era-color .hero-media::before { opacity: .13; background-size: 15px 15px; }
html.era-color .spec-strip,
html.era-color .inspect-card,
html.era-color .swatch,
html.era-color .game-table {
  border-color: color-mix(in srgb, var(--line), white 12%);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(12px);
}
html.era-color .spec-strip { border-radius: 24px; box-shadow: inset 0 1px rgba(255,255,255,.85), 0 8px 22px rgba(69,42,87,.07); }
html.era-color .inspect-card { border-radius: 22px; box-shadow: inset 0 1px rgba(255,255,255,.82), 0 10px 22px rgba(69,42,87,.07); }
html.era-color .swatch { border-radius: 18px; }
html.era-color .swatch-dot { border: 2px solid white; box-shadow: 0 2px 7px rgba(28, 22, 33, .17); }
html.era-color .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), transparent 55%), 0 8px 18px rgba(69,42,87,.13); }
html.era-color .button { border-radius: 999px; box-shadow: 0 5px 12px rgba(69,42,87,.09); }
html.era-color .button-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--accent), white 12%), var(--accent)); }
html.era-color .color-count::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 7px 0 0;
  border-radius: 50%;
  background: conic-gradient(var(--gbl-berry) 0 25%, var(--gbl-teal) 25% 50%, var(--gbl-dandelion) 50% 75%, var(--gbl-kiwi) 75% 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 1px 5px rgba(46,36,56,.2);
  vertical-align: -2px;
}
html.era-color a:focus-visible,
html.era-color button:focus-visible { outline: 3px solid #513265; outline-offset: 3px; }

/* Advance / SP / Micro: wide layouts, indigo glass and brushed-metal sheen. */
html.era-advance body {
  --page: #e7eaf3;
  --surface: #fbfcff;
  --ink: #20263a;
  --muted: #4c566e;
  --accent: #3e4d85;
  --accent-ink: #ffffff;
  --spec: #d5dbea;
  --line: #b3bfd7;
  --soft: #e4e9f3;
  --shadow: 0 22px 54px rgba(42, 52, 96, .15);
  background-color: var(--page);
  background-image: radial-gradient(ellipse at 86% 0%, rgba(255,255,255,.9), transparent 33rem),
    linear-gradient(130deg, rgba(87,105,151,.065) 1px, transparent 1px),
    linear-gradient(45deg, transparent 64%, rgba(124,153,191,.08));
  background-size: auto, 20px 20px, auto;
}
@media (min-width: 1100px) {
  html.era-advance .hero { grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: 42px; }
}
@media (min-width: 621px) and (max-width: 1099px) {
  html.era-advance .hero { grid-template-columns: minmax(0, 1fr) minmax(320px, .95fr); gap: 28px; }
}
html.era-advance .hero-media {
  border: 1px solid color-mix(in srgb, var(--line), white 16%);
  border-radius: 13px;
  background: linear-gradient(137deg, rgba(255,255,255,.95), color-mix(in srgb, var(--soft), white 12%) 44%, color-mix(in srgb, var(--accent), white 89%));
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.43), inset 0 1px 0 white, 0 20px 44px rgba(40,52,94,.14);
}
html.era-advance .hero-media::before {
  opacity: .17;
  background-image: linear-gradient(135deg, transparent 49.6%, var(--accent) 50%, transparent 50.4%),
    linear-gradient(180deg, rgba(255,255,255,.8), transparent 65%);
  background-size: 42px 42px, auto;
}
html.era-advance .spec-strip {
  border-radius: 9px 9px 18px 9px;
  background: linear-gradient(112deg, color-mix(in srgb, var(--surface), white 20%), var(--spec) 60%, color-mix(in srgb, var(--soft), white 10%));
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 10px 25px rgba(42,52,96,.07);
}
html.era-advance .swatch,
html.era-advance .inspect-card,
html.era-advance .game-table {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface), white 24%), var(--surface) 64%, color-mix(in srgb, var(--soft), white 38%));
  box-shadow: inset 0 1px rgba(255,255,255,.92), 0 8px 20px rgba(42,52,96,.065);
}
html.era-advance .swatch { border-radius: 8px 8px 14px 8px; }
html.era-advance .inspect-card { border-radius: 9px 9px 17px 9px; }
html.era-advance .button { border-radius: 7px; box-shadow: inset 0 1px rgba(255,255,255,.32), 0 5px 12px rgba(42,52,96,.12); }
html.era-advance .button-primary { background: linear-gradient(160deg, color-mix(in srgb, var(--accent), white 14%), var(--accent) 66%, color-mix(in srgb, var(--accent), black 9%)); }
html.era-advance .site-header { border-bottom-color: color-mix(in srgb, var(--line), white 10%); }
html.era-advance a:focus-visible,
html.era-advance button:focus-visible { outline: 3px solid #344477; outline-offset: 3px; }

@media (max-width: 900px) {
  html.era-home .hero { grid-template-columns: minmax(0, 1fr) minmax(285px, .86fr); gap: 28px; }
}
@media (max-width: 620px) {
  html.era-home .hero { grid-template-columns: 1fr; padding: 24px 0; gap: 16px; }
  html.era-home .hero-media.family-stage { min-height: 290px; border-radius: 12px 12px 22px 12px; }
  html.era-home .family-device span { bottom: -18px; padding: 3px 5px; font-size: .5rem; }
  html.era-home .family-caption { right: 10px; left: 10px; font-size: .58rem; }
  html.era-home .family-caption span:last-child { display: none; }
  html.era-home .era-card { min-height: 0; }
  html.era-advance .hero { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.era-home *, html.era-original *, html.era-color *, html.era-advance * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}