/* wilska.fi – pelikooste. Fonts: SIL Open Font License (fonts/OFL.txt) */
@font-face { font-family: "Press Start 2P"; src: url(fonts/press-start-2p.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(fonts/pixelify-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bg: #0e0f14; --text: #e8e9f0; --muted: #8d90a3;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --pixel-soft: "Pixelify Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; padding: 40px 16px 48px; color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 760px; margin: 0 auto; }
a { color: inherit; }

footer { margin-top: 32px; color: var(--muted); font-size: 14px; text-align: center; }

/* ---------- Moduulin runko (yhteinen kaikille peleille) ---------- */
.stack { display: grid; gap: 20px; }
.game {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  min-height: 230px; border: 1px solid var(--frame); border-radius: 14px; text-decoration: none;
}
.game__art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.game__body { display: flex; align-items: flex-start; padding: 28px; min-height: inherit; }
/* Alusta (iOS, selainversio …) otsikon yläpuolella */
.game__kicker { margin: 0 0 10px; font: 10px/1.4 var(--pixel); }
.game__title { margin: 0 0 10px; font: 26px/1.3 var(--pixel); }
.game__desc { margin: 0 0 18px; max-width: 30em; }
.game__cta { display: inline-block; padding: 10px 14px; font: 11px/1.2 var(--pixel); box-shadow: 0 4px 0 var(--cta-shadow); }
/* Hinta alustan perässä, erottimena pikselineliö */
.game__price::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px; vertical-align: 2px; background: currentColor; }

/* ---------- Rascal Drop: hex-jalokivet, sateenkaari, Pixelify ---------- */
.game--rascal {
  --rainbow: linear-gradient(90deg, #ff5d73, #ffd166, #06d6a0, #4cc9f0, #a78bfa);
  background: radial-gradient(ellipse 70% 120% at 85% 50%, #23263c, #12131a 70%);
  --frame: #2a2d3d;
}
.game--rascal .game__kicker { color: #ffd166; }
.game--rascal .game__title {
  color: transparent;
  background: var(--rainbow); -webkit-background-clip: text; background-clip: text;
}
.game--rascal .game__desc { color: #d6d8e4; font: 18px/1.4 var(--pixel-soft); }
.game--rascal .game__cta {
  --cta-shadow: #6b4f8a; color: #16161d; background: var(--rainbow);
}
/* Putoavat kuusikulmiot oikeassa laidassa */
.game--rascal .gem {
  --s: 46px; position: absolute; top: -60px; width: var(--s); height: calc(var(--s) * .866);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  opacity: .22; animation: drop 9s linear infinite;
}
.game--rascal .g1 { right: 6%;  background: linear-gradient(135deg, #ffd166, #06d6a0); }
.game--rascal .g2 { right: 18%; --s: 34px; background: linear-gradient(135deg, #4cc9f0, #a78bfa); animation-delay: -3s; animation-duration: 11s; }
.game--rascal .g3 { right: 30%; --s: 28px; background: linear-gradient(135deg, #ff5d73, #ffd166); animation-delay: -6s; animation-duration: 13s; }
.game--rascal .g4 { right: 12%; --s: 58px; background: linear-gradient(135deg, #06d6a0, #4cc9f0); animation-delay: -7.5s; }
.game--rascal .g5 { right: 24%; --s: 40px; background: linear-gradient(135deg, #a78bfa, #ff5d73); animation-delay: -1.5s; animation-duration: 10s; }
.game--rascal .g6 { right: 2%;  --s: 30px; background: linear-gradient(135deg, #ffd166, #4cc9f0); animation-delay: -4.5s; animation-duration: 12s; }
@keyframes drop { to { transform: translateY(340px) rotate(60deg); } }

/* ---------- Kollaa: talvihämärä, revontulet, mäntymetsä, Press Start 2P ---------- */
.game--kollaa { background: #14101e; color: #e8eef2; --frame: #2e2245; }
.game--kollaa .game__art { image-rendering: pixelated; z-index: -2; }
.game--kollaa .game__kicker { color: #4fae86; }
.game--kollaa .game__title { color: #fff3b0; text-shadow: 3px 3px 0 #c2402e; }
.game--kollaa .game__desc { color: #c8d6e6; font: 11px/1.9 var(--pixel); text-shadow: 2px 2px 0 #14101e; max-width: 36em; }
.game--kollaa .game__cta {
  --cta-shadow: #c2402e; color: #241812; background: #ffd25e;
}
.game--kollaa .game__cta::after {
  content: ""; display: inline-block; margin-left: 10px; vertical-align: -1px;
  border: 6px solid transparent; border-left: 7px solid currentColor; border-right: 0;
}
.game--kollaa::before { /* tummennus tekstin taakse */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20,16,30,.75), rgba(20,16,30,.35) 55%, transparent 75%);
}
.game--kollaa:hover .game__cta, .game--kollaa:focus-visible .game__cta { background: #fff3b0; }
.game--kollaa:focus-visible { outline: 3px solid #fff3b0; outline-offset: 3px; }

@media (max-width: 520px) {
  body { padding-top: 28px; }
  .game__body { padding: 20px; }
  .game__title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .game--rascal .gem { animation: none; top: 30%; } }