/* ==========================================================================
   Korvamato – tyylitiedosto (graafinen ohjeistus v2.0)
   Lähde: docs/style-reference-v2.png (katso KORVAMATO.md, kohta "Graafinen ilme")
   Rakenne:
     1. Design tokenit (värit, fontit, mitat)
     2. Perusnollaus
     3. Yleiset komponentit (painike, ikonilaatta, pelikoodi)
     4. Aloitussivu
     5. Responsiivisuus: mobiili (oletus) → tabletti → työpöytä / vaakatabletti
   Mobile first: peruskoodi on suunniteltu pystyssä pidettävälle puhelimelle,
   jolla peliin liitytään. Isot näytöt (vaakatabletti, työpöytä) on optimoitu
   isännän yhteiseen näyttöön.

   v2.0:n muotokieli: KULMIKAS "TARRA". Napit ja laatat ovat vinoja nelikulmioita
   (yksi vino sivu, pienet pyöristetyt kulmat, kevyt kallistus), ei pyöreitä pillereitä.
   ========================================================================== */

/* 1. Design tokenit ------------------------------------------------------- */
:root {
  /* Brändivärit (v2.0-arkin arvot) */
  --carbon: #0B0B0F;   /* Carbon Black – pääväri, tausta */
  --cyan:   #37E3C6;   /* Acid Cyan – raikas energia */
  --pink:   #FF4FA0;   /* Neon Pink – leikkisä tehoste */
  --cream:  #FFF7F1;   /* Soft Cream – teksti, taustat */
  --gray:   #D8CEC8;   /* Warm Gray – neutraali tasapaino */

  /* Johdetut sävyt */
  --surface:   #15151B;
  --surface-2: #1F1F27;
  --line:      rgba(255, 247, 241, .14);
  --text:      var(--cream);
  --text-dim:  var(--gray);
  --pink-deep: #B82F72;   /* painikkeen "pohja" */
  --cyan-deep: #1E9E88;

  /* Fontit */
  --font-display: "Luckiest Guy", "Bangers", "Impact", "Arial Black", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script:  "Caveat Brush", "Segoe Script", "Ink Free", cursive;   /* logon iskulause */

  /* Muoto: kulmikas tarra */
  --radius-s: 8px;        /* pienet pyöristykset (kortit, kentät) */
  --radius-m: 12px;       /* painikkeet ja laatat */
  --slant: 6%;            /* vinon sivun jyrkkyys */
  --tilt: -1.2deg;        /* painikkeen kevyt kallistus */
  --gutter: clamp(16px, 5vw, 48px);
  --tap: 56px;            /* pienin sormella painettava korkeus */

  --shadow-soft: 0 12px 32px rgba(0, 0, 0, .45);
}

/* 2. Perusnollaus --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--carbon);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 3. Yleiset komponentit -------------------------------------------------- */

/* Painike (v2.0): vino nelikulmio.
   Muoto tehdään ::before-elementillä (clip-path + kallistus), jotta teksti pysyy suorassa.
   Varjo on drop-shadow-filter, koska clip-path leikkaisi box-shadow'n. */
.btn {
  --btn-bg: var(--pink);
  --btn-deep: var(--pink-deep);
  --btn-glow: rgba(255, 79, 160, .30);
  --btn-fg: var(--carbon);   /* tumma teksti: riittävä kontrasti pinkillä ja cyanilla */
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: var(--tap);
  padding: .85em 2em .85em 1.75em;
  border: 0;
  background: none;
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  filter: drop-shadow(0 5px 0 var(--btn-deep)) drop-shadow(0 12px 14px var(--btn-glow));
  transition: transform .12s ease, filter .12s ease;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-m) 6px var(--radius-m) 6px;
  clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%);
  transform: rotate(var(--tilt));
}
.btn::before { background: var(--btn-bg); }
.btn::after  { display: none; }
.btn svg { width: 1.3em; height: 1.3em; flex: none; }

/* Painikkeen pieni kuva: pelkkä viivaikoni ilman taustaa tai neliötä. Väri = napin tekstin väri
   (tumma pinkillä ja cyanilla napilla, kerma ääriviivapainikkeella), joten kontrasti on sama kuin tekstillä. */
