/* =====================================================================
   MARRAS FIGHTER -alasivu
   Ladataan style.css:n päälle vain tällä sivulla. Sivuston tumma pohja
   säilyy, mutta osiot saavat kolikkopelin kehyksen: skanviivat, meripihkan
   värinen aksentti ja Press Start 2P pieninä arcade-teksteinä.
   ===================================================================== */

:root {
  --amber:     #ffb43c;
  --amber-dim: #c8902b;
  --amber-glow: rgba(255, 180, 60, 0.35);
}

/* Alasivulla ei ole jättilogoa heroissa, joten palkin logo näkyy heti. */
.page-game .brand { opacity: 1; }

/* ---------- Oma valikko ----------
   Tämän sivun valikko osoittaa sivun omiin osioihin, ei etusivun osioihin.
   Marras-logo palkissa ja alatunnisteessa on ainoa tie takaisin bändin
   etusivulle, joten molemmat ovat linkkejä. */

/* Kiinteä palkki peittäisi osion ylälaidan, kun valikosta hypätään siihen.
   Osioilla on iso yläpehmuste, mutta Kolikko sisään -osiolla ja ankkurilla
   mitattuna varaus tarvitaan silti. */
.page-game :target,
.page-game [id] { scroll-margin-top: 5.5rem; }

/* Alatunnisteen logo on nyt linkki. Flex poistaa rivin perusviivan alle
   jäävän raon, ja kirkastuminen kertoo että kohde on klikattava. */
.footer-brand { display: flex; }
.footer-brand img { transition: opacity 0.3s; }
.footer-brand:hover img, .footer-brand:focus-visible img { opacity: 1; }

/* Tämän sivun valikon sanat ovat pidempiä kuin etusivun (Kokoonpano,
   Näppäimet, Versiologi), joten rivi ylsi kiinni logoon juuri ennen kuin
   hampurilaisvalikko ottaa vallan 800 pikselissä. Väli ja harvennus ovat
   siksi koko työpöytäleveydellä tiukemmat kuin etusivulla. Yksi arvo koko
   alueelle, ei omaa katkaisupistettä: muuten teksti nytkähti kokoa isommaksi
   ikkunaa levennettäessä. */
@media (min-width: 801px) {
  .page-game .nav { gap: clamp(0.9rem, 2.1vw, 2.2rem); }
  .page-game .nav a { font-size: 0.74rem; letter-spacing: 0.12em; }
  .page-game .nav__play { padding-inline: 0.8rem; }
}

/* Pelaa on ainoa valikon kohta joka vie pois sivulta, joten se erottuu. */
.nav__play { color: var(--amber) !important; }
.nav__play::after { background: var(--amber) !important; }
@media (min-width: 801px) {
  .nav__play {
    border: 1px solid var(--amber-dim);
    padding: 0.4rem 0.9rem;
    margin-block: -0.4rem;
  }
  .nav__play::after { display: none; }
  .nav__play:hover { background: rgba(255, 180, 60, 0.12); }
}

/* Pieni arcade-teksti. Press Start 2P on leveä, joten vain lyhyisiin. */
.px {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.7;
}

/* Skanviivakalvo, jaettu heron ja kuvakaappausten kesken. */
.scan::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.26) 3px,
    rgba(0, 0, 0, 0.26) 4px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* ---------- Hero ---------- */
.gamehero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding-block: clamp(8rem, 18vh, 12rem) clamp(4rem, 9vh, 7rem);
  border-bottom: 1px solid var(--line);
}
.gamehero__bg {
  position: absolute; inset: 0; z-index: 0;
}
.gamehero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: blur(3px) saturate(0.7) brightness(0.42);
  transform: scale(1.08);
}
.gamehero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 65% 55% at 50% 45%, rgba(168, 38, 30, 0.22), transparent 70%),
    linear-gradient(to bottom, rgba(7,8,10,0.86) 0%, rgba(7,8,10,0.62) 45%, var(--ink) 100%);
}
.gamehero .container { position: relative; z-index: 2; }

/* Kaksi palstaa: teksti vasemmalle, pelikuva oikealle. */
.gamehero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Pelikuva kolikkopelin kuvaputkena. */
.gamehero__screen {
  position: relative;
  margin: 0;
  border: 1px solid var(--line-strong);
  background: #05060a;
  overflow: hidden;
  box-shadow: 0 30px 80px -26px rgba(0, 0, 0, 0.95),
              0 0 70px -24px var(--amber-glow);
}
.gamehero__screen video,
.gamehero__screen img { display: block; width: 100%; height: auto; }
/* Skanviivat myös ruudun päälle, mutta kevyempinä kuin heron yleiskalvo. */
.gamehero__screen::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px);
}

