/* ============================================================
   SUBMONY, „Gold × FireRed” · świat
   Niebo z chmurami (hero i nagłówki podstron) jak ekran tytułowy
   Pokémon Gold, pory dnia, podłoga z chmur nad turkusowym płótnem,
   ziemia z trawą w stopce. Grafiki i ich rozmiary: sprites.css.

   Ruch: płynny i spokojny (tylko transform/opacity, liniowy dryf chmur,
   łagodne pulsowanie). Przy ograniczonym ruchu wszystko stoi.
   ============================================================ */

/* logo.svg (sam napis SUBMONY) ma siatkę 43×11, skala zawsze całkowita, żeby piksele były równe */
:root { --logo-grid-w: 43; --logo-scale: 4; }
@media (min-width: 380px)  { :root { --logo-scale: 6; } }
@media (min-width: 768px)  { :root { --logo-scale: 8; } }
@media (min-width: 1200px) { :root { --logo-scale: 10; } }

/* ── Niebo ───────────────────────────────────────────────── */
.sky {
  --floor-h: var(--spr-floor-front-h);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background-color: var(--sky-1);
  background-image:
    linear-gradient(to top, var(--sky-6) calc((var(--floor-h) - 8) * var(--px)), transparent 0),
    var(--img-sky);
  background-repeat: no-repeat, repeat-x;
  background-position: 0 0, left 0 bottom calc((var(--floor-h) - 8) * var(--px));
  background-size: 100% 100%, calc(var(--spr-sky-w) * var(--px)) calc(var(--spr-sky-h) * var(--px));
  image-rendering: pixelated;
}
.sky-layer {
  position: absolute;
  left: 0;
  pointer-events: none;
  image-rendering: pixelated;
}

/* gwiazdy, tylko w nocy; dwie warstwy migają na zmianę */
.sky-stars {
  display: none;
  inset: 0 0 35% 0;
  background: var(--img-stars-a) 0 0 / calc(var(--spr-stars-a-w) * var(--px)) calc(var(--spr-stars-a-h) * var(--px)) repeat;
}
.sky-stars::before, .sky-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--img-stars-b) 0 0 / calc(var(--spr-stars-b-w) * var(--px)) calc(var(--spr-stars-b-h) * var(--px)) repeat;
  animation: soft-twinkle 3.4s var(--ease-soft) infinite;
}
.sky-stars::after {
  background-position: calc(61 * var(--px)) calc(37 * var(--px));
  animation-delay: -1.7s;
}
@keyframes soft-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
html[data-time="night"] .sky-stars { display: block; }

/* słońce / księżyc */
.sky-orb {
  top: calc(var(--nav-h) + 8 * var(--px));
  left: auto;
  right: 9%;
  width: calc(var(--spr-orb-w) * var(--px));
  height: calc(var(--spr-orb-h) * var(--px));
  background: var(--img-orb) 0 0 / 100% 100% no-repeat;
}
html[data-time="morning"] .sky-orb {
  top: auto;
  right: auto;
  left: 7%;
  bottom: calc((var(--floor-h) + 10) * var(--px));
}

/* spadająca gwiazda (noc, co kilkanaście sekund) */
.shooting-star {
  display: none;
  top: calc(var(--nav-h) + 4 * var(--px));
  left: 62%;
  width: calc(var(--spr-shooting-star-w) * var(--px));
  height: calc(var(--spr-shooting-star-h) * var(--px));
  background: var(--img-shooting-star) 0 0 / 100% 100% no-repeat;
  opacity: 0;
}
html[data-time="night"] .shooting-star {
  display: block;
  animation: px-shoot 12s linear infinite;
  animation-delay: 3s;
}
@keyframes px-shoot {
  0%, 86% { opacity: 0; transform: translate(0, 0); }
  88%     { opacity: 1; }
  96%     { opacity: 1; }
  100%    { opacity: 0; transform: translate(calc(-72 * var(--px)), calc(28 * var(--px))); }
}

