* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

@font-face {
  font-family: "Peli Emoji";
  src: url("/fonts/NotoColorEmoji.woff2") format("woff2");
  font-display: swap;
}

html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif;
  background: linear-gradient(180deg, #bde0fe 0%, #a2d2ff 100%);
  color: #2b2d42;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

:root.no-emoji-font body {
  font-family: "Comic Sans MS", "Trebuchet MS", Verdana, "Peli Emoji", sans-serif;
}

header {
  width: 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

#hub-link,
#active-player {
  flex-shrink: 0;
  color: #2b2d42;
  font-weight: bold;
  text-decoration: none;
  background: #ffffff;
  border-radius: 14px;
  padding: 0.5rem 0.9rem;
  box-shadow: 0 4px 0 #6c8ebf;
}

header h1 {
  margin: 0;
  font-size: 2.2rem;
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  /* Wider than the other games: a 10:1 hull needs the room to be worth
     looking at, and the height follows from the width. */
  max-width: 1150px;
  padding: 0 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hidden {
  display: none !important;
}

#status-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
  font-weight: bold;
}

#status-row span {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  padding: 0.3rem 0.8rem;
}

/* ---------------- The stage ---------------- */

#ark-scene {
  width: 100%;
}

/* Heights are set from JavaScript, because the hull is locked to a 10:1 shape
   and therefore its height depends on how wide the screen happens to be. */
#stage {
  position: relative;
  width: 100%;
  height: var(--stage-h, 140px);
  overflow: hidden;
  border-radius: 14px;
  transition: height 2.2s ease, background 2.2s ease;
}

/* During the closing story the stage becomes a picture in its own right, so
   it gets a sky of its own instead of showing the page behind it. */
#ark-scene.story #stage {
  background: linear-gradient(180deg, #7fb2e5 0%, #bcdcf7 60%, #dcefff 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

#ark {
  position: absolute;
  /* Leaves a strip of dry land to the right of the hull, where Noah's family
     waits. Once the ark is afloat it centres and fills the view. */
  left: var(--ark-left, 0px);
  right: var(--ark-right, 0px);
  bottom: var(--ark-bottom, 0px);
  aspect-ratio: 10 / 1;
  display: flex;
  flex-direction: column;
  border: 2px solid #6b4423;
  border-bottom-width: 4px;
  border-radius: 6px 6px 10px 10px;
  overflow: hidden;
  background: #c89f6b;
  box-shadow: 0 4px 0 rgba(80, 50, 20, 0.35);
  transition: bottom 5s ease-in-out, left 2.5s ease, right 2.5s ease;
  z-index: 3;
}

/* Upright timbers closing off the bow and the stern. */
#ark::before,
#ark::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.1%;
  min-width: 4px;
  background: linear-gradient(180deg, #9a6631 0%, #6b4423 100%);
  z-index: 2;
}

#ark::before { left: 0; }
#ark::after { right: 0; }

#ark.floating {
  animation: rock 6s ease-in-out infinite;
}

@keyframes rock {
  0%, 100% { transform: translateY(0) rotate(-0.7deg); }
  50% { transform: translateY(-1.5%) rotate(0.7deg); }
}

#ark-roof {
  position: relative;
  height: 15%;
  background:
    repeating-linear-gradient(90deg, rgba(60, 34, 12, 0.35) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #a06a34 0%, #7a4e24 100%);
  border-bottom: 1px solid #5b3a18;
}

#ark-windows {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 28%;
  height: 44%;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 221, 150, 0.9) 0 0.8%,
    transparent 0.8% 3.4%
  );
}

.deck {
  position: relative;
  flex: 1;
  min-height: 0;
  border-bottom: 1px solid rgba(107, 68, 35, 0.6);
}

.deck:last-child {
  border-bottom: none;
}

