/* Egg Hunt. */
/* Set here rather than inherited: a topic page centres everything its embedded game leaves unset. */
.egh { position: relative; width: 100%; text-align: center; }

.egh-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
  margin: 0 0 4px; min-height: 36px; text-align: left;
}
.egh-where { display: flex; flex-direction: column; line-height: 1.2; }
.egh-name { font-weight: 800; font-size: 1.06rem; color: var(--c-text); }
.egh-step { font-size: .8rem; color: var(--c-text-soft); }
.egh-trail { display: inline-flex; align-items: center; gap: 5px; }
.egh-trail-egg { width: 15px; height: 18px; transition: opacity .4s ease, filter .4s ease; }
.egh-trail-egg.is-later { filter: grayscale(1); opacity: .3; }
.egh-trail-egg.is-now { animation: egh-breathe 1.8s ease-in-out infinite; }
@keyframes egh-breathe { 50% { transform: translateY(-2px) scale(1.12); } }

.egh-say {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.7em; margin: 0 0 8px; padding: 0 6px;
  font-size: .9rem; line-height: 1.3; color: var(--c-text-soft);
}
.egh-rules { display: flex; justify-content: center; align-items: stretch; gap: 6px; width: 100%; }
.egh-rule {
  display: flex; align-items: center; justify-content: center; flex: 0 1 auto; max-width: 240px;
  padding: 5px 11px; border-radius: 10px;
  background: #f3f8ee; border: 1px solid #dbe8cf; color: var(--c-text);
  font-size: .82rem; font-weight: 600; line-height: 1.25; text-align: center;
}
.egh-lives { display: flex; justify-content: center; gap: 6px; margin: -2px 0 8px; }
.egh-heart { width: 24px; height: 24px; overflow: visible; }
.egh-heart path { fill: #ff5a7a; }
.egh-heart.is-lost path { fill: #e2dadd; }
.egh-heart.egh-heart-break { animation: egh-heart-break .6s ease both; }
@keyframes egh-heart-break {
  0% { transform: scale(1.35); } 30% { transform: scale(.75) rotate(-14deg); }
  60% { transform: scale(1.1) rotate(9deg); } 100% { transform: none; }
}
.egh-say.is-coach { color: var(--c-text); font-weight: 650; }
.egh-say.is-hint { color: #2f6a31; font-weight: 650; }
/* The walkthrough's line breathes in the colour and rhythm of the halo on the square it
   points at (egh-halo). Inset no wider than .egh-say's side padding, or it overflows a phone. */
.egh-say-text { position: relative; isolation: isolate; }
.egh-say.is-coach .egh-say-text::before {
  content: ''; position: absolute; inset: -3px -6px; z-index: -1; border-radius: 10px;
  background: rgba(255, 196, 60, .22); box-shadow: 0 0 0 1px rgba(255, 196, 60, .35);
  animation: egh-say-glow 1.6s ease-in-out infinite;
}
@keyframes egh-say-glow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.egh-stage { position: relative; width: 100%; display: grid; place-items: center; }
.egh-defs { position: absolute; width: 0; height: 0; }
.egh-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* The board: a grid of beds, the cells parted by white gaps. Its size is set by egg-hunt.js. */
.egh-board {
  position: relative; display: grid; gap: 5px; padding: 8px; border-radius: 18px; background: #fff;
  grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  box-shadow: 0 8px 22px rgba(40, 70, 30, .18);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.egh-cell {
  position: relative; display: grid; place-items: center;
  margin: 0; padding: 0; border: 0; border-radius: 20%; min-width: 0; min-height: 0;
  background-color: var(--bed);
  background-image: radial-gradient(90% 90% at 30% 25%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 60%);
  color: var(--deep); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.egh-cell:focus-visible { outline: 3px solid #2d5b88; outline-offset: -3px; z-index: 2; }
/* A touch taller than its square: the egg may reach into the gaps. */
.egh-cell > .egh-egg {
  width: 91.5%; height: 103%; overflow: visible; transform-origin: 50% 90%;
  filter: drop-shadow(0 2px 1.5px rgba(60, 40, 20, .3));
}
/* White, with the bed's own deep colour as a soft outline so it shows on the palest beds. */
.egh-cell > .egh-xm {
  width: 70%; height: 70%; overflow: visible;
  filter: drop-shadow(0 0 1.2px var(--deep)) drop-shadow(0 1.5px 1.5px rgba(40, 30, 20, .25));
}
.egh-cell.is-bad {
  background-image: repeating-linear-gradient(45deg, rgba(214, 48, 49, .2) 0 5px, rgba(214, 48, 49, 0) 5px 10px);
}
.egh-cell.is-bad::after {
  content: ''; position: absolute; inset: 9%; border-radius: 50%;
  border: 3px solid rgba(206, 45, 55, .85); pointer-events: none;
}
/* The square to act on: a ring in its bed's own deep colour, inside the square itself. Never
   white (the gaps are white), never a fixed colour (gold vanished on the yellow, orange and tan
   beds), never spilling into the gaps. */
.egh-cell.is-target { z-index: 2; animation: egh-halo 1.6s ease-in-out infinite; }
@keyframes egh-halo {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--deep); }
  50% { box-shadow: inset 0 0 0 5px var(--deep); }
}

/* An egg drops into its square, squashes on landing and bounces once. */
.egh-cell.egh-new > .egh-egg { animation: egh-drop .62s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes egh-drop {
  0% { transform: translateY(-80%) scale(.5); opacity: 0; }
  40% { transform: translateY(0) scale(1.18, .8); opacity: 1; }
  60% { transform: translateY(-14%) scale(.94, 1.08); }
  78% { transform: translateY(0) scale(1.05, .95); }
  100% { transform: none; }
}
/* An egg set where none is hidden: it lands, rocks, cracks and falls away over the cross. */
.egh-crack {
  position: absolute; inset: 0; margin: auto; width: 91.5%; height: 103%; overflow: visible;
  pointer-events: none; animation: egh-crack .75s ease forwards;
}
@keyframes egh-crack {
  0% { transform: scale(.6); opacity: 0; } 25% { transform: scale(1.05); opacity: 1; }
  45% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); }
  100% { transform: translateY(18%) scale(.7); opacity: 0; }
}
/* --dl: how many squares out from the egg that crossed it, so its crosses ripple outward. */
.egh-cell.egh-new > .egh-xm { animation: egh-mark .3s cubic-bezier(.2, 1.6, .4, 1) calc(var(--dl, 0) * 45ms) both; }
@keyframes egh-mark { from { transform: scale(.3) rotate(-35deg); opacity: 0; } }
/* After the pop, so a wrong egg shakes instead of landing. */
.egh-cell.is-bad > .egh-egg { animation: egh-shake .45s ease both; }
@keyframes egh-shake {
  20% { transform: translateX(-9%) rotate(-7deg); } 40% { transform: translateX(8%) rotate(6deg); }
  60% { transform: translateX(-5%) rotate(-4deg); } 80% { transform: translateX(3%); }
}
.egh-found .egh-cell { filter: saturate(1.12) brightness(1.03); transition: filter .6s ease; }
.egh-found .egh-cell.is-egg > .egh-egg { animation: egh-wobble .7s ease-in-out calc(var(--w, 0) * 90ms) 2 both; }
@keyframes egh-wobble {
  25% { transform: translateY(-14%) rotate(-10deg); } 50% { transform: none; }
  75% { transform: translateY(-7%) rotate(8deg); }
}
.egh-arrive .egh-cell { animation: egh-arrive .5s ease-out calc(var(--i, 0) * 32ms) both; }
@keyframes egh-arrive { from { opacity: 0; transform: scale(.55); } }

/* Previous and next garden: placed by egg-hunt.js (--nav-x, --nav-y), beside the board or, with
   no room there, at the ends of the title bar, whose sides then keep clear for them. */
.egh-nav {
  position: absolute; z-index: 5; top: var(--nav-y, 50%); transform: translateY(-50%);
  display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0;
  background: none; cursor: pointer; transition: transform .08s ease, filter .15s ease;
}
.egh-nav[hidden] { display: none; }
.egh-nav-prev { left: var(--nav-x, 0px); }
.egh-nav-next { right: var(--nav-x, 0px); }
.egh-arrow { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 5px rgba(30, 70, 40, .22)); }
.egh-nav:hover:not(:disabled) { filter: brightness(1.06); }
.egh-nav:active:not(:disabled) { transform: translateY(calc(-50% + 2px)); }
.egh-nav.is-locked { cursor: default; }
.egh.egh-tight .egh-bar { padding: 0 56px; }
.egh.egh-tight .egh-nav { width: 48px; height: 48px; }
.egh-controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0 2px; }
.egh-ctl {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
  font: inherit; font-size: .88rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.egh-ctl:hover { background: var(--c-bg); }
.egh-ctl:disabled { opacity: .45; cursor: default; }
.egh-ctl:disabled:hover { background: var(--c-surface); }
.egh-badge {
  display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .3em;
  border-radius: 999px; background: #4f9a44; color: #fff; font-size: .75em; font-weight: 800; line-height: 1;
}
.egh-ctl:disabled .egh-badge { background: #9aa39a; }
.egh-switch {
  position: relative; flex: none; width: 26px; height: 15px; border-radius: 999px;
  background: #cdd5c6; transition: background .2s ease;
}
.egh-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s ease;
}
.egh-toggle[aria-pressed="true"] .egh-switch { background: #4f9a44; }
.egh-toggle[aria-pressed="true"] .egh-switch::after { transform: translateX(11px); }
.egh-icon { width: 1.1em; height: 1.1em; flex: none; }

/* A garden's card and the hunt's result land on the stage, anchored to the bottom. */
.egh-win { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; justify-content: center; padding: 10px; pointer-events: none; }
.egh-win:empty { display: none; }
/* A garden found and the hunt's result sit in the middle of the stage. */
.egh-win.is-mid { align-items: center; }
.egh-win-card {
  position: relative; pointer-events: auto; width: min(440px, 94%);
  max-height: 100%; overflow-y: auto;
  padding: 14px 20px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 12px 34px rgba(28, 40, 30, .3);
  text-align: center;
  animation: egh-win-in .35s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes egh-win-in { from { opacity: 0; transform: translateY(12px); } }
.egh-kicker { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4f8a3f; }
.egh .egh-card-title { margin: 2px 0 4px; font-size: 1.3rem; line-height: 1.25; color: var(--c-text); }
.egh-line { margin: 0 0 4px; font-size: .95rem; font-style: italic; color: var(--c-text-soft); }
.egh-next {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0;
  border: 0; background: #4f9a44; color: #fff;
  font: inherit; font-size: .95rem; font-weight: 700; padding: 9px 18px 9px 20px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(60, 120, 50, .3);
}
.egh-next:hover { background: #438a39; }
.egh-win-card .result-card { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
/* The finished hunt: one egg per garden drops into the card in turn, then they rock. The rock
   starts after each drop has ended, so the two transform animations never overlap. */
.egh-basket { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px 5px; margin: 10px 0 6px; }
.egh-basket-egg {
  width: 24px; height: 28px; overflow: visible; transform-origin: 50% 90%;
  filter: drop-shadow(0 2px 1.5px rgba(60, 40, 20, .3));
  animation:
    egh-drop .62s cubic-bezier(.3, .7, .4, 1) calc(var(--k) * 130ms + 150ms) both,
    egh-rock 2.4s ease-in-out calc(var(--k) * 130ms + 900ms) infinite;
}
@keyframes egh-rock { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
/* Eggs tumbling down the stage behind the result card. */
.egh-rain { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.egh-rain-egg {
  position: absolute; top: -60px; left: var(--x); width: 28px; height: 34px; overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(60, 40, 20, .25));
  animation: egh-fall var(--t) cubic-bezier(.4, .1, .7, 1) var(--d) both;
}
@keyframes egh-fall {
  from { transform: translateY(0) rotate(0) scale(var(--s)); }
  to { transform: translateY(var(--fall)) rotate(var(--r)) scale(var(--s)); }
}
.egh-win-card .result-done { font-size: 1.35rem; margin: 0 0 2px; }
.egh-tally { margin: 0; font-size: .88rem; color: var(--c-text-soft); }
.egh-feel { margin: 12px 0 0; font-size: .92rem; font-weight: 700; }
.egh-moods { display: flex; justify-content: center; gap: 10px; margin: 6px 0 0; }
.egh-mood {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 76px;
  border: 1px solid var(--c-border); background: rgba(255, 255, 255, .7); color: var(--c-text-soft);
  font: inherit; font-size: .8rem; font-weight: 600; padding: 6px 8px; border-radius: 12px; cursor: pointer;
}
.egh-mood .egh-icon { width: 30px; height: 30px; }
.egh-mood:hover { color: var(--c-text); background: #fff; }
.egh-mood.on { color: var(--c-primary-dark, var(--c-primary)); border-color: var(--c-primary); background: #fff; }
.egh-note { display: block; min-height: 1.3em; margin: 6px 0 0; font-size: .85rem; color: var(--c-text-soft); }
/* Favorite, Share and New hunt carry the same weight, so they wear the same style. */
.egh-acts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.egh-act {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--c-border); background: #fff; color: var(--c-text);
  font: inherit; font-size: .88rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer;
}
.egh-act:hover { border-color: var(--c-primary); }
.egh-act.on { color: #d6456b; border-color: #efb3c3; }
.egh-win-close {
  position: absolute; top: 4px; right: 8px;
  border: 0; background: none; color: var(--c-text-soft);
  font: inherit; line-height: 1; padding: 6px; cursor: pointer; border-radius: 8px;
}
.egh-win-close .egh-icon { width: 1.1rem; height: 1.1rem; }
.egh-win-close:hover { background: var(--c-bg); color: var(--c-text); }
.egh-win-reopen {
  pointer-events: auto;
  border: 1px solid var(--c-border); background: rgba(255, 255, 255, .94); color: var(--c-text);
  font: inherit; font-size: .85rem; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(28, 32, 50, .18);
}

@media (max-width: 640px) {
  .game-root[data-game="egg-hunt"] { padding: 12px 8px 14px; }
  .egh-controls { gap: 5px; }
  .egh-ctl { gap: 4px; padding: 6px 8px; font-size: .78rem; }
}
/* Four buttons on one row at phone width: the first three keep their words and drop the icon. */
@media (max-width: 420px) {
  .egh-ctl:not(:last-child) .egh-icon { display: none; }
}

/* Inside the page-filling panel: the rows keep their height and the stage takes the rest;
   egg-hunt.js reads the stage's size back off it. */
html.fills-window .game-root:not(.egh-fs) .egh { display: flex; flex-direction: column; height: 100%; }
html.fills-window .game-root:not(.egh-fs) .egh > :not(.egh-stage) { flex: none; }
html.fills-window .game-root:not(.egh-fs) .egh-stage { flex: 1 1 0; min-height: 0; }

/* #game-root is itself the element that goes full screen; these same rules are the
   fixed-position fallback for a browser without the Fullscreen API. game-layout.css gives a
   [data-fill] panel an explicit width and height, which would beat the fallback's inset. */
#game-root.egh-fs {
  position: fixed; inset: 0; z-index: 200; margin: 0; padding: 10px 12px 12px;
  width: auto; height: auto;
  border: 0; border-radius: 0; box-shadow: none; min-height: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #f4f9ec 0%, #e4f0d8 55%, #d3e5c2 100%);
}
.egh-fs .egh { width: 100%; }
/* FS_CHROME in egg-hunt.js is sized against these rows. */
.egh-fs .egh-bar { max-width: 760px; margin-left: auto; margin-right: auto; }
body.egh-locked { overflow: hidden; }