/* warstwy chmur: kafel w poziomie, przesuwany o całą szerokość kafla w pętli */
.clouds, .cloud-floor {
  width: calc(100% + var(--tile) * var(--px));
  height: calc(var(--th) * var(--px));
  background: var(--img) repeat-x 0 0 / calc(var(--tile) * var(--px)) 100%;
  animation: px-drift calc(var(--tile) * var(--tick)) linear infinite;
  will-change: transform;
}
@keyframes px-drift {
  to { transform: translate3d(calc(var(--tile) * var(--px) * -1), 0, 0); }
}
.clouds-far  { --img: var(--img-clouds-far);  --tile: var(--spr-clouds-far-w);  --th: var(--spr-clouds-far-h);  --tick: 620ms; top: 22%; }
.clouds-mid  { --img: var(--img-clouds-mid);  --tile: var(--spr-clouds-mid-w);  --th: var(--spr-clouds-mid-h);  --tick: 400ms; top: 40%; animation-delay: -97s; }
.clouds-near { --img: var(--img-clouds-near); --tile: var(--spr-clouds-near-w); --th: var(--spr-clouds-near-h); --tick: 250ms; top: 56%; animation-delay: -43s; }

/* podłoga z chmur (jak na ekranie tytułowym Gold), nachodzi na turkus niżej */
.cloud-floor { z-index: 2; }
.cloud-floor.back {
  --img: var(--img-floor-back);
  --tile: var(--spr-floor-back-w);
  --th: var(--spr-floor-back-h);
  --tick: 480ms;
  bottom: calc((var(--spr-floor-front-h) - 16) * var(--px));
}
.cloud-floor.front {
  --img: var(--img-floor-front);
  --tile: var(--spr-floor-front-w);
  --th: var(--spr-floor-front-h);
  --tick: 300ms;
  bottom: 0;
  animation-delay: -21s;
}

/* iskry wokół logo, 3 klatki na jednym pasku */
.sparkle {
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  background: var(--img-sparkle) calc(-7 * var(--px)) 0 / calc(var(--spr-sparkle-w) * var(--px)) 100% no-repeat;
  animation: soft-sparkle 2.6s var(--ease-soft) infinite;
}
@keyframes soft-sparkle {
  0%, 100% { opacity: .35; transform: scale(.55) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1) rotate(45deg); }
}

/* na telefonach mniej warstw, spokojniej i lżej */
@media (max-width: 767px) {
  .clouds-mid, .sparkle.is-extra { display: none; }
}
.sky.is-paused .clouds, .sky.is-paused .cloud-floor, .sky.is-paused .sparkle,
.sky.is-paused .sky-stars::before, .sky.is-paused .sky-stars::after { animation-play-state: paused; }

/* ── Hero: ekran tytułowy ────────────────────────────────────
   Dwie kolumny: po lewej logo i okno z opisem, po prawej granatowy
   „ekran” ze zdjęciami z serwera. Na węższych ekranach jedno pod drugim. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 10 * var(--px)) var(--gutter) calc((var(--floor-h) + 6) * var(--px));
}
.hero-grid {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: calc(8 * var(--px));
  align-items: center;
  image-rendering: auto;
}
@media (min-width: 1024px) {
  .hero { --logo-scale: 6; padding-top: calc(var(--nav-h) + 26 * var(--px)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: calc(12 * var(--px)); }
}
@media (min-width: 1280px) { .hero { --logo-scale: 8; } }
/* duże monitory: szerszy układ i większe logo, żeby hero nie ginęło na niebie */
@media (min-width: 1600px) {
  .hero { --logo-scale: 10; }
  .hero-grid { max-width: 1400px; }
  .hero-dialog { max-width: 620px; }
}

.hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(5 * var(--px));
}
/* znaczek SUBMONY (pikselowy Darkrai z pokéballem) obok napisu, w skali 1× albo 2×, bez rozmycia */
.lockup { position: relative; display: inline-flex; align-items: center; gap: calc(4 * var(--px)); max-width: 100%; }
.lockup-emblem {
  flex: none;
  width: 62px;
  height: 74px;
  image-rendering: pixelated;
  filter: drop-shadow(0 calc(2 * var(--px)) 0 rgba(8, 16, 48, .28));
}
@media (min-width: 600px) { .lockup-emblem { width: 124px; height: 148px; } }
.lockup-logo {
  width: calc(var(--logo-grid-w) * 1px * var(--logo-scale));
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 calc(2 * var(--px)) 0 rgba(8, 16, 48, .28));
}
.lockup .sparkle { position: absolute; }
.lockup .sparkle:nth-of-type(1) { left: -4%; top: -16%; }
.lockup .sparkle:nth-of-type(2) { left: auto; right: -6%; bottom: 2%; animation-delay: -1.3s; }

/* jedno okno: status, hasło, opis, przyciski */
.hero-dialog { width: 100%; max-width: 560px; padding: calc(4 * var(--px)) calc(6 * var(--px)) calc(5 * var(--px)); }
@media (max-width: 1023px) { .hero-dialog { max-width: none; } }
@media (max-width: 599px) { .hero-dialog { padding: calc(4 * var(--px)) calc(4 * var(--px)) calc(5 * var(--px)); } }
.hero-status {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: var(--fs-caps-sm);
  letter-spacing: var(--ls-caps);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ok-text);
}
.hero-badge-dot {
  flex: none;
  width: calc(2 * var(--px));
  height: calc(2 * var(--px));
  background: #38B858;
  box-shadow: 0 0 0 1px #1E6A34;
  animation: soft-pulse 2.2s var(--ease-soft) infinite;
}
.hero-title {
  margin-top: calc(2 * var(--px));
  font-weight: 900;
  font-size: clamp(25px, 1.6vw + 16px, 34px);
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.hero-sub {
  margin-top: calc(2 * var(--px));
  font-size: calc(var(--fs-body) + 1px);
  line-height: 1.55;
  color: var(--ink-muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(3 * var(--px));
  margin-top: calc(5 * var(--px));
}
/* przyciski w oknie: mieszczą się w jednym rzędzie obok siebie */
.hero-actions .btn-lg { padding: calc(2 * var(--px) + 2px) calc(5 * var(--px)); }
@media (max-width: 599px) { .hero-actions { flex-direction: column; align-items: stretch; } }

/* granatowy ekran ze zdjęciami z serwera (zmieniają się płynnie, klik = podgląd) */
.showcase {
  --b: 4;
  position: relative;
  min-width: 0;
  margin: 0;
  border-style: solid;
  border-width: calc(4 * var(--px));
  border-color: var(--nav-edge);
  border-image: var(--frame-screen) 4 fill / calc(4 * var(--px)) stretch;
  background: var(--nav);
  background-clip: padding-box;
  padding: var(--px);
  filter: drop-shadow(0 calc(2 * var(--px)) 0 rgba(8, 16, 48, .3));
}
.showcase-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--nav-edge);
}
.showcase-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
}
.showcase-img.is-active { opacity: 1; }
/* html.reduce-motion ustawia skrypt w <head> (system albo przełącznik w stopce);
   bez JS ruch gasi reguła z base.css */