.btn__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  color: inherit;
}
.btn__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--pink { --btn-bg: var(--pink); --btn-deep: var(--pink-deep); --btn-glow: rgba(255, 79, 160, .30); }
.btn--cyan { --btn-bg: var(--cyan); --btn-deep: var(--cyan-deep); --btn-glow: rgba(55, 227, 198, .24); --tilt: 1deg; }

/* Ääriviivapainike: ::before = reunan väri, ::after = tumma täyttö sisällä */
.btn--ghost {
  --btn-bg: var(--cyan);
 
  --btn-deep: transparent;
  --btn-glow: transparent;
  --btn-fg: var(--cream);
  --tilt: 1deg;
}
.btn--ghost::after {
  display: block;
  inset: 2px;
  background: var(--carbon);
}

.btn:hover  { transform: translateY(-2px); filter: drop-shadow(0 7px 0 var(--btn-deep)) drop-shadow(0 14px 16px var(--btn-glow)) brightness(1.05); }
.btn:active { transform: translateY(4px);  filter: drop-shadow(0 1px 0 var(--btn-deep)) drop-shadow(0 4px 6px var(--btn-glow)); }

/* Ikonilaatta (v2.0): kallistettu väripinta, tumma ikoni, yksi leikattu kulma */
.badge {
  --tilt: -4deg;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 3.6rem;
  border-radius: var(--radius-m);
  color: var(--carbon);
  transform: rotate(var(--tilt));
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}
.badge svg {
  width: 52%; height: 60%;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.badge--pink  { background: var(--pink); }
.badge--cyan  { background: var(--cyan); }
.badge--cream { background: var(--cream); }

/* Pelikoodi (tulee käyttöön liity-sivulla ja isännän näytöllä) */
.gamecode {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .55em 1em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: .32em;
  font-variant-numeric: tabular-nums;
}
.gamecode small {
  font-size: .6em; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; margin-right: .4em;
}

/* 4. Aloitussivu ---------------------------------------------------------- */

/* Taustan roiskeet (v2.0: maaliroiskeet pinkillä ja cyanilla) */
.bg-blobs {
  position: absolute;      /* kiinni dokumentin reunoissa, ei vieritä tekstin päälle */
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
/* roiskepisarat */
.blob::before,
.blob::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.blob::before { width: 15%; aspect-ratio: 1;   top: -9%;    left: 14%; }
.blob::after  { width: 9%;  aspect-ratio: 1;   bottom: 12%; left: -13%; box-shadow: -22px -30px 0 -1px currentColor; }
/* Läiskät pidetään kulmissa, jotta ne eivät jää tekstin taakse (luettavuus). */
.blob--top {
  width: min(30vw, 240px); aspect-ratio: 1;
  right: -10vw; top: -21vw;
  background: var(--cyan);
  border-radius: 48% 52% 60% 40% / 45% 55% 45% 55%;
}
.blob--pink {
  width: min(52vw, 520px); aspect-ratio: 1;
  right: -20vw; bottom: -22vw;
  background: var(--pink);
  transform: rotate(18deg);
}
.blob--cyan {
  display: none;
  width: min(34vw, 420px); aspect-ratio: 1.15;
  left: -12vw; bottom: -14vw;
  background: var(--cyan);
  border-radius: 42% 58% 38% 62% / 55% 40% 60% 45%;
  transform: rotate(-12deg);
}
.blob--top::after  { color: var(--cyan); }
.blob--pink::after { color: var(--pink); }
.blob--cyan::after { color: var(--cyan); }

.landing {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 0;
  max-width: 1280px;
  margin-inline: auto;
}

/* Hero: logo (sisältää iskulauseen "Hyvä musiikki tarttuu!") */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  padding-top: clamp(4px, 2vh, 24px);
}
.hero__logo { width: min(100%, 560px); }

/* Logo = kuva + iskulause tekstinä (kuvassa ei ole tekstiä, jotta sen voi vaihtaa helposti).
   Kääre on kuvan kokoinen ja container-query-yksikkö cqw skaalaa tekstin kuvan mukana. */
.logo {
  position: relative;
  display: block;
  width: 100%;
  margin-inline: auto;
  container-type: inline-size;
}
.logo img { display: block; width: 100%; height: auto; }
.logo__tagline {
  position: absolute;
  left: 77.5%;
  top: 27%;
  font-family: var(--font-script);
  font-size: 4.9cqw;
  line-height: .92;
  letter-spacing: .01em;
  color: var(--cyan);
  text-align: left;
  white-space: nowrap;
  transform: rotate(-8deg);
  transform-origin: 0 50%;
  pointer-events: none;
}
/* Logokuvassa on 30 px tumma reunus; sumennetaan se pois, ettei kuvan reuna erotu taustasta */
.hero__logo img {
  width: 100%;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                      linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                      linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
          mask-composite: intersect;
}
.hero__keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .6rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero__keywords li { white-space: nowrap; }
.hero__keywords li + li::before {
  content: "•";
  margin-right: .6rem;
  color: var(--pink);
}

/* Lyhyt kuvaus */
.intro {
  margin: .9rem auto 0;
  text-align: center;
  color: var(--cream);
  font-size: .98rem;
  line-height: 1.45;
  max-width: 44ch;
}
.intro strong { color: var(--cyan); font-weight: 700; }
.intro__more { display: none; }   /* pidempi loppu vain isoilla näytöillä */

/* Toimintopainikkeet */
.actions {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1rem;
  /* koko leveys, jotta alapalkin tausta peittää läiskät myös sivuilta */
  margin-inline: calc(var(--gutter) * -1);
  padding: 1.25rem var(--gutter) max(20px, env(safe-area-inset-bottom));
  position: sticky;                 /* mobiilissa peukalon ulottuvilla */
  bottom: 0;
  z-index: 5;
  background: linear-gradient(to top, var(--carbon) 68%, rgba(11, 11, 15, 0));
}
.actions .btn { width: 100%; }

/* Mobiilissa ensisijainen toiminto on liittyminen (pinkki), uusi peli on ääriviivapainike */
.actions .btn--join   { order: 1; }
.actions .btn--create { order: 2; }
.actions .btn--create { --btn-bg: var(--cyan); --btn-deep: transparent; --btn-glow: transparent; --btn-fg: var(--cream); --tilt: 1deg; }
.actions .btn--create::after { display: block; inset: 2px; background: var(--carbon); }

/* "Näin peli toimii" */
.steps {
  margin-top: 1.5rem;
  padding: 1.5rem 0 2rem;
}
.steps__title {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.4rem;
  text-align: center;
}
.steps__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem .75rem;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
}
/* Laattojen kallistus ja yksi leikattu kulma vaihtelevat */
.step:nth-child(even) .badge { --tilt: 3deg; }
.step:nth-child(3n+1) .badge { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0); }
.step:nth-child(3n+2) .badge { clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 0 26%); }
.step:nth-child(3n)   .badge { clip-path: polygon(0 0, 100% 0, 100% 74%, 76% 100%, 0 100%); }

.tagstrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.4rem;
  padding: 0 0 1.5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tagstrip li::before { content: "★"; color: var(--cyan); margin-right: .55em; }
.tagstrip li:nth-child(even)::before { color: var(--pink); }

.footer {
  padding: 0 0 max(130px, calc(env(safe-area-inset-bottom) + 120px));
  text-align: center;
  font-size: .78rem;
  color: var(--text-dim);
}

/* Pieni keinutus logolle */
@media (prefers-reduced-motion: no-preference) {
  .hero__logo .logo { animation: bob 5s ease-in-out infinite; }
  @keyframes bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-6px) rotate(-.6deg); }
  }
}

/* 5. Responsiivisuus ------------------------------------------------------ */

/* ---- Puhelin pystyssä (< 768px): kuvaus + napit mahtuvat yhteen näkymään ----
   Logon korkeus rajataan näkymän korkeuteen, jotta pieni puhelin (esim. 360×640)
   ei vaadi vieritystä ennen kuin napit ja kuvaus on nähty. */
@media (max-width: 767px) {
  /* 31svh korkea logo: leveys = 31svh * 776/484 = 49.7svh (kääre, jotta iskulause pysyy kuvan päällä oikeassa kohdassa) */
  .hero__logo .logo { width: min(100%, 49.7svh); }
}
/* Matala puhelin: avainsanarivi pois, ettei kuvaus jää napien alle */
@media (max-width: 767px) and (max-height: 700px) {
  .hero__keywords { display: none; }
  .intro { font-size: .93rem; margin-top: .6rem; }
  .actions { gap: 1rem; margin-top: .6rem; padding-top: 1rem; }
}