@media (max-width: 900px) {
  .gamehero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.gamehero__logo {
  width: min(86%, 540px);
  height: auto;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.85));
}
.gamehero__lead {
  margin-top: 1.75rem;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  /* Mitta em-yksikköinä, ei ch:na: Cormorant Garamondin kursiivissa ch on
     poikkeuksellisen kapea, joten 20ch kutistui 339 pikseliin ja katkaisi
     kahden lauseen virkkeen kolmelle riville. 14em antaa kaksi riviä
     työpöydällä ja tabletilla, eikä kavenna puhelimella palstaa lainkaan. */
  max-width: 14em;
  text-wrap: balance;
}
/* Kumpikin virke omalle rivilleen. Pelkkä leveysrajaus jätti rivijaon
   tasapainotukselle, joka katkaisi virkkeen keskeltä ("Bändi / tappelee").
   Näin jako pitää joka leveydellä, ja virke rivittyy sisäisesti vain jos
   se ei mahdu. */
.gamehero__lead span { display: block; }
.gamehero__facts {
  margin-top: 1.5rem;
  font-size: 0.6rem;
  color: var(--amber);
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}
.gamehero__facts span { white-space: nowrap; }
/* Erotin kuuluu edeltävän kohdan perään, ei seuraavan eteen. Rivi katkeaa
   kahdelle riville kapeassa palstassa, ja ::before jättäisi pisteen
   roikkumaan uuden rivin alkuun. */
.gamehero__facts span:not(:last-child)::after {
  content: "·";
  color: var(--fog);
  margin-left: 1.1rem;
}
.gamehero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }

/* Kapealla ruudulla rivi katkeaa, jolloin erotinpiste jäisi rivin alkuun. */
@media (max-width: 620px) {
  .gamehero__facts { gap: 0.35rem 0.9rem; }
  .gamehero__facts span:not(:last-child)::after { content: none; }
}

/* Meripihkainen pelinappi erotuksena sivuston punaisesta. */
.btn--arcade { border-color: var(--amber); color: var(--bone); }
.btn--arcade::before { background: var(--amber); }
.btn--arcade:hover, .btn--arcade:focus-visible { color: #140d02; border-color: var(--amber); }
.btn--arcade:hover { box-shadow: 0 8px 32px -8px var(--amber-glow); }

/* ---------- Kuvakaappaus kolikkopelin kehyksessä ---------- */
.shot {
  position: relative;
  border: 1px solid var(--line-strong);
  background: #05060a;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.95);
}
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
  position: relative; z-index: 2;
  background: var(--ink-2);
}
.shot.scan::after { bottom: 2.9rem; }

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Idea ---------- */
.idea { background: var(--ink); }
.idea__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.idea__pull {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  text-wrap: balance;
  position: sticky; top: 7rem;
}
.idea__pull em { color: var(--amber); font-style: italic; }
.idea__text { color: var(--bone-dim); }
.idea__text p + p { margin-top: 1.25rem; }
.idea__text strong { color: var(--bone); font-weight: 600; }

@media (max-width: 900px) {
  .idea__grid { grid-template-columns: 1fr; }
  .idea__pull { position: static; }
}

/* ---------- Hahmot ---------- */
.roster-sec { background: var(--ink-2); }
/* Hahmoja on viisi, pariton määrä, joten auto-fit jätti osalla leveyksistä
   yhden kortin yksin riville. Sarakemäärä on siksi kiinteä: viisi yhdellä
   rivillä kuten pelin hahmovalinnassa, sitten 3+2 ja lopuksi 2+2+1, jossa
   viimeinen kortti levittyy koko riville ettei kulmaan jää tyhjää ruutua. */
.roster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 1000px) {
  .roster { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .roster { grid-template-columns: repeat(2, 1fr); }
  .fighter:last-child { grid-column: 1 / -1; }
}
.fighter {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.4rem 1.3rem 1.3rem;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(232,228,220,0.035), transparent 60%), var(--ink-3);
  transition: border-color 0.35s var(--ease-out), transform 0.5s var(--ease-out);
}
.fighter:hover { border-color: var(--amber-dim); transform: translateY(-4px); }

/* Muotokuva on sama sprite jota peli piirtää: idle-animaation ensimmäinen
   ruutu 64x82 pikseliä, suurennettuna nelinkertaiseksi. Kaikki on rajattu
   samasta kohdasta solua, joten hahmot seisovat samalla maatasolla. */
