/* A tablet held in two hands, at arm's length, by someone with small fingers.
   Big objects, big buttons, nothing that moves unless it means something. */

:root {
  --sky: #eaf4ff;
  --ink: #1d2b3a;
  --button: #ffffff;
  --button-edge: #b9d4ef;
  --answer: #b7e5b1;
  --touch-target: 5.5rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--sky);
  color: var(--ink);
  font-family: system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.game {
  height: 100%;
}

.exercise {
  display: grid;
  grid-template-rows: 1fr auto auto auto; /* stage, praise, ask, options */
  height: 100%;
  padding: 2vmin;
  gap: 1vmin;
}

/* One group to count, or two to compare. Two sit side by side with room between them, so
   it is clear they are two piles and not one. */
.stage {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3vmin;
  min-height: 0;
}

.group {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0.4rem solid transparent;
  border-radius: 2rem;
  background: transparent;
  min-height: 0;
}

/* A group she can tap is a group that looks tappable. */
button.group {
  border-color: var(--button-edge);
  background: var(--button);
  cursor: pointer;
  transition: opacity 350ms ease-out, transform 350ms ease-out, background-color 200ms;
}

button.group.is-dismissed {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

button.group.is-answer {
  background: var(--answer);
  border-color: var(--answer);
}

/* Placements come from the core in group-relative coordinates, so the same Exercise
   arranges itself correctly on any screen. How big each object can be depends on how many
   are sharing the group, which the shell sets as --object-size. */
.object {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(1.5rem, var(--object-size, 11vmin), 7rem);
  line-height: 1;
}

/* The character asks, and asks again as often as she taps it. It sits beside the written
   Prompt because the writing is for whoever is next to her; the voice is for her. */
.ask {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
}

.character {
  flex: none;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 0.3rem solid var(--button-edge);
  border-radius: 50%;
  background: var(--button);
  font-size: clamp(2rem, 7vmin, 3.5rem);
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease-out;
}

.character:active {
  transform: scale(0.92);
}

.prompt {
  margin: 0;
  text-align: center;
  font-size: clamp(1.5rem, 4vmin, 2.5rem);
}

.praise {
  margin: 0;
  min-height: 2.5rem;
  text-align: center;
  font-size: clamp(1.5rem, 5vmin, 3rem);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.praise.is-shown {
  opacity: 1;
  transform: scale(1);
}

.options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2vmin;
  padding-bottom: 1vmin;
}

.option {
  min-height: max(var(--touch-target), 18vh);
  border: 0.4rem solid var(--button-edge);
  border-radius: 1.5rem;
  background: var(--button);
  color: inherit;
  font-family: inherit;
  font-size: clamp(2.5rem, 10vmin, 6rem);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 350ms ease-out, transform 350ms ease-out, background-color 200ms;
}

/* A wrong tap. It leaves, it does not accuse. */
.option.is-dismissed {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.option.is-answer {
  background: var(--answer);
  border-color: var(--answer);
}

/* The end of a Session. One word for whoever is next to her, a Star for every Exercise she
   finished, whatever grew because of them, and two big things to tap — no total, no menu,
   and nothing she has to read. */
.ending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  height: 100%;
  padding: 3vmin;
}

.ending-word {
  margin: 0;
  font-size: clamp(2rem, 7vmin, 4rem);
  font-weight: 700;
}

/* One Star per Exercise, laid out as a row she can count rather than a number she would
   have to read. Nine of them still have to fit across a tablet held in two hands. */
.stars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1vmin;
  max-width: 90vw;
}

.star {
  font-size: clamp(1.5rem, 7vmin, 3.5rem);
  line-height: 1;
  animation: arrive 400ms ease-out backwards;
}

.star:nth-child(2) { animation-delay: 80ms; }
.star:nth-child(3) { animation-delay: 160ms; }
.star:nth-child(4) { animation-delay: 240ms; }
.star:nth-child(5) { animation-delay: 320ms; }
.star:nth-child(6) { animation-delay: 400ms; }
.star:nth-child(7) { animation-delay: 480ms; }
.star:nth-child(8) { animation-delay: 560ms; }
.star:nth-child(9) { animation-delay: 640ms; }
.star:nth-child(n + 10) { animation-delay: 720ms; }

/* What grew while she was playing. Bigger than the Stars, because it is the news. */
.planted {
  display: flex;
  justify-content: center;
  gap: 2vmin;
  min-height: 1px;
}