/* ---- Iso puhelin / pieni tabletti pystyssä (>= 600px) ---- */
@media (min-width: 600px) {
  .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .actions { flex-direction: row; justify-content: center; }
  .actions .btn { width: auto; min-width: 16rem; }
}

/* ---- Tabletti pystyssä (>= 768px): isommat mitat, kosketusystävälliset ---- */
@media (min-width: 768px) {
  :root { --tap: 64px; --slant: 5%; }
  .hero__logo { width: min(100%, 620px); }
  .intro { font-size: 1.2rem; max-width: 48ch; line-height: 1.5; }
  .intro__more { display: inline; }
  .btn { font-size: 1.3rem; }
  .badge { width: 4.8rem; height: 4.3rem; }
  .step { font-size: 1.05rem; }
  /* Isäntä aloittaa pelin isolta näytöltä: uusi peli ensin (pinkki), liity toisena (cyan) */
  .actions .btn--create { order: 1; }
  .actions .btn--join   { order: 2; }
  .actions .btn--create { --btn-bg: var(--pink); --btn-deep: var(--pink-deep); --btn-glow: rgba(255, 79, 160, .30); --btn-fg: var(--carbon); --tilt: -1.2deg; }
  .actions .btn--create::after { display: none; }
  .actions .btn--join   { --btn-bg: var(--cyan); --btn-deep: var(--cyan-deep); --btn-glow: rgba(55, 227, 198, .24); --tilt: 1deg; }
  .actions { position: static; background: none; margin-inline: 0; padding: 0; margin-top: 1.75rem; }
  .blob--cyan { display: block; }
  .footer { padding-bottom: 32px; }
}

/* ---- Vaakatabletti ja työpöytä (>= 900px, leveä näyttö) ----
   Kaksi saraketta: logo vasemmalla, kuvaus + painikkeet oikealla,
   vaiheet koko leveydeltä alla. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .landing {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "hero    intro"
      "hero    actions"
      "steps   steps"
      "tags    tags"
      "footer  footer";
    column-gap: clamp(32px, 5vw, 96px);
    align-content: center;
    align-items: center;
    padding-top: clamp(24px, 6vh, 64px);
  }
  .hero    { grid-area: hero; }
  .intro   { grid-area: intro; text-align: left; margin: 0; max-width: 40ch; align-self: end; font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
  .actions { grid-area: actions; flex-direction: column; align-items: flex-start; align-self: start; margin-top: 1.75rem; }
  .actions .btn { width: min(100%, 26rem); }
  .steps   { grid-area: steps; }
  .tagstrip{ grid-area: tags; }
  .footer  { grid-area: footer; }

  .hero { align-items: center; }
  .hero__logo { width: min(100%, 680px); }
  .hero__keywords { font-size: .8rem; letter-spacing: .24em; gap: .35rem .9rem; }
  .hero__keywords li + li::before { margin-right: .9rem; }
  /* Läiskät pois tekstin alta: pinkki oikeaan alakulmaan, cyan vasempaan */
  .blob--pink { width: min(30vw, 440px); right: -9vw; bottom: -17vw; }
  .blob--cyan { width: min(24vw, 340px); left: -9vw; bottom: -10vw; }

  .steps { margin-top: clamp(1.5rem, 5vh, 3.5rem); }
  .steps__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
  .steps__title { font-size: .85rem; }
}

/* ---- Iso työpöytä (>= 1280px) ---- */
@media (min-width: 1280px) {
  .landing { padding-inline: 64px; }
  .hero__logo { width: min(100%, 760px); }
  .btn { font-size: 1.4rem; }
}

/* ---- Vaakatabletti kosketuksella: ei hover-hyppyjä ---- */
@media (hover: none) and (pointer: coarse) {
  .btn:hover { transform: none; filter: drop-shadow(0 5px 0 var(--btn-deep)) drop-shadow(0 12px 14px var(--btn-glow)); }
}