.fighter__portrait {
  position: relative;
  margin: -1.4rem -1.3rem 1.2rem;
  padding: 1.6rem 0 0;
  display: flex; justify-content: center; align-items: flex-end;
  background:
    radial-gradient(ellipse 58% 38% at 50% 100%, rgba(255, 180, 60, 0.15), transparent 72%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent 55%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.fighter__portrait img {
  width: 128px; height: auto;
  /* Nearest-neighbour: selain ei saa pehmentää pikseleitä skaalatessaan. */
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
  transition: transform 0.45s var(--ease-out);
}
/* Vain siirto, ei skaalausta: murto-osakerroin rikkoisi pikseliruudukon. */
.fighter:hover .fighter__portrait img { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .fighter__portrait img { transition: none; }
  .fighter:hover .fighter__portrait img { transform: none; }
}
.fighter__no {
  position: absolute;
  top: 0.85rem; right: 1.1rem;
  z-index: 2;
  font-size: 0.55rem;
  color: var(--fog);
}
.fighter__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 0.92;
}
.fighter__role {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-top: 0.45rem;
}
.fighter__arch {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.5rem;
  color: var(--amber);
  border: 1px solid rgba(255, 180, 60, 0.35);
  padding: 0.45rem 0.6rem;
  align-self: flex-start;
}
.fighter__blurb {
  margin-top: 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--bone-dim);
  flex: 1;
}
.fighter__moves {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.fighter__moves span {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  background: rgba(232, 228, 220, 0.05);
  padding: 0.35rem 0.55rem;
}
.fighter__moves span:first-child { color: var(--bone); }
/* Komentoheitto on kolmas liike ja tehdään eri tavalla kuin kaksi muuta
   (neljäsosaympyrä taaksepäin), joten se erottuu meripihkan värisenä. */
.fighter__moves--throw {
  color: var(--amber) !important;
  background: rgba(255, 180, 60, 0.09) !important;
}

/* ---------- Suunnitteluratkaisut ---------- */
.decisions { background: var(--ink); }
.deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  /* Säiliön tausta on sama kuin korttien. Erotinviivat piirtää jokainen
     kortti itse box-shadowilla, joka täyttää yhden pikselin raon.
     Jos viivat tulisivat säiliön taustasta, vajaan viimeisen rivin tyhjä
     solu näkyisi vaaleana laatikkona — korttien määrä kun ei ole aina
     jaollinen sarakemäärällä. */
  background: var(--ink);
  border: 1px solid var(--line);
}
.dec {
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: background 0.4s var(--ease-out);
}
.dec:hover { background: var(--ink-2); }
.dec__no {
  font-size: 0.55rem;
  color: var(--amber);
}
.dec__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1;
  margin: 0.75rem 0 0.85rem;
}
.dec p { color: var(--bone-dim); font-size: 0.95rem; line-height: 1.6; }
.dec p + p { margin-top: 0.7rem; }
.dec code {
  font-family: "Courier New", monospace;
  font-size: 0.88em;
  color: var(--amber);
  background: rgba(255, 180, 60, 0.08);
  padding: 0.1em 0.35em;
}

/* ---------- Ohjaus ---------- */
.controls { background: var(--ink-2); }
.controls__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.ctrl h3 {
  font-size: 0.55rem;
  color: var(--amber);
  margin-bottom: 1.25rem;
}
.ctrl dl { margin: 0; }
.ctrl div {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.ctrl dt { flex: 0 0 7.5rem; }
.ctrl dd { margin: 0; color: var(--bone-dim); font-size: 0.92rem; }
kbd {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bone);
  background: var(--ink-3);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  padding: 0.2rem 0.45rem;
  min-width: 1.75rem;
  text-align: center;
}
.ctrl__note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--fog);
  max-width: 40ch;
}

/* ---------- Pelaa ---------- */
.play {
  position: relative;
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9rem);
  background:
    radial-gradient(ellipse 55% 60% at 50% 50%, rgba(255, 180, 60, 0.10), transparent 70%),
    var(--ink);
  border-top: 1px solid var(--line);
}
.play h2 {
  font-size: clamp(3rem, 10vw, 7.5rem);
  line-height: 0.9;
}
.play p { color: var(--bone-dim); margin: 1.5rem auto 0; max-width: 46ch; }
.play .btn { margin-top: 2.5rem; font-size: 1.4rem; padding: 1.2rem 2.4rem; }
.play__free {
  display: block;
  margin-top: 1.75rem;
  font-size: 0.55rem;
  color: var(--fog);
}

