/* Kolmiopäät – lyijykynää, paperia ja paljon kolmioita */
:root {
  --paperi: #fbfaf5;
  --kyna: #3d3d3d;
  --vaalea: #8a8a8a;
  --haalea: #e6e3d8;
  --ylos: #2f7d4f;
  --alas: #b2442f;
  --kasiala: "Ink Free", "Segoe Print", "Bradley Hand", "Comic Neue", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--kyna);
  font-family: var(--kasiala);
  background-color: var(--paperi);
  /* kolmiokuvio: ylös ja alas vuorotellen */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='70'%3E%3Cg fill='none' stroke='%23d9d5c8' stroke-width='1.2'%3E%3Cpath d='M20 8 L32 30 L8 30 Z'/%3E%3Cpath d='M48 40 L72 40 L60 62 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- yläosa ---------- */
.yla {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.5rem, 3vw, 3rem);
  padding: 2rem 1rem 0;
}

.logo { text-align: center; padding-bottom: 1.5rem; }

h1 {
  margin: 0;
  font-weight: normal;
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  letter-spacing: .3em;
  text-transform: uppercase;
}

.kolmio-ylos { color: var(--ylos); }
.kolmio-alas { color: var(--alas); }

.iskulause { margin: .4rem 0 0; color: var(--vaalea); font-size: 1.15rem; letter-spacing: .08em; }

.hahmo { width: clamp(60px, 11vw, 120px); height: auto; overflow: visible; }
.hahmo .vartalo { transform-origin: 60px 194px; }
.hahmo line, .hahmo .suu {
  stroke: var(--kyna); stroke-width: 3; stroke-linecap: round; fill: none;
}
.hahmo .paa { fill: var(--paperi); stroke: var(--kyna); stroke-width: 3; stroke-linejoin: round; }
.hahmo .silma { fill: var(--kyna); }
.hahmo .kasi { transform-origin: 60px 108px; transition: transform .25s; }

.hahmo.ylos .vartalo { animation: keinu 4s ease-in-out infinite; }
.hahmo.alas .vartalo { animation: keinu 4s ease-in-out infinite reverse; }

.hahmo.ylos.iloitsee .vartalo { animation: hyppy .5s ease-out 2; }
.hahmo.ylos.iloitsee .kasi.vasen { transform: rotate(110deg); }
.hahmo.ylos.iloitsee .kasi.oikea { transform: rotate(-110deg); }
.hahmo.alas.kohauttaa .vartalo { animation: tarina .15s linear 4; }
.hahmo.alas.kohauttaa .kasi.vasen { transform: rotate(70deg); }
.hahmo.alas.kohauttaa .kasi.oikea { transform: rotate(-70deg); }

@keyframes keinu { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes hyppy { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-28px); } }
@keyframes tarina { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* ---------- valikko ---------- */
.valikko {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 0 auto 1rem;
  padding: 1rem;
  border-top: 2px solid var(--kyna);
  max-width: 900px;
}

.valikko button {
  font: inherit;
  font-size: 1.05rem;
  color: var(--kyna);
  background: var(--paperi);
  border: 2px solid var(--kyna);
  border-radius: 12px 4px 14px 5px;
  padding: .35rem .9rem;
  cursor: pointer;
  transition: transform .15s;
}
.valikko button:hover { transform: rotate(-2deg) scale(1.04); }
.valikko button.valittu { background: var(--kyna); color: var(--paperi); }

.ilmoitus {
  max-width: 700px;
  margin: 0 auto 1rem;
  padding: .5rem 1rem;
  text-align: center;
  border: 2px dashed var(--vaalea);
  border-radius: 8px;
  background: var(--paperi);
}

/* ---------- stripit ---------- */
main {
  display: grid;
  gap: 3.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}

.lataa { text-align: center; font-size: 1.3rem; }
.pyorii { display: inline-block; animation: pyori 1s linear infinite; }
@keyframes pyori { to { transform: rotate(360deg); } }

.strippi {
  position: relative;
  background: #fff;
  border: 2px solid var(--kyna);
  border-radius: 16px 6px 18px 8px;
  padding: 1rem 1.2rem 1.2rem;
  box-shadow: 6px 7px 0 var(--haalea);
  transform: rotate(-.5deg);
  scroll-margin-top: 1rem;
}
.strippi:nth-child(even) { transform: rotate(.6deg); border-radius: 6px 18px 8px 16px; }
.strippi.korostus { animation: korostus 1.4s ease-out; }
@keyframes korostus { 0% { box-shadow: 0 0 0 14px var(--ylos); } 100% { box-shadow: 6px 7px 0 var(--haalea); } }

/* kulmakolmio: uusin strippi saa "UUSI"-lipun */
.strippi.uusi::before {
  content: "UUSI";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 92px;
  height: 92px;
  padding: 14px 8px 0 0;
  text-align: right;
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--paperi);
  background: var(--ylos);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-top-right-radius: 6px;
}

