/* Word Catcher - one stylesheet for every screen. Sized for an iPad held
   either way up: things a child taps are big (vmin units). Fredoka for the
   game's own words, Andika - a font made for children learning to read -
   for anything he reads. */

@font-face
{
  font-family: 'Andika';
  src: url('fonts/andika-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face
{
  font-family: 'Andika';
  src: url('fonts/andika-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* One variable font file, every weight. */
@font-face
{
  font-family: 'Fredoka';
  src: url('fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root
{
  --ink: #161427;
  --paper: #fffaf0;
  --gold: #ffd23f;
  --orb: #5ff2e0;
  --panel: rgba(16, 18, 40, 0.72);
  --good: #4fd66a;
  --bad: #ff5d6c;
  --sky-top: #5fb8ff;
  --sky-bottom: #c9f29b;
}

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

html,
body
{
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1b2340;
  color: #fff;
  font-family: 'Fredoka', 'Andika', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button
{
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

#app
{
  position: fixed;
  inset: 0;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  transition: background 0.6s;
}

/* The look used everywhere something big is tapped: a chunky rounded
   button with a lip underneath that it presses down into. */
.pill
{
  --face: #6a5cff;
  --lip: #3b2fb0;
  background: var(--face);
  background: linear-gradient(var(--face), color-mix(in srgb, var(--face) 80%, #000));
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--lip), 0 9px 0 var(--ink), inset 0 4px 0 rgba(255, 255, 255, 0.35);
  padding: 0.5em 1.2em;
  font-size: clamp(18px, 3.2vmin, 30px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.08s, box-shadow 0.08s;
  margin-bottom: 9px;
}

.pill:active
{
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--lip), 0 3px 0 var(--ink), inset 0 4px 0 rgba(255, 255, 255, 0.35);
}

.pill.go
{
  --face: #3fcf5e;
  --lip: #1f8a38;
}

.pill.gold
{
  --face: #ffc21f;
  --lip: #c98600;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4);
}

.pill.wild
{
  --face: #ff5d8f;
  --lip: #b52456;
}

/* --- top bar -------------------------------------------------------------- */

.topbar
{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

.topbar .spacer
{
  flex: 1;
}

.icon-button
{
  width: clamp(52px, 8vmin, 72px);
  height: clamp(52px, 8vmin, 72px);
  font-size: clamp(26px, 4.5vmin, 40px);
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 18px;
}

.screen-title
{
  font-size: clamp(20px, 4vmin, 38px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 3px 0 var(--ink), 0 0 12px rgba(0, 0, 0, 0.3);
}

/* The orbs toward the next wild critter. */
.orb-meter
{
  display: flex;
  gap: 4px;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 5px 10px;
}

.orb-meter .slot
{
  width: clamp(22px, 3.6vmin, 34px);
  height: clamp(22px, 3.6vmin, 34px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px dashed rgba(255, 255, 255, 0.35);
}

.orb-meter .slot.full
{
  border: none;
  background: none;
}

.orb-meter .slot.full svg
{
  width: 100%;
  height: 100%;
  animation: pop 0.4s ease-out;
}

.holo-charge
{
  font-size: clamp(14px, 2.4vmin, 22px);
  font-weight: 700;
  padding: 6px 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(115deg, #ff9ac8, #ffe07a, #9dffac, #7fe8ff, #b7a4ff);
  background-size: 300% 100%;
  animation: foil-drift 3s ease-in-out infinite alternate;
}

/* --- start screen --------------------------------------------------------- */

.start
{
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
}

.title
{
  font-size: clamp(44px, 11vmin, 120px);
  font-weight: 700;
  line-height: 0.95;
  color: var(--gold);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 0 6px 0 var(--ink), 0 12px 24px rgba(0, 0, 0, 0.3);
  margin: 0 0 0.3em;
  letter-spacing: 0.02em;
}

.start .hero
{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2vmin;
}

.start .hero svg
{
  width: clamp(110px, 22vmin, 230px);
  height: auto;
  animation: bob 2.4s ease-in-out infinite;
}

.start .hero svg:nth-child(2)
{
  animation-delay: 0.3s;
}

.start .hero svg:nth-child(3)
{
  animation-delay: 0.6s;
}

.start .play-button
{
  margin-top: 4vmin;
  font-size: clamp(26px, 5vmin, 48px);
  padding: 0.45em 1.5em;
}

/* --- choosing a first critter ---------------------------------------------- */

.starters
{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  text-align: center;
}

.starter-row
{
  display: flex;
  gap: 3vmin;
  flex-wrap: wrap;
  justify-content: center;
}

.starter
{
  width: clamp(150px, 27vmin, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25) 70%);
  border: 5px solid var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}

.starter svg
{
  width: 92%;
  height: auto;
}

.starter.chosen
{
  transform: scale(1.1);
  border-color: var(--gold);
  box-shadow: 0 0 0 6px var(--gold), 0 0 40px var(--gold);
  animation: bounce 0.8s ease-in-out infinite;
}

.starter-name
{
  font-size: clamp(22px, 4vmin, 36px);
  font-weight: 700;
  min-height: 1.3em;
  text-shadow: 0 3px 0 var(--ink);
}

/* --- home: the region map ---------------------------------------------------- */

.home-body
{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px 24px;
}

.buddy-panel
{
  display: flex;
  align-items: center;
  gap: 3vmin;
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 28px;
  padding: 12px 20px;
  margin: 4px auto 18px;
  max-width: 820px;
}

.buddy-panel .buddy-art
{
  width: clamp(110px, 20vmin, 190px);
  flex-shrink: 0;
  animation: bob 2.6s ease-in-out infinite;
}

.buddy-panel .buddy-art svg
{
  width: 100%;
  height: auto;
  display: block;
}

.buddy-info
{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.buddy-name
{
  font-size: clamp(22px, 4vmin, 38px);
  font-weight: 700;
}

.buddy-name small
{
  font-size: 0.55em;
  opacity: 0.75;
  font-weight: 500;
}

.grow-bar
{
  height: 22px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.grow-bar span
{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7fe8ff, #b7a4ff, #ff9ac8);
  transition: width 0.5s;
}

.grow-note
{
  font-size: clamp(14px, 2.3vmin, 20px);
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.grow-note svg
{
  width: 44px;
  height: auto;
}

.home-actions
{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 0 0 16px;
}

.wild-ready
{
  animation: pulse 1.1s ease-in-out infinite;
}

.worlds
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 22vmin, 220px), 1fr));
  gap: 18px;
}

.world
{
  position: relative;
  aspect-ratio: 1;
  border: 5px solid var(--ink);
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35), inset 0 6px 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.world .peek
{
  position: absolute;
  width: 62%;
  right: -12%;
  bottom: -6%;
  opacity: 0.95;
}

.world .peek svg
{
  width: 100%;
  height: auto;
  display: block;
}

.world .focus
{
  position: relative;
  font-family: 'Andika', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 9vmin, 84px);
  line-height: 1;
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 18px;
  padding: 0.05em 0.25em 0.12em;
  min-width: 1.4em;
  text-align: center;
  margin-top: -8%;
}

.world .name
{
  position: relative;
  margin-top: 8px;
  font-size: clamp(13px, 2.2vmin, 20px);
  font-weight: 700;
  background: var(--panel);
  padding: 2px 10px;
  border-radius: 999px;
}

.world .bar
{
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8%;
  height: 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
}

.world .bar span
{
  display: block;
  height: 100%;
  background: var(--gold);
}

.world .done
{
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: clamp(22px, 4vmin, 36px);
}

.world.locked
{
  filter: grayscale(0.9) brightness(0.55);
}

.world.locked::after
{
  content: '🔒';
  position: absolute;
  font-size: clamp(40px, 9vmin, 80px);
}

/* --- play ----------------------------------------------------------------- */

.play
{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
  position: relative;
}

.world-progress
{
  width: min(40vw, 420px);
  height: 18px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.world-progress span
{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #fff3a8);
  transition: width 0.4s;
}

/* His buddy, watching from the corner, cheering him on. */
.play-buddy
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(90px, 17vmin, 170px);
  pointer-events: none;
}

.play-buddy svg
{
  width: 100%;
  height: auto;
  display: block;
}

.play-buddy.cheer
{
  animation: hop 0.5s ease-out 2;
}

.word-row
{
  display: flex;
  gap: 2.4vmin;
  position: relative;
}

/* A letter stone. */
.tile
{
  position: relative;
  width: clamp(90px, 19vmin, 200px);
  height: clamp(90px, 19vmin, 200px);
  background: linear-gradient(#ffffff, #e9e3f7);
  border: 5px solid var(--ink);
  border-radius: 28%;
  box-shadow: 0 10px 0 #9d93c4, 0 13px 0 var(--ink);
  display: grid;
  place-items: center;
  font-family: 'Andika', sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 12vmin, 128px);
  line-height: 1;
  color: var(--ink);
  transition: transform 0.15s, background 0.2s;
  margin-bottom: 13px;
}

.tile .letter
{
  position: relative;
  z-index: 1;
  margin-top: -0.08em;
}

.tile.next
{
  animation: glow 1s ease-in-out infinite;
}

.tile.heard
{
  background: linear-gradient(#fff6c2, #ffd23f);
  box-shadow: 0 10px 0 #c98600, 0 13px 0 var(--ink), 0 0 26px rgba(255, 210, 63, 0.7);
}

.tile.silent
{
  background: linear-gradient(#f1ebff, #c9b8ff);
  color: #6b52c8;
}

.tile.silent::after
{
  content: '✨';
  position: absolute;
  top: -0.35em;
  right: -0.25em;
  font-size: 0.4em;
}

.tile.pop
{
  transform: scale(1.12) translateY(-6px);
}

.tile.sounding
{
  transform: translateY(-10px) scale(1.08);
  background: linear-gradient(#ffffff, #b8f7ff);
  box-shadow: 0 10px 0 #4fb8c9, 0 13px 0 var(--ink), 0 0 0 6px var(--orb), 0 0 30px var(--orb);
}

.word-row.broken .tile
{
  animation: fly 0.7s ease-in forwards;
}

.reveal
{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(90px, 22vmin, 220px);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s 0.25s, transform 0.4s 0.25s;
}

.word-row.broken .reveal
{
  opacity: 1;
  transform: scale(1);
}

.actions
{
  display: flex;
  gap: 18px;
  align-items: center;
  min-height: clamp(70px, 12vmin, 120px);
}

.blend-button
{
  font-size: clamp(28px, 5vmin, 46px);
  padding: 0.35em 1em;
  animation: pulse 1.1s ease-in-out infinite;
}

.choices
{
  display: flex;
  gap: 3vmin;
}

.choice
{
  width: clamp(110px, 22vmin, 220px);
  height: clamp(110px, 22vmin, 220px);
  font-size: clamp(64px, 14vmin, 140px);
  background: var(--paper);
  border: 5px solid var(--ink);
  border-radius: 30px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}

.choice:active
{
  transform: translateY(4px);
}

.choice.wrong
{
  animation: shake 0.4s;
  opacity: 0.35;
  pointer-events: none;
}

.choice.hint
{
  animation: bounce 0.7s ease-in-out infinite;
  border-color: var(--gold);
}

.choice.right
{
  border-color: var(--good);
  background: #e6ffe0;
}

/* An orb flying up to the meter when a word is read right. */
.float-orb
{
  position: absolute;
  top: 22%;
  width: clamp(50px, 9vmin, 90px);
  animation: rise 1.3s ease-out forwards;
  pointer-events: none;
}

.float-orb svg
{
  width: 100%;
  height: auto;
}

.banner
{
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 999px;
  padding: 10px 26px;
  font-size: clamp(18px, 3.2vmin, 30px);
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  white-space: nowrap;
  animation: pop-in 0.35s ease-out;
  z-index: 5;
}

/* --- cards ----------------------------------------------------------------- */

.card
{
  --type: #888;
  --type-dark: #444;
  position: relative;
  width: clamp(130px, 20vmin, 200px);
  aspect-ratio: 5 / 7;
  border-radius: 14px;
  border: 6px solid #f3d45a;
  background: linear-gradient(160deg, var(--type) 0%, var(--type-dark) 100%);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  padding: 5%;
  color: var(--ink);
  overflow: hidden;
  font-size: clamp(11px, 1.6vmin, 16px);
}

.card.big
{
  width: min(62vmin, 440px);
  border-width: 10px;
  font-size: clamp(16px, 3.2vmin, 28px);
}

.card-top
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 0.4em;
  font-weight: 700;
  font-size: 1.05em;
}

/* The whole name, always - it's something to read. A long one pushes the
   HP down a line rather than being cut short or running into it. */
.card-hp
{
  margin-left: auto;
  font-size: 0.8em;
  white-space: nowrap;
}

/* A small card keeps to the name and picture - the stars say its stage -
   so the picture has room. The big one shows everything. */
.card:not(.big) .card-stage,
.card:not(.big) .hp-number
{
  display: none;
}

.card-stage
{
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

.card-stage span
{
  font-weight: 500;
  letter-spacing: 0;
  font-style: italic;
}

.card-art
{
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 4% 0;
  background: radial-gradient(circle at 50% 65%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.35) 75%);
  border: 3px solid rgba(0, 0, 0, 0.55);
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* The critter is drawn above the foil, so it stays crisp. */
.card-art svg
{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.card-move
{
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 0.85em;
}

.card-stars
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4em;
  font-size: 0.85em;
  margin-top: 4px;
  color: #fff;
  text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink);
}

.holo-tag
{
  font-size: 0.8em;
  font-weight: 700;
  padding: 0 0.4em;
  border-radius: 999px;
  color: var(--ink);
  text-shadow: none;
  background: linear-gradient(115deg, #ff9ac8, #ffe07a, #9dffac, #7fe8ff, #b7a4ff);
}

.card .count
{
  position: absolute;
  bottom: 5px;
  left: 6px;
  z-index: 3;
  background: var(--ink);
  color: #fff;
  font-size: 0.75em;
  border-radius: 8px;
  padding: 0 6px;
}

/* Foil, like the shiny cards in a real pack, three ways:
   - a stage 2 card's picture window is foil - a rainbow drifting across
     it, with a scatter of sparkle on top;
   - a legendary card is foil all over, with a glowing gold edge;
   - a holo card - earned with a run of first tries - is foil all over
     with a silver edge, a light sweeping across it, and its critter lit
     up; a holo legendary gets both.
   On the big card, dragging a finger tilts it and slides the foil with it
   (--foil-x / --foil-y, see tiltable in main.js); otherwise the foil drifts
   on its own. */

.card:not(.unknown).rare,
.card:not(.unknown).legendary,
.card:not(.unknown).holo
{
  transition: transform 0.15s ease-out;
  touch-action: none;
}

.card:not(.unknown).rare .card-art,
.card:not(.unknown).legendary .card-art,
.card:not(.unknown).holo .card-art
{
  background:
    linear-gradient(115deg,
      #ff7ab8 0%, #ffd56b 14%, #8dff9a 28%, #6be3ff 42%, #9f8bff 56%, #ff7ab8 70%, #ffd56b 84%, #8dff9a 100%);
  background-size: 300% 300%;
  background-position: var(--foil-x, 0%) var(--foil-y, 50%);
  animation: foil-drift 5s ease-in-out infinite alternate;
}

.card:not(.unknown).rare .card-art::before,
.card:not(.unknown).legendary .card-art::before,
.card:not(.unknown).holo .card-art::before,
.card:not(.unknown).legendary::after,
.card:not(.unknown).holo::after
{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Two sizes of glint, and a soft white sheen that follows the light. */
  background:
    radial-gradient(circle at var(--foil-x, 30%) var(--foil-y, 30%), rgba(255, 255, 255, 0.7), transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.95) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 255, 255, 0.7) 0.8px, transparent 1.3px);
  background-size: 100% 100%, 18px 18px, 11px 11px;
  background-position: center, 0 0, 5px 7px;
  mix-blend-mode: overlay;
  animation: glint 2.4s ease-in-out infinite;
}

.card:not(.unknown).legendary
{
  border-color: #ffd23f;
  box-shadow: 0 0 22px #ffd23f, 0 6px 0 rgba(0, 0, 0, 0.4);
  background:
    linear-gradient(135deg,
      rgba(255, 122, 184, 0.55) 0%, rgba(255, 213, 107, 0.55) 20%, rgba(141, 255, 154, 0.55) 40%,
      rgba(107, 227, 255, 0.55) 60%, rgba(159, 139, 255, 0.55) 80%, rgba(255, 122, 184, 0.55) 100%),
    linear-gradient(160deg, var(--type) 0%, var(--type-dark) 100%);
  background-size: 300% 300%, 100% 100%;
  background-position: var(--foil-x, 0%) var(--foil-y, 50%), center;
  animation: foil-drift 6s ease-in-out infinite alternate;
}

.card:not(.unknown).holo
{
  border-color: #eef3ff;
  box-shadow: 0 0 0 2px #9fb4d8, 0 0 26px rgba(160, 220, 255, 0.9), 0 6px 0 rgba(0, 0, 0, 0.4);
  background:
    linear-gradient(115deg,
      rgba(255, 122, 184, 0.75) 0%, rgba(255, 213, 107, 0.75) 16%, rgba(141, 255, 154, 0.75) 33%,
      rgba(107, 227, 255, 0.75) 50%, rgba(159, 139, 255, 0.75) 66%, rgba(255, 122, 184, 0.75) 83%, rgba(255, 213, 107, 0.75) 100%),
    linear-gradient(160deg, var(--type) 0%, var(--type-dark) 100%);
  background-size: 400% 400%, 100% 100%;
  background-position: var(--foil-x, 0%) var(--foil-y, 50%), center;
  animation: foil-drift 4s ease-in-out infinite alternate;
}

.card:not(.unknown).holo.legendary
{
  border-color: #ffd23f;
  box-shadow: 0 0 0 2px #fff4b0, 0 0 34px #ffd23f, 0 6px 0 rgba(0, 0, 0, 0.4);
}

/* The light sweeping across a holo card. */
.card:not(.unknown).holo .card-art::after
{
  content: '';
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.75) 50%, transparent 60%);
  animation: sweep 2.8s ease-in-out infinite;
}

.card:not(.unknown).holo .card-art svg
{
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

/* A finger on the card moves the foil itself - no drifting under it. */
.card.touching,
.card.touching .card-art
{
  animation: none;
}

.card.unknown
{
  background: #2b2f48;
  border-color: #50567a;
  color: #8a91b8;
}

.card.unknown.holo
{
  border-color: #6f7aa8;
  border-style: dashed;
}

.card.unknown .card-art
{
  background: rgba(255, 255, 255, 0.07);
}

.card.unknown .card-art svg
{
  opacity: 0.8;
}

.card .new-badge
{
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  background: var(--bad);
  color: #fff;
  font-weight: 700;
  font-size: 0.8em;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  transform: rotate(8deg);
}

.type-grass { --type: #a8ea86; --type-dark: #3f9e4c; }
.type-fire { --type: #ffb48a; --type-dark: #d9482a; }
.type-water { --type: #a8d8ff; --type-dark: #2a7fd4; }
.type-stone { --type: #d8d2c6; --type-dark: #7a7064; }
.type-spark { --type: #fff29a; --type-dark: #e8b81a; }
.type-frost { --type: #e6f8ff; --type-dark: #58a8d8; }
.type-shadow { --type: #c9b3f2; --type-dark: #553a98; }
.type-sky { --type: #f4f8ff; --type-dark: #93a8cc; }

/* --- the Critter Book -------------------------------------------------------- */

.book-body
{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 4px 30px;
}

.book-body h2
{
  margin: 18px 0 10px;
  font-size: clamp(20px, 3.4vmin, 32px);
  text-shadow: 0 3px 0 var(--ink);
}

/* Three across, or six on a wide screen, so each line - baby, middle,
   final - always shares a row. */
.book-grid
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  justify-items: center;
  max-width: 1300px;
  margin: 0 auto;
}

@media (min-width: 900px)
{
  .book-grid
  {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.book-grid > button
{
  width: 100%;
  display: flex;
  justify-content: center;
}

.book-grid .card
{
  width: min(100%, 200px);
}

.book-grid .buddy-mark
{
  position: relative;
}

.book-grid .buddy-mark::after
{
  content: '⭐ BUDDY';
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  z-index: 4;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(11px, 1.6vmin, 15px);
  padding: 1px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}

/* --- overlays: encounters, evolving, big cards ------------------------------- */

#overlay
{
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 24, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  z-index: 10;
  padding: 20px;
  overflow: hidden;
}

#overlay[hidden]
{
  display: none;
}

.overlay-text
{
  font-size: clamp(24px, 4.6vmin, 44px);
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 3px 0 var(--ink);
}

.overlay-buttons
{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* A wild encounter: the critter in the grass, and the orb to throw. */
.encounter
{
  position: relative;
  width: min(90vw, 720px);
  height: min(58vh, 520px);
  border: 5px solid var(--ink);
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
}

.encounter .ground
{
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -18%;
  height: 45%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.25));
}

.encounter .wild
{
  position: absolute;
  left: 50%;
  bottom: 24%;
  width: min(52%, 340px);
  transform: translateX(-50%);
  animation: appear 0.7s ease-out;
}

.encounter .wild svg
{
  width: 100%;
  height: auto;
  display: block;
}

.encounter .wild.caught
{
  animation: suck-in 0.45s ease-in forwards;
}

.encounter.special
{
  box-shadow: 0 0 60px rgba(255, 210, 63, 0.8);
}

.throw-orb
{
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: clamp(80px, 15vmin, 140px);
  transform: translateX(-50%);
  z-index: 3;
  animation: bob 1.4s ease-in-out infinite;
}

.throw-orb svg
{
  width: 100%;
  height: auto;
  display: block;
}

.throw-orb.thrown
{
  animation: throw 0.6s ease-in forwards;
}

.throw-orb.landed
{
  bottom: 18%;
  animation: none;
}

.throw-orb.wobble
{
  animation: orb-wobble 0.6s ease-in-out;
}

.throw-orb.shut
{
  filter: drop-shadow(0 0 20px #fff);
}

.catch-flash
{
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  animation: flash 0.5s ease-out;
}

/* Evolving: the old form and the new one flicker back and forth in white,
   faster and faster, until the new one bursts out. */
.evolve-stage
{
  position: relative;
  width: min(70vmin, 520px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.evolve-stage::before
{
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 65%);
  animation: pulse 0.8s ease-in-out infinite;
}

.evolve-stage .form
{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.evolve-stage .form svg
{
  width: 100%;
  height: auto;
}

.evolve-stage.flicker .form svg
{
  filter: brightness(0) invert(1) drop-shadow(0 0 16px #fff);
}

.evolve-stage .form.hidden
{
  opacity: 0;
}

.evolve-stage.done .form.new
{
  animation: pop 0.6s ease-out;
}

.flip-in
{
  animation: flip-in 0.6s ease-out;
}

.confetti
{
  position: fixed;
  width: 14px;
  height: 14px;
  top: -20px;
  z-index: 20;
  pointer-events: none;
  border-radius: 3px;
  animation: fall 1.8s linear forwards;
}

/* --- voice settings -------------------------------------------------------------- */

.voice-controls
{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.voice-select
{
  font: inherit;
  font-size: 17px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  max-width: 100%;
}

.small-button.chosen
{
  background: var(--good);
}

/* --- the grown-ups' check ------------------------------------------------------ */

.gate
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.gate.shake-once
{
  animation: shake 0.4s;
}

.gate-question
{
  font-size: clamp(32px, 6vmin, 56px);
  font-weight: 700;
}

.gate-answer
{
  display: inline-block;
  min-width: 2.2em;
  border-bottom: 4px solid var(--gold);
  text-align: center;
}

.keypad
{
  display: grid;
  grid-template-columns: repeat(3, clamp(64px, 11vmin, 96px));
  gap: 10px;
}

.key
{
  height: clamp(64px, 11vmin, 96px);
  font-size: clamp(26px, 5vmin, 40px);
  font-weight: 700;
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
}

.key:active
{
  transform: translateY(3px);
}

.key.go
{
  background: var(--good);
}

/* --- grown-ups' corner --------------------------------------------------------- */

.parent
{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  padding: 18px 22px 40px;
  -webkit-user-select: text;
  user-select: text;
  font-family: 'Andika', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
}

.parent h2
{
  margin: 1.2em 0 0.4em;
  font-size: 1.3em;
}

.parent p
{
  margin: 0.4em 0;
  line-height: 1.45;
}

.sound-list
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.sound-row
{
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #d6ccb4;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
}

.sound-row.needed
{
  border-color: var(--bad);
  background: #fff1f1;
}

.sound-row .label
{
  flex: 1;
}

.sound-row .label strong
{
  font-size: 1.3em;
}

.sound-row .status
{
  display: block;
  font-size: 0.8em;
  color: #6b6353;
}

.small-button
{
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 6px 10px;
  background: #f1e8d2;
  color: var(--ink);
  font-size: 1em;
}

.small-button.recording
{
  background: var(--bad);
  color: #fff;
  animation: pulse 0.8s infinite;
}

.small-button.danger
{
  background: #ffe1e1;
  border-color: var(--bad);
}

.stat-grid
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.stat
{
  border: 2px solid #d6ccb4;
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
}

/* --- animations ------------------------------------------------------------ */

@keyframes bob
{
  50% { transform: translateY(-10px); }
}

@keyframes hop
{
  40% { transform: translateY(-28px) scale(1.05); }
}

@keyframes pulse
{
  50% { transform: scale(1.06); }
}

@keyframes pop
{
  0% { transform: scale(0.3); }
  70% { transform: scale(1.15); }
}

@keyframes glow
{
  50% { box-shadow: 0 10px 0 #9d93c4, 0 13px 0 var(--ink), 0 0 0 6px var(--gold), 0 0 30px var(--gold); }
}

@keyframes shake
{
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

@keyframes bounce
{
  50% { transform: translateY(-14px); }
}

@keyframes fly
{
  to { transform: translate(var(--dx, 0), 60vh) rotate(var(--spin, 90deg)); opacity: 0; }
}

@keyframes rise
{
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(-150px) scale(0.6); opacity: 0; }
}

@keyframes pop-in
{
  from { transform: translateX(-50%) scale(0.6); opacity: 0; }
}

@keyframes appear
{
  from { transform: translateX(-50%) translateY(30%) scale(0.5); opacity: 0; }
}

@keyframes suck-in
{
  to { transform: translateX(-50%) translateY(10%) scale(0.05); opacity: 0; filter: brightness(3); }
}

@keyframes throw
{
  0% { transform: translateX(-50%) translateY(0) rotate(0); }
  50% { transform: translateX(-50%) translateY(-45vh) rotate(360deg) scale(0.8); }
  100% { transform: translateX(-50%) translateY(-14vh) rotate(720deg) scale(0.7); }
}

@keyframes orb-wobble
{
  25% { transform: translateX(-50%) rotate(-22deg); }
  75% { transform: translateX(-50%) rotate(22deg); }
}

@keyframes flash
{
  30% { opacity: 0.9; }
}

@keyframes flip-in
{
  from { transform: perspective(800px) rotateY(90deg) scale(0.7); }
}

@keyframes foil-drift
{
  from { background-position: 0% 30%; }
  to { background-position: 100% 70%; }
}

@keyframes sweep
{
  0% { transform: translateX(-60%); }
  60%, 100% { transform: translateX(60%); }
}

@keyframes glint
{
  50% { opacity: 0.45; }
}

@keyframes fall
{
  to { transform: translateY(110vh) rotate(540deg); }
}

@media (prefers-reduced-motion: reduce)
{
  *,
  *::before,
  *::after
  {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}