/*
 * Play Giana Sisters — C64 screen palette correction
 *
 * Palette values are sampled from the user-supplied original C64 canvas:
 * black #000000, dark stone #505050, light stone #808080,
 * character green #60A860, and C64 blue #4030A8.
 *
 * The masonry below is original CSS geometry. It does not reuse original
 * title-screen tiles, sprites, screenshots, or pixel arrangements.
 */
:root {
  --c64-screen-black: #000000;
  --c64-stone-dark: #505050;
  --c64-stone-light: #808080;
  --c64-screen-green: #60A860;
  --c64-screen-blue: #4030A8;
  --ink: var(--c64-screen-black);
  --ink-raised: #080808;
  --moss: #304828;
  --moss-raised: #304828;
  --signal: var(--c64-screen-green);
  --signal-soft: var(--c64-screen-green);
  --stone: var(--c64-stone-light);
  --ash: #808080;
  --clay: var(--c64-stone-dark);
  --stone-dark: var(--c64-stone-dark);
  --stone-edge: var(--c64-stone-light);
  --night-blue: var(--c64-screen-blue);
}

html, body { background: var(--c64-screen-black); }
body {
  color: var(--c64-stone-light);
  background-image: none;
}

.giana-site-shell {
  isolation: isolate;
  background: var(--c64-screen-black);
}

/* Wide-screen original masonry rails: newly drawn block geometry, C64 colors. */
.giana-site-shell::before,
.giana-site-shell::after {
  display: block;
  z-index: 0;
  top: 70px;
  width: min(9vw, 172px);
  opacity: 1;
  background-color: var(--c64-stone-dark);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 17px, var(--c64-screen-black) 17px 19px),
    repeating-linear-gradient(90deg, var(--c64-screen-dark, #505050) 0 25px, var(--c64-stone-light) 25px 27px, var(--c64-screen-dark, #505050) 27px 52px),
    repeating-linear-gradient(90deg, transparent 0 52px, var(--c64-screen-black) 52px 54px);
  box-shadow: inset 0 0 0 2px var(--c64-screen-black), inset -2px 0 var(--c64-stone-light), inset 2px 0 var(--c64-stone-light);
}
.giana-site-shell::after { transform: scaleX(-1); }
.giana-site-shell > * { z-index: 1; }

.archive-header { background: #000; border-bottom-color: var(--c64-screen-green); }
.archive-brand__mark {
  border-color: var(--c64-stone-light);
  background: var(--c64-stone-dark);
  color: var(--c64-screen-green);
  box-shadow: 3px 3px 0 var(--c64-screen-blue);
}
.archive-nav__item { color: var(--c64-stone-light); }
.archive-nav__item:hover, .archive-nav__item.is-active { color: var(--c64-screen-green); border-bottom-color: var(--c64-screen-green); }

.site-hero { background: #000; border-bottom-color: var(--c64-stone-dark); }
.site-hero__brick-field { opacity: 0; }
.site-hero::after {
  z-index: 0;
  height: 30px;
  opacity: 1;
  background-color: var(--c64-stone-dark);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 13px, var(--c64-screen-black) 13px 15px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--c64-stone-light) 39px 41px, transparent 41px 78px),
    repeating-linear-gradient(90deg, var(--c64-stone-dark) 0 37px, var(--c64-screen-blue) 37px 39px, var(--c64-stone-dark) 39px 78px);
}
.site-hero__inner { z-index: 1; }
.site-hero h1, .section-heading h2, .project-panel h2 { color: var(--c64-stone-light); text-shadow: 3px 3px 0 var(--c64-screen-blue); }
.eyebrow, .site-hero__readout span, .control-card__keys, .records-table th, .records-rank, .play-mode-label, .play-mode-help strong, .system-check { color: var(--c64-screen-green); }
.signal-dot { background: var(--c64-screen-green); box-shadow: none; }
.button--signal, .power-button { background: var(--c64-screen-green); border-color: var(--c64-stone-light); color: var(--c64-screen-black); box-shadow: 4px 4px 0 var(--c64-screen-blue); }
.button--signal:hover, .power-button:hover:not(:disabled) { background: var(--c64-screen-green); filter: brightness(1.13); }
.button--quiet, .play-mode-button { border-color: var(--c64-stone-light); background: #000; color: var(--c64-stone-light); }

.emulator-stage {
  position: relative;
  padding: 9px;
  border: 2px solid var(--c64-stone-light);
  outline: 2px solid var(--c64-stone-dark);
  background-color: var(--c64-stone-dark);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 16px, var(--c64-screen-black) 16px 18px),
    repeating-linear-gradient(90deg, transparent 0 32px, var(--c64-stone-light) 32px 34px, transparent 34px 64px),
    repeating-linear-gradient(90deg, var(--c64-stone-dark) 0 30px, var(--c64-screen-blue) 30px 32px, var(--c64-stone-dark) 32px 64px);
  box-shadow: 8px 8px 0 var(--c64-screen-blue);
}
.emulator-stage > * { position: relative; z-index: 1; background: #000; }
.emulator-stage__topline, .emulator-stage__foot { border-color: var(--c64-stone-dark); }
.emulator-stage__topline { color: var(--c64-screen-green); }
.emulator-header, .play-mode-toolbar, .keyboard-guide, .play-mode-message { background: #000; border-color: var(--c64-stone-dark); }
.play-mode-help { background: #000; border-color: var(--c64-stone-light); }
.play-mode-help kbd { background: #000; border-color: var(--c64-stone-light); color: var(--c64-screen-green); }

.archive-section { background: #000; border-bottom-color: var(--c64-stone-dark); }
.archive-section--records, .archive-section--archive { background: #080808; }
.archive-section--project { background: #000; }
.site-hero__readout, .archive-notes, .records-stats { background: var(--c64-stone-dark); border-color: var(--c64-stone-light); }
.site-hero__readout > div, .archive-note, .records-stats > div, .session-records, .control-card { background: #000; border-color: var(--c64-stone-dark); }
.records-tabs { background: var(--c64-stone-dark); border-bottom-color: var(--c64-stone-light); }
.records-tab:hover, .records-tab.is-active { background: #000; border-color: var(--c64-screen-green); color: var(--c64-screen-green); }
.records-table td { border-top-color: var(--c64-stone-dark); }

.archive-footer { background: #000; border-top-color: var(--c64-stone-light); }
.archive-footer__stamp, .archive-footer__links a:hover { color: var(--c64-screen-green); }
.preservation-page, .info-page { background: #000; }
.preservation-page__inner, .info-page__inner { background: #000; border-color: var(--c64-stone-light); box-shadow: 8px 8px 0 var(--c64-screen-blue); }
.preservation-page__header, .info-page__header { background: var(--c64-stone-dark); border-bottom-color: var(--c64-stone-light); }
.preservation-page h2, .info-page h2, .preservation-page a, .info-page a { color: var(--c64-screen-green); }

@media (max-width: 1440px) {
  .giana-site-shell::before,
  .giana-site-shell::after { display: none; }
}