html:not(.reduce-motion) .showcase-img.is-active { animation: showcase-zoom 9s var(--ease-soft) both; }
@keyframes showcase-zoom { from { transform: scale(1.001); } to { transform: scale(1.06); } }
.showcase-open { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; cursor: zoom-in; }
.showcase-open:focus-visible { outline: var(--px) solid var(--sel-edge); outline-offset: calc(-2 * var(--px)); }
.showcase-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(3 * var(--px));
  padding: calc(1 * var(--px)) var(--px) 0 calc(2 * var(--px));
  color: #FFFFFF;
}
.showcase-cap {
  min-width: 0;
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: var(--fs-caps-sm);
  letter-spacing: var(--ls-caps);
  line-height: 1.4;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.showcase-dots { flex: none; display: flex; }
.showcase-dot { position: relative; width: 26px; height: 26px; }
.showcase-dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background: var(--nav-hi);
  box-shadow: 0 0 0 1px var(--nav-edge);
  transition: background-color .4s var(--ease-soft);
}
.showcase-dot[aria-pressed="true"]::before { background: var(--plaque-text); }
@media (hover: hover) { .showcase-dot:hover::before { background: #8FB0F0; } }
.showcase-dot:focus-visible { outline: 2px solid var(--sel-edge); outline-offset: -2px; }

/* „▼ Przewiń” na dole nieba (tylko przy dwóch kolumnach) */
.scroll-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc((var(--floor-h) + 2) * var(--px));
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1 * var(--px));
  color: #FFFFFF;
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: 14px;
  letter-spacing: var(--ls-caps);
  line-height: 1.6;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: var(--fp) var(--fp) 0 rgba(8, 16, 48, .55);
}
.scroll-hint::after {
  content: '';
  width: calc(var(--spr-cursor-down-w) * var(--px));
  height: calc(var(--spr-cursor-down-h) * var(--px));
  background: var(--spr-cursor-down) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: soft-sink 1.8s var(--ease-soft) infinite;
}
/* tylko tam, gdzie pod oknem zostaje miejsce na niebie */
@media (max-width: 1023px), (max-height: 859px) { .scroll-hint { display: none; } }

/* słońce i księżyc między kolumnami, żeby nie chowały się za ekranem */
@media (min-width: 1024px) {
  .hero .sky-orb { right: auto; left: 40%; top: calc(var(--nav-h) + 1 * var(--px)); }
  html[data-time="morning"] .hero .sky-orb { left: 44%; top: auto; bottom: calc((var(--floor-h) + 4) * var(--px)); }
}

/* zegar z porą dnia (prawy górny róg hero) */
.clock-badge {
  position: relative;
  z-index: 4;
  align-self: flex-end;
  margin-bottom: calc(3 * var(--px));
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--px));
  padding: var(--px) calc(3 * var(--px));
  background: var(--paper);
  border: var(--px) solid var(--frame);
  box-shadow: 0 var(--px) 0 rgba(8, 16, 48, .3);
  color: var(--ink);
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: var(--fs-caps-sm);
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.clock-badge .clock-tag {
  padding: 0 var(--px);
  background: var(--plaque);
  color: var(--plaque-text);
}
.clock-badge .clock-tag:empty { display: none; }
/* na szerokich ekranach zegar siedzi w prawym górnym rogu nieba */
@media (min-width: 1080px) {
  .clock-badge { position: absolute; top: calc(var(--nav-h) + 4 * var(--px)); right: var(--gutter); margin: 0; }
}

/* ── Nagłówek podstron: niski pas nieba z tabliczką ──────── */
.sky-page {
  min-height: clamp(300px, 46svh, 480px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: calc(var(--nav-h) + 12 * var(--px)) var(--gutter) calc((var(--floor-h) - 6) * var(--px));
}
.sky-page .clouds-near { top: 48%; }
.sky-page .clouds-mid  { top: 30%; }
.page-head {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 860px;
  text-align: center;
  image-rendering: auto;
}
.page-head .label { margin-bottom: calc(3 * var(--px)); }
.page-head .h1 + p, .page-head h1 + p { margin-top: calc(3 * var(--px)); }

/* ── Turkusowe płótno: nagłówki sekcji w oknach ──────────── */
.section-head {
  max-width: 820px;
  margin: 0 auto calc(8 * var(--px));
  text-align: center;
}
.section-head .label { margin-bottom: calc(3 * var(--px)); }
.section-head .win, .section-head.win { padding: calc(4 * var(--px)) calc(6 * var(--px)); }
.section-head p { margin-top: calc(3 * var(--px)); }

/* separatory: rząd mini-pokéballi */
.wood-band, .divider {
  height: calc(var(--spr-ball-mini-h) * var(--px));
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--spr-ball-mini) center / calc(var(--spr-ball-mini-w) * var(--px)) 100% space no-repeat;
  background-repeat: space no-repeat;
  opacity: .9;
  image-rendering: pixelated;
  width: min(100% - 2 * var(--gutter), 520px);
}