/* ---- Vaaka-asennossa oleva puhelin (matala näyttö): tiivis kaksipalstainen ---- */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --tap: 52px; }
  .landing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "hero intro" "hero actions" "steps steps" "tags tags" "footer footer";
    column-gap: 24px;
    align-items: center;
    align-content: center;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .hero    { grid-area: hero; padding-top: 0; }
  .hero__logo { width: min(100%, 360px); }
  .hero__logo .logo { width: 100%; }
  .hero__keywords { display: none; }
  .intro   { grid-area: intro; text-align: left; margin: 0; font-size: .95rem; align-self: end; }
  .intro__more { display: none; }
  .actions { grid-area: actions; flex-direction: row; position: static; background: none; margin: 1rem 0 0; padding: 0; align-self: start; }
  .actions .btn { min-width: 0; flex: 1; font-size: 1rem; padding-inline: 1em; }
  .steps   { grid-area: steps; }
  .steps__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .step { font-size: .75rem; }
  .badge { width: 3rem; height: 2.7rem; }
  .tagstrip { grid-area: tags; }
  .footer  { grid-area: footer; padding-bottom: 16px; }
}

/* 6. Lomakesivut (liity.html, uusi-peli.html) ----------------------------- */

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 0;
}
.layout { flex: 1; display: flex; flex-direction: column; }
.page__brand { display: none; }   /* iso logo vain leveällä näytöllä */

/* Yläpalkki: takaisin-laatta + pieni logoteksti */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
}
.backbtn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--surface);
  color: var(--cream);
  border-radius: 12px 4px 12px 4px;
  box-shadow: inset 0 0 0 1px var(--line), 0 4px 0 rgba(0, 0, 0, .35);
  transform: rotate(-2deg);
  transition: transform .12s ease, background .12s ease;
}
.backbtn:hover { background: var(--surface-2); transform: rotate(-2deg) translateX(-2px); }
.backbtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.topbar__logo img { height: 42px; width: auto; }

.pagehead { text-align: center; margin: .75rem 0 1.5rem; }
.pagehead h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); font-weight: 800; line-height: 1.1; }
.pagehead p  { margin-top: .4rem; color: var(--text-dim); }

.form { display: flex; flex-direction: column; gap: 1.5rem; }

/* Kentät */
.field { display: block; border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label { display: block; margin-bottom: .5rem; padding: 0; font-weight: 700; font-size: .92rem; }
.field__hint  { margin-top: .45rem; font-size: .85rem; color: var(--text-dim); }
.field input[type="text"] {
  width: 100%;
  min-height: var(--tap);
  padding: .7em 1em;
  background: var(--surface);
  color: var(--cream);
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 1.05rem;
}
.field input::placeholder { color: rgba(216, 206, 200, .55); }
.field input:focus,
.codeinput input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(55, 227, 198, .25);
}

/* Pelikoodi: kuusi laatikkoa (A B C 1 2 3) */
.codeinput { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.codeinput input {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 5rem;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  font: inherit;
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  font-weight: 800;
  color: var(--cream);
  caret-color: var(--pink);
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
}

/* Valintaryhmät (radiot laattoina): pelin tyyppi, tavoitepisteet */
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .65rem; }
.choice label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: var(--tap);
  padding: .7em .8em;
  text-align: center;
  font-weight: 800;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px 4px 12px 4px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.choice label small { font-weight: 500; font-size: .78rem; line-height: 1.25; color: var(--text-dim); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label:hover { background: var(--surface-2); }
.choice label:has(input:checked) {
  background: var(--cyan);
  color: var(--carbon);
  border-color: transparent;
  transform: rotate(-1deg);
  box-shadow: 0 4px 0 var(--cyan-deep);
}
.choice label:has(input:checked) small { color: rgba(11, 11, 15, .75); }
.choice label:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* Lomakkeen toiminnot (mobiilissa alapalkki) */
.formactions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: .5rem calc(var(--gutter) * -1) 0;
  padding: 1.25rem var(--gutter) max(20px, env(safe-area-inset-bottom));
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: linear-gradient(to top, var(--carbon) 68%, rgba(11, 11, 15, 0));
}
.formactions .btn { width: 100%; }
.btn[disabled] {
  --btn-bg: #4A3340;                    /* peittävä himmeä sävy, ei läpinäkyvyyttä (roiske ei kuulu läpi) */
  --btn-fg: rgba(255, 247, 241, .6);
  cursor: not-allowed;
  filter: none;
  transform: none;
}
.textlink {
  align-self: center;
  color: var(--cream);
  font-size: .95rem;
  text-underline-offset: 4px;
}