.deck[data-ryhma="linnut"] { background: #cfe8ff; }
.deck[data-ryhma="nisakkaat"] { background: #ffe2b8; }
.deck[data-ryhma="matelijat"] { background: #d5efc9; }

/* "Ja oven arkkiin tee sen kylkeen" (1. Moos. 6:16). Tall, arched and with a
   handle, because a small brown rectangle just looks like a stain. */
#ark-door {
  position: absolute;
  right: 6%;
  top: 19%;
  bottom: 2%;
  width: 3.2%;
  min-width: 9px;
  background: linear-gradient(180deg, #d3a065 0%, #a1703a 100%);
  border: 1px solid #3d2410;
  border-radius: 46% 46% 3px 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 210, 0.4);
  z-index: 3;
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

#ark-door-handle {
  position: absolute;
  left: 15%;
  top: 56%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 0 1px #7a5a08;
  transition: opacity 0.4s ease;
}

/* Barred shut: the Lord closed it behind them (1. Moos. 7:16). */
#ark-door.shut {
  background: linear-gradient(180deg, #6b4423 0%, #40260f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#ark-door.shut #ark-door-handle {
  opacity: 0;
}

.deck-animals {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.1em;
  padding: 0 0.4em;
  font-size: var(--deck-emoji, 14px);
  line-height: 1;
  overflow: hidden;
}

.deck-animals span {
  flex: 0 0 auto;
  animation: board 0.45s ease;
  transition: transform 2.6s ease, opacity 2.6s ease;
}

@keyframes board {
  0% { transform: translateX(60%) scale(0.3); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* When the ark is opened again the animals stream out and away. */
.deck-animals.emptying span {
  transform: translateY(180%) scale(0.5);
  opacity: 0;
}

/* ---------------- Water, ground, weather ---------------- */

#water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--water-h, 24px);
  background: linear-gradient(180deg, #4d9de0 0%, #2f6fa8 100%);
  transition: height 5s ease-in-out;
  z-index: 2;
  --deck-emoji: 14px;
}

/* The sea creatures stay at the surface, so they ride upwards as it rises. */
#water .deck-animals {
  height: auto;
  align-items: flex-start;
  padding-top: 1px;
}

#water .deck-animals span {
  animation: swim 0.5s ease;
}

@keyframes swim {
  0% { transform: translateY(-120%) scale(0.4); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

#ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ground-h, 0px);
  background: linear-gradient(180deg, #7fb851 0 62%, #9c7040 62% 100%);
  transition: height 5s ease-in-out;
  z-index: 1;
}

#mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2%;
  font-size: var(--mountain-size, 60px);
  line-height: 1;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 2s ease, transform 4.5s ease;
  /* Same layer as the hull, but earlier in the markup, so the ark comes to
     rest visibly on top of the peaks. */
  z-index: 3;
}

#mountains.risen {
  opacity: 1;
  transform: translateY(0);
}

#rain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  background-image: repeating-linear-gradient(
    104deg,
    rgba(255, 255, 255, 0) 0 6px,
    rgba(255, 255, 255, 0.55) 6px 8px,
    rgba(255, 255, 255, 0) 8px 16px
  );
  background-size: 100% 60px;
}

#rain.pouring {
  opacity: 1;
  animation: rainfall 0.42s linear infinite;
}

@keyframes rainfall {
  from { background-position: 0 0; }
  to { background-position: -14px 60px; }
}

#rainbow-arc {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%) scale(0.4);
  font-size: var(--rainbow-size, 70px);
  line-height: 1;
  opacity: 0;
  transition: opacity 1.8s ease, transform 1.8s ease;
  z-index: 5;
}

#rainbow-arc.shown {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Noah, his wife, his three sons and their three wives (1. Moos. 7:13). */
#family {
  position: absolute;
  right: 0.8%;
  bottom: var(--family-bottom, 0px);
  width: var(--family-w, auto);
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0 0.1em;
  font-size: var(--family-size, 22px);
  line-height: 1;
  opacity: 0;
  z-index: 4;
  transition: opacity 0.6s ease, bottom 1.2s ease;
}