/* ── Stopka: ziemia z trawą ──────────────────────────────── */
.site-footer.ground {
  position: relative;
  margin-top: calc(14 * var(--px));
  padding-top: calc(6 * var(--px));
  background: var(--img-soil) 0 0 / calc(var(--spr-soil-w) * var(--px)) calc(var(--spr-soil-h) * var(--px)) repeat;
  image-rendering: pixelated;
  color: #F8F0E0;
  text-shadow: var(--ts) var(--ts) 0 rgba(20, 10, 4, .75);
}
.site-footer.ground::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-5 * var(--px));
  height: calc(var(--spr-grass-edge-h) * var(--px));
  background: var(--img-grass-edge) 0 0 / calc(var(--spr-grass-edge-w) * var(--px)) 100% repeat-x;
}
.site-footer.ground > * { position: relative; image-rendering: auto; }
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(10 * var(--px)) var(--gutter) calc(6 * var(--px));
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--px));
  justify-content: space-between;
  align-items: flex-start;
}
.footer-brand { max-width: 360px; }
.footer-lockup { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); text-decoration: none; }
.footer-lockup .f-emblem { flex: none; width: 62px; height: 74px; image-rendering: pixelated; filter: drop-shadow(0 var(--px) 0 rgba(20, 10, 4, .6)); }
.footer-lockup .f-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--px)); }
.footer-lockup .f-logo { width: calc(var(--logo-grid-w) * 1px * 4); max-width: 100%; height: auto; }
.footer-lockup .f-partner { display: flex; align-items: center; gap: calc(2 * var(--px)); }
.footer-lockup .f-x { width: calc(var(--spr-x-w) * 2px); height: auto; image-rendering: pixelated; }
.footer-lockup .f-ice { width: 150px; height: auto; }
.footer-tag { margin-top: calc(3 * var(--px)); font-size: var(--fs-small); line-height: 1.6; color: #F0E4D0; }
.footer-cols { display: flex; flex-wrap: wrap; gap: calc(12 * var(--px)); }
.footer-col .footer-h {
  margin-bottom: calc(3 * var(--px));
  line-height: 1.3;
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: var(--fs-caps-sm);
  letter-spacing: .08em;
  color: var(--plaque-text);
  text-transform: uppercase;
}
.footer-col a {
  display: block;
  padding: calc(1 * var(--px)) 0;
  font-size: var(--fs-small);
  color: #F8F0E0;
  text-decoration: none;
}
@media (hover: hover) { .footer-col a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; } }

.footer-copy {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(4 * var(--px)) var(--gutter) calc(8 * var(--px));
  border-top: var(--px) solid rgba(20, 10, 4, .35);
  display: flex;
  flex-wrap: wrap;
  gap: calc(3 * var(--px)) calc(6 * var(--px));
  align-items: center;
  justify-content: space-between;
}
/* linia jak „© 2000 GAME FREAK inc.” na ekranie tytułowym */
.footer-credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .9em;
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 2;
  text-transform: uppercase;
  color: #FFFFFF;
}
.footer-credit > span { white-space: nowrap; }
.footer-credit a { color: inherit; text-decoration: none; }
@media (hover: hover) { .footer-credit a:hover { color: var(--plaque-text); } }
@media (min-width: 1200px) { .footer-credit { font-size: 15px; } }

.motion-toggle {
  font-family: var(--f-caps);
  font-weight: var(--fw-caps);
  font-size: var(--fs-caps-sm);
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #F8F0E0;
  padding: var(--px) calc(2 * var(--px));
  border: var(--px) solid rgba(248, 240, 224, .5);
}
@media (hover: hover) { .motion-toggle:hover { border-color: #FFFFFF; color: #FFFFFF; } }