.strippi h2 {
  margin: 0 0 .3rem;
  font-weight: normal;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  letter-spacing: .25em;
  text-transform: uppercase;
}
.strippi h2 a { color: inherit; text-decoration: none; }
.strippi h2 a:hover { text-decoration: underline wavy var(--vaalea); }
.strippi .otsikko:not(:empty)::before { content: " – "; }

.merkki { margin: 0 0 .5rem; color: var(--vaalea); }
.merkki::before { content: "✎ "; }

.kuva-nappi { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.kuva { display: block; width: 100%; height: auto; }

/* ---------- äänestys ---------- */
.aanet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem 1.2rem;
  margin-top: .8rem;
}

.aani {
  display: flex;
  align-items: center;
  gap: .45rem;
  font: inherit;
  font-size: 1.15rem;
  color: var(--kyna);
  background: none;
  border: 0;
  padding: .2rem;
  cursor: pointer;
}

.aani .muoto {
  width: 44px;
  height: 38px;
  background: var(--kyna);
  position: relative;
  transition: transform .2s;
}
.aani .muoto::after {
  content: "";
  position: absolute;
  inset: 3px 4px;
  background: #fff;
  transition: background .2s;
}
.aani.ylos .muoto, .aani.ylos .muoto::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.aani.alas .muoto, .aani.alas .muoto::after { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.aani.ylos .muoto::after { inset: 5px 5px 3px; }
.aani.alas .muoto::after { inset: 3px 5px 5px; }

.aani:hover .muoto { transform: scale(1.12) rotate(-6deg); }
.aani.ylos[aria-pressed="true"] .muoto { background: var(--ylos); }
.aani.ylos[aria-pressed="true"] .muoto::after { background: var(--ylos); }
.aani.alas[aria-pressed="true"] .muoto { background: var(--alas); }
.aani.alas[aria-pressed="true"] .muoto::after { background: var(--alas); }
.aani[aria-pressed="true"] .muoto { animation: pomppu .35s ease-out; }
@keyframes pomppu { 50% { transform: scale(1.35) rotate(12deg); } }

.aani .maara { min-width: 1.5em; font-size: 1.4rem; text-align: center; }
.aani .selite { color: var(--vaalea); font-size: .95rem; }
.aani:focus-visible, .valikko button:focus-visible, .jaa:focus-visible, .kuva-nappi:focus-visible {
  outline: 3px dashed var(--kyna);
  outline-offset: 3px;
}

.mittari {
  flex: 1 1 120px;
  max-width: 260px;
  height: 14px;
  border: 2px solid var(--kyna);
  border-radius: 8px 3px 9px 4px;
  background: var(--alas);
  overflow: hidden;
}
.mittari .tayttyma { height: 100%; width: 50%; background: var(--ylos); transition: width .4s; }
.mittari.tyhja { background: var(--haalea); }
.mittari.tyhja .tayttyma { width: 0; }

.jaa {
  margin-left: auto;
  font: inherit;
  color: var(--kyna);
  background: none;
  border: 2px solid var(--kyna);
  border-radius: 10px 4px 12px 4px;
  padding: .2rem .7rem;
  cursor: pointer;
}

/* lentävät kolmiot äänestäessä */
.lentava {
  position: fixed;
  pointer-events: none;
  font-size: 1.3rem;
  animation: lenna .9s ease-out forwards;
  z-index: 10;
}
@keyframes lenna {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--kierto)); opacity: 0; }
}

/* ---------- iso kuva ---------- */
.iso {
  max-width: 96vw;
  max-height: 94vh;
  padding: 1rem;
  border: 2px solid var(--kyna);
  border-radius: 12px;
  background: #fff;
}
.iso::backdrop { background: rgba(40, 40, 40, .6); }
.iso img { display: block; max-width: 100%; max-height: 85vh; }
.iso form { text-align: right; }
.sulje { font: inherit; font-size: 1.3rem; background: none; border: 0; cursor: pointer; }

.ala { text-align: center; color: var(--vaalea); padding: 2rem 1rem 3rem; }
.ala p:first-child { letter-spacing: .4em; }

.virhe { text-align: center; font-size: 1.2rem; }

@media (max-width: 600px) {
  .hahmo { display: none; }
  .logo h1 { font-size: 1.8rem; letter-spacing: .15em; }
  main, header, nav { overflow-wrap: anywhere; }
  .strippi, .strippi:nth-child(even) { transform: none; padding: .7rem; }
  .jaa { margin-left: 0; }
  .aani .selite { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}