/* ---------- Kaksintaistelu napin yllä ----------
   AJ ja Tuomo odottavat vastakkain pelin omalla lepoanimaatiolla. Kuvat ovat
   8 ruudun nauhoja samoista sprite-arkeista kuin Kokoonpano-osion muotokuvat,
   rajattuna kaikille ruuduille yhteisestä kohdasta solun alareunasta, joten
   hahmot seisovat samalla maatasolla eivätkä tärise animaation aikana.

   Nauhaa ei animoida JavaScriptillä vaan siirtämällä taustakuvaa steps(8):lla.
   Yksi ruutu on 128 px leveä eli tasan kaksinkertainen lähteeseen nähden, niin
   pikseliruudukko pysyy ehjänä joka näytöllä. Kesto 1,0667 s on pelin oma:
   se vaihtaa lepoanimaation ruutua joka kahdeksas tikki 60 hertsin tahdissa. */
.duel {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.75rem, 7vw, 4.5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.duel__fighter {
  display: block;
  width: 128px; height: 168px;
  background-repeat: no-repeat;
  background-size: 1024px 168px;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.55));
  animation: duel-idle 1.0667s steps(8) infinite;
}
.duel__fighter--aj { background-image: url("../assets/img/fighter-idle-aj.webp"); }
/* Spritet katsovat oikealle, joten oikeanpuoleinen käännetään peilikuvaksi. */
.duel__fighter--tuomo {
  background-image: url("../assets/img/fighter-idle-tuomo.webp");
  transform: scaleX(-1);
}
@keyframes duel-idle {
  from { background-position: 0 0; }
  to   { background-position: -1024px 0; }
}

/* Nappi tulee heti hahmojen alle, joten sen oma yläväli on tässä pienempi. */
.play .duel + .btn { margin-top: clamp(1.25rem, 3vw, 2rem); }

@media (prefers-reduced-motion: reduce) {
  .duel__fighter { animation: none; }
}

/* ---------- Versiologi ---------- */
.changelog { background: var(--ink-2); }
.changelog__lead {
  color: var(--bone-dim);
  max-width: 54ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.changelog__lead strong { color: var(--bone); font-weight: 600; }

.log { list-style: none; margin: 0; padding: 0; }
/* Lista on pitkä (lähes 60 merkintää) ja väliotsikot on jätetty pois kaikista
   paitsi uusimmasta ja vanhimmasta, joten teksti on muuta sivua pienempää ja
   rivivälit tiukemmat. Versionumero ja aikajanan nuppi erottavat merkinnät. */
.log__item {
  position: relative;
  padding: 0 0 1.5rem 1.75rem;
  /* Aikajanan viiva on rakenteellinen, ei koriste, joten se on hieman
     vahvempi kuin sivuston muut erotinviivat. */
  border-left: 1px solid var(--line-strong);
  max-width: 62ch;
}
/* Aikajanan nuppi. Viimeiseltä riviltä viiva katkaistaan, jottei se jää
   roikkumaan viimeisen merkinnän alapuolelle. */
.log__item::before {
  content: "";
  position: absolute;
  left: -4px; top: 0.4rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--ink-2), 0 0 12px var(--amber-glow);
}
.log__item:last-child { border-left-color: transparent; padding-bottom: 0; }

.log__ver {
  display: block;
  font-size: 0.55rem;
  color: var(--amber);
  margin-bottom: 0.4rem;
}
.log__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.log__item p { color: var(--bone-dim); font-size: 0.95rem; line-height: 1.6; }

/* Muutosrivit muutoslokin tapaan: tyyppimerkintä omassa sarakkeessaan,
   teksti sen vieressä. Lisätty = meripihka, Muutettu = neutraali,
   Korjattu = sama punainen kuin sivuston muu aksentti. */
.log__changes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.log__changes > li {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 0 0.9rem;
  align-items: baseline;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--bone-dim);
}
.log__tag {
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.log__tag--add { color: var(--amber); }
.log__tag--chg { color: var(--fog); }
.log__tag--fix { color: var(--ember-text); }

@media (max-width: 600px) {
  /* Kapealla ruudulla tyyppimerkintä omalle rivilleen, jottei tekstipalsta
     kutistu lukukelvottoman kapeaksi. */
  .log__changes > li { grid-template-columns: 1fr; gap: 0.1rem; }
}
.log__item em { color: var(--bone); font-style: italic; }

/* ---------- Paluulinkki ---------- */
.backlink {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
  transition: color 0.3s, gap 0.3s;
}
.backlink:hover { color: var(--bone); gap: 0.9rem; }
.backlink svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .gamehero__bg img { transform: none; }
}