#family.shown {
  opacity: 1;
}

#family span {
  transition: transform 1.6s ease, opacity 1.6s ease;
}

/* Walking in through the door, one after another. */
#family.entering span {
  transform: translateX(-2.2em) scale(0.35);
  opacity: 0;
}

/* Coming back out onto dry ground. */
#family.leaving span {
  transform: translateX(0);
  opacity: 1;
}

#ark-measures {
  margin: 0.4rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: #3d5a75;
}

/* ---------------- The animal being sorted ---------------- */

#prompt-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #ffffff;
  border-radius: 20px;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 5px 0 #6c8ebf;
}

#animal-icon {
  font-size: 3.4rem;
  line-height: 1;
}

#prompt-text {
  display: flex;
  flex-direction: column;
}

#animal-name {
  font-size: 1.6rem;
  font-weight: bold;
}

#question {
  font-size: 0.95rem;
  color: #5a5f7a;
}

#listen-button {
  border: none;
  background: #fff3bf;
  border-radius: 16px;
  font-size: 1.6rem;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  box-shadow: 0 4px 0 #d4a418;
  min-height: 48px;
  min-width: 48px;
}

#feedback {
  min-height: 1.6rem;
  font-weight: bold;
  text-align: center;
}

#feedback.ok { color: #1b5e20; }
#feedback.no { color: #8c1d18; }

/* ---------------- The four destinations ---------------- */

#choice-row {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}

.choice-button {
  border: none;
  border-radius: 18px;
  padding: 0.9rem 0.5rem;
  font-family: inherit;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-height: 96px;
  justify-content: center;
  transition: transform 0.1s ease;
}

.choice-button .choice-icon {
  font-size: 2rem;
  line-height: 1;
}

.choice-button .choice-number {
  font-size: 0.8rem;
  opacity: 0.7;
}

.choice-button:hover { transform: translateY(-4px); }
.choice-button:active { transform: translateY(3px); }

.choice-button[data-ryhma="linnut"] { background: #cfe8ff; box-shadow: 0 6px 0 #5b8db8; }
.choice-button[data-ryhma="nisakkaat"] { background: #ffe2b8; box-shadow: 0 6px 0 #c08a3e; }
.choice-button[data-ryhma="matelijat"] { background: #d5efc9; box-shadow: 0 6px 0 #6a9c52; }
.choice-button[data-ryhma="vesi"] { background: #b6e0f5; box-shadow: 0 6px 0 #2f6fa8; }

.choice-button.wrong { animation: shake 0.35s ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

/* ---------------- The closing story ---------------- */

#story {
  width: 100%;
  max-width: 900px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 5px 0 #6c8ebf;
  padding: 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}

#narration {
  margin: 0;
  font-size: 1.15rem;
  font-weight: bold;
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  animation: fade-line 0.6s ease;
}

@keyframes fade-line {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

#story-buttons {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

#story-buttons button {
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-weight: bold;
  font-size: 1.05rem;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  min-height: 48px;
}

#skip-button {
  background: #eceff4;
  color: #3d4257;
  box-shadow: 0 4px 0 #9aa3b5;
}

#restart-button {
  background: #d7f7dc;
  color: #1b5e20;
  box-shadow: 0 4px 0 #2e7d32;
}

button,
a {
  touch-action: manipulation;
}

@media (hover: none) {
  button:hover,
  a:hover,
  .choice-button:hover {
    transform: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  .kbd-hint,
  .choice-number {
    display: none;
  }
}

@media (max-width: 620px) {
  header h1 { font-size: 1.5rem; }
  #animal-icon { font-size: 2.6rem; }
  #animal-name { font-size: 1.3rem; }
  #choice-row { grid-template-columns: repeat(2, 1fr); }
  .choice-button { min-height: 84px; font-size: 0.9rem; }
  #ark-measures { font-size: 0.7rem; }
  #narration { font-size: 1rem; }
}