.new-thing {
  font-size: clamp(3rem, 14vmin, 7rem);
  line-height: 1;
  animation: arrive 600ms 700ms ease-out backwards;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

.choices {
  display: flex;
  align-items: center;
  gap: 6vmin;
}

/* Play again is the big one. The Garden is a place to go, not the thing she is being
   asked, so it sits beside it and is smaller. */
.again,
.to-garden {
  padding: 0;
  border: 0.4rem solid var(--button-edge);
  border-radius: 50%;
  background: var(--button);
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease-out;
}

.again {
  width: max(9rem, 28vmin);
  height: max(9rem, 28vmin);
  font-size: clamp(4rem, 15vmin, 9rem);
}

.to-garden {
  width: max(5.5rem, 17vmin);
  height: max(5.5rem, 17vmin);
  font-size: clamp(2.5rem, 9vmin, 5rem);
}

.again:active,
.to-garden:active {
  transform: scale(0.94);
}

/* Her Garden: everything she has ever grown, and one way out. Nothing here is tappable
   except leaving — nothing can be moved, chosen or lost. */
.garden-screen {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  padding: 3vmin;
  gap: 2vmin;
}

.garden {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 2vmin;
  min-height: 0;
  overflow-y: auto;
}

.grown {
  font-size: clamp(2.5rem, 11vmin, 5.5rem);
  line-height: 1;
}

.leave {
  justify-self: start;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 0.3rem solid var(--button-edge);
  border-radius: 50%;
  background: var(--button);
  font-size: clamp(2rem, 7vmin, 3.5rem);
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease-out;
}

.leave:active {
  transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .option,
  .praise,
  .character,
  .again,
  .to-garden,
  .leave,
  button.group {
    transition-duration: 1ms;
  }

  .star,
  .new-thing {
    animation: none;
  }
}

/* Parent Mode. The one screen in this app written for somebody who can read, and the only
   one that is allowed to be dense: it is a page of numbers to be checked against what was
   just watched happening on the sofa, not a place to spend time.

   It looks nothing like the game on purpose. If it is ever on screen by accident, whoever
   is holding the tablet can see at a glance that it is not hers. */
.parent {
  height: 100%;
  overflow-y: auto;
  padding: 1.5rem;
  background: #fdfdfb;
  font-size: 1rem;
  line-height: 1.4;
  -webkit-user-select: text;
  user-select: text;
}

.parent-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid #d8dee6;
  padding-bottom: 0.75rem;
}

.parent-title {
  margin: 0;
  font-size: 1.5rem;
}

.parent-version {
  margin: 0;
  color: #63758a;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* The way out sits where a way out sits, away from everything that changes anything. */
.parent-leave {
  margin-left: auto;
  width: 3rem;
  height: 3rem;
  border: 1px solid #b9c4d1;
  border-radius: 0.5rem;
  background: var(--button);
  color: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}

.parent-section {
  margin-top: 1.5rem;
}

.parent-subtitle {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.parent-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.parent-table th,
.parent-table td {
  border-bottom: 1px solid #e6eaef;
  padding: 0.35rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}

.parent-table th {
  color: #63758a;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.parent-totals {
  margin: 1.5rem 0 0;
  font-variant-numeric: tabular-nums;
}

.parent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  border-top: 1px solid #d8dee6;
  padding-top: 1rem;
}

.parent-export,
.parent-reset,
.parent-keep,
.parent-wipe {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid #b9c4d1;
  border-radius: 0.5rem;
  background: var(--button);
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}

/* The copy is the button that matters here — it is the only backup that exists. */
.parent-export {
  border-color: #3f6ea8;
  background: #3f6ea8;
  color: #ffffff;
}

.parent-hint {
  flex-basis: 100%;
  margin: 0;
  color: #63758a;
  font-size: 0.85rem;
}

/* Nothing is wiped by one tap. The question appears here, below the button that asked it,
   and the answer that keeps everything is the one that looks like a button. */
.parent-confirm:not(:empty) {
  margin-top: 1rem;
  border: 2px solid #c0392b;
  border-radius: 0.5rem;
  padding: 1rem;
  background: #fff6f5;
}

.parent-question {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.parent-confirm .parent-hint {
  margin-bottom: 0.75rem;
}

.parent-keep {
  border-color: #3f6ea8;
  background: #3f6ea8;
  color: #ffffff;
}

/* Deliberately the plainer of the two, and deliberately not next to where the finger just
   was: the reset button is above this box, and this is the far side of it. */
.parent-wipe {
  margin-left: 0.75rem;
  border-color: #c0392b;
  color: #c0392b;
}

.parent-status:not(:empty) {
  margin-top: 1rem;
  color: #2c6b3f;
}