/* Ilmoitus (esim. "palvelin ei vielä valmis") */
.notice {
  padding: .9rem 1rem;
  background: var(--surface);
  border-left: 4px solid var(--cyan);
  border-radius: 4px 12px 12px 4px;
  font-size: .95rem;
  line-height: 1.45;
}
.notice { scroll-margin-bottom: 10rem; }
.notice[hidden] { display: none; }
.notice strong { color: var(--cyan); }

/* Julkisten pelien lista (tyhjä tila kunnes palvelin on valmis) */
.publiclist { margin-top: 1rem; }
.publiclist summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  display: grid;
  place-items: center;
}
.publiclist summary::-webkit-details-marker { display: none; }
.emptystate {
  margin-top: .75rem;
  padding: 1.25rem;
  text-align: center;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-s);
}
.emptystate a { color: var(--cyan); font-weight: 700; }

.page__footer { padding: 1.5rem 0 max(110px, calc(env(safe-area-inset-bottom) + 100px)); text-align: center; font-size: .78rem; color: var(--text-dim); }

/* Tabletti ja isompi: iso teksti, ei alapalkkia */
@media (min-width: 768px) {
  .page { max-width: 720px; padding-top: max(28px, env(safe-area-inset-top)); }
  .topbar__logo img { height: 52px; }
  .backbtn { width: 56px; height: 56px; }
  .pagehead { margin: 1.5rem 0 2rem; }
  .pagehead p { font-size: 1.15rem; }
  .field__label { font-size: 1.05rem; }
  .field input[type="text"] { font-size: 1.2rem; }
  .form { gap: 1.9rem; }
  .formactions { position: static; background: none; margin: .5rem 0 0; padding: 0; align-items: center; }
  .formactions .btn { width: min(100%, 26rem); }
  .page__footer { padding-bottom: 32px; }
}

/* Vaakatabletti ja työpöytä: logo vasemmalla, lomake oikealla */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .page { max-width: 1180px; }
  .layout { flex-direction: row; align-items: center; gap: clamp(32px, 5vw, 96px); }
  .page__brand { display: block; flex: 1.1; min-width: 0; text-align: center; }
  .page__brand .logo { width: min(100%, 640px); }
  .page__brand img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                        linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                        linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
            mask-composite: intersect;
  }
  .page__main { flex: 1; min-width: 0; max-width: 560px; }
  .pagehead { text-align: left; }
  .topbar__logo { display: none; }   /* iso logo on jo vasemmalla */
}

/* Puhelin vaakaan: tiiviimpi */
@media (orientation: landscape) and (max-height: 520px) {
  .pagehead { margin: .25rem 0 .75rem; }
  .pagehead h1 { font-size: 1.5rem; }
  .form { gap: 1rem; }
  .formactions { position: static; background: none; margin: 0; padding: 0; }
  .codeinput input { max-height: 3.4rem; }
}

/* Neljän valinnan rivi (tavoitepisteet): pysyy yhdellä rivillä myös kapealla puhelimella */
.choice--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.choice--row label { padding-inline: .3em; }

/* Leveä mutta matala näyttö (vaakatabletti 1024×768): lomake ja nappi mahtuvat ilman vieritystä */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) and (max-height: 860px) {
  .page { padding-top: 16px; }
  .topbar { padding-bottom: 0; }
  .pagehead { margin: 0 0 1rem; }
  .pagehead h1 { font-size: 2rem; }
  .pagehead p { font-size: 1rem; }
  .form { gap: 1.1rem; }
  .field__label { margin-bottom: .35rem; }
  .field input[type="text"] { min-height: 52px; }
  .choice label { min-height: 52px; padding-block: .5em; }
  .formactions { margin-top: 0; }
  .page__footer { display: none; }
  .layout { padding-bottom: 20px; }
}