/* El Hormiguero — a hand-drawn picture book that you can touch. */
:root {
  --ink: #2e1a10;
  --paper: #f7eed8;
  --paper-2: #efe0bd;
  --soil: #8a5a35;
  --soil-deep: #4e2f1b;
  --grass: #79a33e;
  --grass-dark: #4d7a28;
  --amber: #f0a92e;
  --amber-deep: #d9822b;
  --cream: #fffaf0;
  --bar-h: 84px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#app {
  display: grid;
  grid-template-rows: calc(var(--bar-h) + var(--safe-top)) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

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

/* ---------- top bar ---------- */
.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--safe-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--grass-dark);
  border-bottom: 4px solid var(--ink);
  position: relative;
  z-index: 20;
}
.bar::after {
  /* little grass fringe hanging from the bar */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -14px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12'%3E%3Cpath d='M0 0 Q6 12 10 2 Q16 12 22 1 Q28 11 34 0 Q40 12 46 2 Q52 11 60 0 Z' fill='%234d7a28' stroke='%232e1a10' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
  pointer-events: none;
}
.bar-btn {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: var(--cream);
  box-shadow: 0 4px 0 var(--ink);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  touch-action: manipulation;
}
.bar-btn svg { width: 40px; height: 40px; }
.bar-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.bar-btn[hidden] { display: none; }
#btn-sound .cross { display: none; }
#btn-sound.muted .cross { display: inline; }
#btn-sound.muted .waves { display: none; }
#btn-sound.muted { background: #e9dcc0; }
.bar-title {
  flex: 1;
  min-width: 0;
  color: var(--cream);
  font-weight: 800;
  font-size: clamp(20px, 4.6vw, 32px);
  letter-spacing: .01em;
  text-shadow: 0 2px 0 var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

:focus { outline: none; }
:focus-visible {
  outline: 5px solid #1b3a8c;
  outline-offset: 3px;
  box-shadow: 0 0 0 9px var(--cream);
}
.bar-btn:focus-visible { box-shadow: 0 0 0 9px var(--cream); }

/* ---------- screens ---------- */
main { position: relative; min-height: 0; overflow: hidden; }
.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.screen[hidden] { display: none !important; }

/* ---------- home ---------- */
.screen-home { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.home-grid {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 10px;
  padding: 18px 14px calc(18px + var(--safe-bottom));
  max-width: 1400px;
  margin: 0 auto;
}
.home-hero { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.title {
  margin: 4px 0 12px;
  font-size: clamp(40px, 11vw, 84px);
  line-height: 1;
  font-weight: 900;
  color: var(--amber);
  letter-spacing: .01em;
  text-align: center;
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    0 7px 0 var(--ink);
  transform: rotate(-2deg);
}
.title span { color: var(--cream); font-size: .62em; vertical-align: .18em; }
.hero { width: 100%; max-width: 720px; }
.hero-svg { display: block; width: 100%; height: auto; max-height: 46vh; }
.hero-ant { cursor: pointer; outline: none; }
.hero-ant:focus-visible .hero-ant-glow { opacity: .8; stroke: #1b3a8c; stroke-width: 6; }

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.tile {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 2px;
  min-height: 132px;
  padding: 8px 8px 10px;
  text-decoration: none;
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 26px 34px 24px 30px / 30px 24px 34px 26px;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .14s ease, box-shadow .14s ease;
  touch-action: manipulation;
}
.tile:nth-child(2n) { border-radius: 32px 24px 30px 26px / 24px 32px 26px 30px; }
.tile:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.tile-sendero { background: #dcebb6; }
.tile-nido { background: #f0d3a5; }
.tile-comida { background: #fbe0a6; }
.tile-cuaderno { background: #f4e9d2; }
.tile-art { width: 100%; max-width: 190px; }
.tile-art svg { display: block; width: 100%; height: auto; }
.tile-label { font-weight: 800; font-size: 21px; line-height: 1.1; text-align: center; }
.tile .stamp { position: absolute; top: -10px; right: -8px; width: 40px; height: 40px; display: none; transform: rotate(10deg); }
.tile.has-stamp .stamp { display: block; }

@media (min-aspect-ratio: 5/4) and (min-width: 760px) {
  .home-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    align-content: center;
    gap: 28px;
    padding: 18px 28px 24px;
  }
  .hero-svg { max-height: calc(100dvh - var(--bar-h) - 170px); }
  .tiles { gap: 20px; }
  .tile { min-height: 210px; }
  .tile-art { max-width: 240px; }
  .tile-label { font-size: 28px; }
}
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .hero-svg { max-height: 52vh; }
  .tile { min-height: 110px; }
  .tile-art { max-width: 120px; }
}

/* ---------- the ant (svg) ---------- */
.ant .leg { transform-box: fill-box; transform-origin: 0 0; }
.ant .leg.l3 { transform-origin: 100% 0; }
.ant .antenna { transform-box: fill-box; transform-origin: 0 100%; }
.ant.walking .near .l1, .ant.walking .near .l3, .ant.walking .far .l2 { animation: legA .42s ease-in-out infinite alternate; }
.ant.walking .near .l2, .ant.walking .far .l1, .ant.walking .far .l3 { animation: legB .42s ease-in-out infinite alternate; }
@keyframes legA { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes legB { from { transform: rotate(12deg); } to { transform: rotate(-12deg); } }
.ant.waving .antenna.a1 { animation: wave .55s ease-in-out 4 alternate; }
.ant.waving .antenna.a2 { animation: wave .55s ease-in-out .1s 4 alternate; }
.ant.waving .antenna-tip { opacity: 0; }
@keyframes wave { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
.ant.ambient .antenna.a1 { animation: sniff 3.2s ease-in-out infinite; }
@keyframes sniff { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-9deg); } 90% { transform: rotate(5deg); } }

.hero-hint { animation: hint 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; opacity: .8; }
@keyframes hint { 0%, 100% { transform: scale(.95); opacity: .35; } 50% { transform: scale(1.03); opacity: .95; } }
.sun-rays { animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- caption, toast, demo ---------- */
.caption {
  position: fixed;
  left: 50%;
  top: calc(var(--bar-h) + var(--safe-top) + 20px);
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(92vw, 760px);
  padding: 10px 18px 10px 10px;
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 28px 30px 26px 32px;
  box-shadow: 0 5px 0 var(--ink);
  font-size: clamp(19px, 4.6vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
  animation: rise .35s ease-out;
}
.caption[hidden] { display: none; }
/* on the menu and the notebook the top holds what is being talked about: speak from below */
body[data-screen="home"] .caption, body[data-screen="cuaderno"] .caption {
  top: auto;
  bottom: calc(14px + var(--safe-bottom));
}
.caption.out { opacity: 0; transition: opacity .35s ease; }
.caption-ant { flex: none; width: 52px; height: 44px; }
@keyframes rise { from { transform: translate(-50%, 16px); opacity: 0; } }

.toast-card {
  position: fixed;
  top: calc(var(--bar-h) + var(--safe-top) + 20px);
  left: 50%;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 92vw;
  padding: 8px 18px 8px 8px;
  background: #fff8e8;
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 6px 0 var(--ink);
  pointer-events: none;
  transform: translateX(-50%) rotate(-1.5deg);
  animation: cardIn .6s cubic-bezier(.3, 1.5, .5, 1);
}
.toast-card[hidden] { display: none; }
.toast-card.out { opacity: 0; transform: translateX(-50%) translateY(-14px); transition: opacity .45s ease, transform .45s ease; }
.toast-art { width: 120px; flex: none; }
.toast-art svg { width: 100%; height: auto; display: block; }
.toast-text { display: grid; }
.toast-kicker { font-weight: 900; font-size: 18px; color: #8a4a12; }
.toast-title { font-weight: 900; font-size: 24px; }
@keyframes cardIn { from { transform: translateX(-50%) rotate(-8deg) scale(.4); opacity: 0; } }

.demo { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.demo[hidden] { display: none; }
.demo-line { position: absolute; inset: 0; }
.demo-hand, .demo-ghost { position: absolute; left: 0; top: 0; will-change: transform; }
.demo-hand svg { display: block; transform: translate(-12px, -6px) rotate(-12deg); transform-origin: 12px 6px; }
.demo-ghost svg { display: block; transform: translate(-40px, -40px); opacity: .85; }

.noscript { padding: 24px; font-size: 22px; }

/* ---------- reduced motion: ambient decoration stops ---------- */
@media (prefers-reduced-motion: reduce) {
  .ant.ambient .antenna.a1, .hero-hint, .sun-rays, .amb, .ant.walking .leg { animation: none !important; }
  .caption, .toast-card { animation: none; }
  .tile, .bar-btn { transition: none; }
}

/* ---------- cuaderno ---------- */
.screen-cuaderno { overflow-y: auto; overflow-x: hidden; }
.book { padding: 22px 14px calc(110px + var(--safe-bottom)); max-width: 1180px; margin: 0 auto; }
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: 18px;
}
.card {
  width: 100%;
  min-height: 160px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 4px;
  padding: 8px 8px 10px;
  border: 4px solid var(--ink);
  border-radius: 16px 20px 14px 18px;
  background: #fffaf0;
  box-shadow: 0 5px 0 var(--ink);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transform: rotate(var(--tilt));
  touch-action: manipulation;
}
.card.locked { background: #d9c7a3; }
.card-art svg { display: block; width: 100%; height: auto; }
.card-hidden { display: block; filter: grayscale(1) contrast(.5) brightness(1.25); opacity: .5; }
.card-title { font-weight: 900; font-size: 21px; }
.card.flip { animation: flip .5s ease; }
@keyframes flip { 50% { transform: rotate(var(--tilt)) scale(1.06); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } .card-title { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .card.flip { animation: none; } }

/* ---------- sendero ---------- */
.screen-sendero { background: #a8c36a; }
.field {
  position: absolute;
  inset: 0;
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}
.sk {
  position: absolute;
  left: 0; top: 0;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}
.sk:focus-visible { outline: 5px solid #1b3a8c; outline-offset: 2px; box-shadow: 0 0 0 9px rgba(255, 250, 240, .9); }

/* ---------- nido ---------- */
.screen-nido { background: #8a5a35; }
.nest-stage { position: absolute; inset: 0; }
.nest-svg { display: block; width: 100%; height: 100%; }
.tunnel-edge { fill: none; stroke: #2e1a10; stroke-width: 56; stroke-linecap: round; }
.tunnel { fill: none; stroke: #b98856; stroke-width: 46; stroke-linecap: round; }
.chamber { cursor: pointer; outline: none; }
.ch-bg { fill: #c99a64; transition: fill .8s ease; }
.chamber.lit .ch-bg { fill: #f2cd8c; }
.ch-shade { fill: #3b2416; opacity: .62; transition: opacity .9s ease; pointer-events: none; }
.chamber.lit .ch-shade { opacity: 0; }
.ch-rim { fill: none; stroke: #2e1a10; stroke-width: 5; }
.ch-invite { fill: none; stroke: #f6d38f; stroke-width: 6; stroke-dasharray: 14 14; opacity: .8; animation: invite 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.chamber.lit .ch-invite { display: none; }
@keyframes invite { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
.ch-focus { fill: none; stroke: #1b3a8c; stroke-width: 9; opacity: 0; }
.chamber:focus-visible .ch-focus { opacity: 1; }
.ch-badge { display: none; }
.chamber.lit .ch-badge { display: inline; }
.chamber:active .ch-bg { fill: #f6dcaa; }

.mv { transform-box: fill-box; transform-origin: 50% 100%; }
.m-newegg, .m-born, .m-spark { opacity: 0; transition: opacity .6s ease; }
.chamber.lit .m-newegg, .chamber.lit .m-born { opacity: 1; }
.play .m-queen { animation: bob .7s ease-in-out 2 alternate; }
.play .m-newegg { animation: lay 1.6s ease-out; }
.play .m-wiggle { animation: wiggle .45s ease-in-out 4 alternate; }
.play .m-wiggle.d2 { animation-delay: .15s; }
.play .m-wiggle.d3 { animation-delay: .3s; }
.play .m-feed { animation: feed 2.2s ease-in-out; }
.play .m-rock { animation: rock .5s ease-in-out 4 alternate; }
.play .m-rock.d2 { animation-delay: .2s; }
.play .m-born { animation: born 1.8s ease-out; }
.play .m-bring { animation: bring 2s ease-out; }
.play .m-sweep { animation: sweep 2.4s ease-in-out; }
.play .m-tend { animation: tend .6s ease-in-out 3 alternate; }
.play .m-left { animation: meetL 2.4s ease-in-out; }
.play .m-right { animation: meetR 2.4s ease-in-out; }
.play .m-left .antenna.a1, .play .m-right .antenna.a1 { animation: wave .4s ease-in-out 6 alternate; }
.play .m-spark { animation: spark 2.4s ease-in-out; }
.play .m-feed .near .l1, .play .m-feed .near .l3, .play .m-feed .far .l2,
.play .m-bring .near .l1, .play .m-bring .near .l3, .play .m-bring .far .l2,
.play .m-sweep .near .l1, .play .m-sweep .near .l3, .play .m-sweep .far .l2 { animation: legA .3s ease-in-out 7 alternate; }
.play .m-feed .near .l2, .play .m-feed .far .l1, .play .m-feed .far .l3,
.play .m-bring .near .l2, .play .m-bring .far .l1, .play .m-bring .far .l3,
.play .m-sweep .near .l2, .play .m-sweep .far .l1, .play .m-sweep .far .l3 { animation: legB .3s ease-in-out 7 alternate; }
@keyframes bob { to { transform: translateY(-6px); } }
@keyframes lay { 0% { transform: translate(90px, -20px) scale(.3); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes wiggle { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes feed { 0%, 100% { transform: none; } 45%, 60% { transform: translateX(-34px); } }
@keyframes rock { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes born { 0% { transform: translateX(-60px) scale(.4); opacity: 0; } 50% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes bring { from { transform: translateX(110px); } to { transform: none; } }
@keyframes sweep { 0%, 100% { transform: none; } 50% { transform: translateX(-46px); } }
@keyframes tend { to { transform: rotate(-6deg); } }
@keyframes meetL { 0%, 100% { transform: none; } 30%, 75% { transform: translateX(10px); } }
@keyframes meetR { 0%, 100% { transform: none; } 30%, 75% { transform: translateX(-10px); } }
@keyframes spark { 0%, 20% { opacity: 0; transform: scale(.4); } 40%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ch-invite { animation: none !important; }
  .play .mv, .play .mv * { animation: none !important; }
  .ch-bg, .ch-shade { transition: none; }
}

/* ---------- comida ---------- */
.screen-comida { background: #8a5a35; }
.food-stage { position: absolute; inset: 0; }
.food-svg { display: block; width: 100%; height: 100%; touch-action: none; }
.food-svg .hit { fill: transparent; pointer-events: all; }
.item { cursor: grab; outline: none; }
.item.dragging { cursor: grabbing; }
.item-glow { fill: #fff6dc; stroke: #c4621a; stroke-width: 8; stroke-dasharray: 14 10; opacity: 0; transition: opacity .25s ease; }
.item:focus-visible .item-glow { opacity: 1; stroke: #1b3a8c; stroke-width: 9; stroke-dasharray: none; }
.item.selected .item-glow, .item.dragging .item-glow { opacity: .9; }
.item-art { transform-box: fill-box; transform-origin: 50% 100%; }
.item.selected .item-art { animation: lift .6s ease-in-out infinite alternate; }
@keyframes lift { to { transform: translateY(-10px); } }
.target-ring { fill: rgba(255, 246, 220, .35); stroke: #f0a92e; stroke-width: 11; stroke-dasharray: 20 12; opacity: 0; transition: opacity .3s ease; }
.has-selection .target-ring, .entrance-target.hint .target-ring { opacity: .95; animation: invite 1.6s ease-in-out infinite; }
.entrance-target.near .target-ring { opacity: 1; stroke: #f0a92e; }
.entrance-target, .pantry-target { cursor: pointer; outline: none; }
.entrance-target:focus-visible .target-ring, .pantry-target:focus-visible .target-ring { opacity: 1; stroke: #1b3a8c; }
.brood .m-wiggle { scale: var(--fed, 1); }
.brood.play .m-wiggle { animation: wiggle .4s ease-in-out 5 alternate; }
.brood.play .m-wiggle.d2 { animation-delay: .12s; }
.brood.play .m-wiggle.d3 { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .item.selected .item-art, .has-selection .target-ring, .entrance-target.hint .target-ring, .brood.play .m-wiggle { animation: none !important; }
}