/* screen-explore.css — the Explore habitat picker and the taming minigame.
   Owned by S5 (js/taming.js). Nothing in here is shared; if another screen
   wants one of these blocks it should copy it into its own file. */

/* The shared .speak chip is 48px; on these two screens it is a primary way to
   hear a label, so it gets the full accessibility tap floor. */
.ex .speak, .tm .speak { width: var(--tap); height: var(--tap); font-size: 26px; }

/* ====================================================================== *
 * screen-explore — pick a place                                          *
 * ====================================================================== */

.ex { max-width: 980px; margin: 0 auto; }

.ex__head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.ex__title { margin: 0; flex: 1 1 auto; }

/* Gentle "you'll need treats" note. Never blocks a tap — the taming screen
   itself explains properly and offers the shop. */
.ex-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  background: var(--c-surface); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  box-shadow: var(--shadow);
}
.ex-note__icon { font-size: var(--fs-huge); line-height: 1; }
.ex-note__text { flex: 1 1 200px; font-size: var(--fs-body); }
.ex-note__btn { font-size: var(--fs-body); padding: var(--sp-2) var(--sp-4); }

.ex__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ex-hab {
  --hab: var(--c-meadow);
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2);
  min-height: 250px;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border: 5px solid rgba(255, 255, 255, .65);
  border-radius: var(--r-lg);
  background: var(--hab);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-pop);
}
.ex-hab:active { transform: scale(.97); }

.ex-hab--meadow { --hab: var(--c-meadow); }
.ex-hab--pond   { --hab: var(--c-pond); }
.ex-hab--woods  { --hab: var(--c-woods); }
.ex-hab--stars  { --hab: var(--c-stars); }

.ex-hab__icon { font-size: 58px; line-height: 1; }

/* Name and status sit on a white pill so the dark ink stays readable on every
   one of the four habitat colours. */
.ex-hab__name {
  font-size: var(--fs-big); font-weight: 700; text-align: center;
  background: rgba(255, 255, 255, .92); color: var(--c-ink);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4);
}
.ex-hab__note {
  font-size: var(--fs-body); text-align: center; color: var(--c-ink);
  background: rgba(255, 255, 255, .8);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}

.ex-hab__peek {
  display: flex; justify-content: center; gap: var(--sp-2);
  margin-top: auto; padding-top: var(--sp-2);
}
.ex-hab__peek-one {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .55); border-radius: 50%;
}

.ex-hab__go {
  min-height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  margin-top: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-ink);
  font-size: var(--fs-big); font-weight: 700;
  box-shadow: 0 4px 0 rgba(58, 46, 57, .16);
}
.ex-hab__go--calm { background: rgba(255, 255, 255, .75); box-shadow: none; }

/* Locked stays VISIBLE with its 🔒 and its hint — a goal she can see. */
.ex-hab.is-locked {
  --hab: var(--c-locked);
  cursor: default;
  filter: grayscale(.5);
  box-shadow: var(--shadow);
}
.ex-hab.is-locked:active { transform: none; }
.ex-hab.is-done { cursor: default; }
.ex-hab.is-done:active { transform: none; }

.ex-hab .speak { position: absolute; top: var(--sp-2); right: var(--sp-2); }

/* ====================================================================== *
 * screen-taming — the minigame                                           *
 * ====================================================================== */

.tm {
  --hab: var(--c-meadow);
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.tm--meadow { --hab: var(--c-meadow); }
.tm--pond   { --hab: var(--c-pond); }
.tm--woods  { --hab: var(--c-woods); }
.tm--stars  { --hab: var(--c-stars); }

.tm__bar { width: 100%; display: flex; justify-content: flex-start; }
.tm__back { font-size: var(--fs-body); padding: var(--sp-2) var(--sp-5); }

/* ---- stage: the shy pet and its thought bubble ------------------------ */

.tm__stage {
  position: relative;
  width: 100%; min-height: 250px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)),
    var(--hab);
  overflow: hidden;
}

.tm__bubble {
  position: relative;
  min-width: 84px; min-height: 84px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  animation: tm-bubble-in var(--dur) var(--ease-pop);
}
.tm__bubble::after {
  content: ''; position: absolute; bottom: -12px; left: 50%;
  width: 20px; height: 20px; margin-left: -10px;
  background: var(--c-surface);
  border-radius: 0 0 8px 0;
  transform: rotate(45deg);
}
.tm__bubble-icon { font-size: 52px; line-height: 1; }
@keyframes tm-bubble-in { from { opacity: 0; transform: translateY(10px) scale(.8); } }

/* Trust makes the pet step forward and gain its colour. Two nested nodes on
   purpose: the inner one owns the reveal `transform`, the outer one owns the
   shake/pop animations, so the two never overwrite each other. Discrete reveal
   classes rather than calc() inside filter() — dependable in every engine. */
.tm__pet { display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; }
.tm__pet-inner {
  display: flex; align-items: flex-end; justify-content: center;
  transform-origin: 50% 100%;
  transition: transform var(--dur-slow) var(--ease-pop),
              filter var(--dur-slow) ease, opacity var(--dur-slow) ease;
}
.tm__pet-inner.is-reveal-0 { transform: scale(.78) translateY(14px); opacity: .82; filter: saturate(.15) brightness(.92); }
.tm__pet-inner.is-reveal-1 { transform: scale(.88) translateY(6px);  opacity: .9;  filter: saturate(.5); }
.tm__pet-inner.is-reveal-2 { transform: scale(.96);                  opacity: .97; filter: saturate(.8); }
.tm__pet-inner.is-reveal-3 { transform: scale(1.06);                 opacity: 1;   filter: none; }

/* Fallback silhouette when G.pets has no silhouette() of its own: flatten
   whatever art we were given to a soft shadow. */
.tm-shadow { filter: brightness(0) opacity(.5); }
.tm-emoji { display: inline-block; }

.tm__pet.is-pop { animation: tm-pop var(--dur-slow) var(--ease-pop); }
@keyframes tm-pop {
  40% { transform: scale(1.14) translateY(-8px); }
}

/* A friendly head-shake. Costs nothing, means nothing but "not that one". */
.tm__pet.is-shake { animation: tm-shake 520ms ease; }
@keyframes tm-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg); }
  45% { transform: rotate(6deg); }
  70% { transform: rotate(-4deg); }
}

.tm__stage.is-happy { background: radial-gradient(120% 90% at 50% 100%, #fff, rgba(255, 255, 255, .35)), var(--hab); }

.tm__burst {
  position: absolute; inset: 0;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.tm__bit {
  position: absolute; font-size: 30px;
  animation: tm-bit var(--dur-slow) ease-out forwards;
}
@keyframes tm-bit {
  from { transform: translate(0, 0) scale(.4); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; }
}

/* ---- trust meter: three chunky blocks --------------------------------- */

.tm__trust { width: 100%; display: flex; align-items: center; gap: var(--sp-3); }
.tm__trust-label { font-size: var(--fs-body); font-weight: 700; color: var(--c-ink-soft); }
.tm__chunks { flex: 1 1 auto; display: flex; gap: var(--sp-2); }
.tm__chunk {
  flex: 1 1 0; height: 30px;
  border-radius: var(--r-pill);
  background: var(--c-line);
  transition: background var(--dur) ease;
}
.tm__chunk.is-on { background: var(--c-heart); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); }
.tm__chunk.is-just-on { animation: tm-chunk var(--dur-slow) var(--ease-pop); }
@keyframes tm-chunk { 45% { transform: scaleY(1.5); } }

/* ---- the question and the three choices ------------------------------- */

.tm__ask { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.tm__ask-text { margin: 0; font-size: var(--fs-big); font-weight: 700; }

.tm__hint {
  margin: 0; min-height: 34px;
  font-size: var(--fs-body); color: var(--c-ink-soft);
  opacity: 0; transition: opacity var(--dur) ease;
}
.tm__hint.is-on { opacity: 1; animation: tm-hint var(--dur) var(--ease-pop); }
@keyframes tm-hint { from { transform: translateY(-6px); } }

.tm__choices {
  width: 100%;
  display: grid; gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .tm__choices { grid-template-columns: repeat(3, 1fr); }
}

.tm__choice {
  flex-direction: column; gap: var(--sp-1);
  min-height: calc(var(--tap) + 32px);
  padding: var(--sp-3);
  font-size: var(--fs-body);
}
.tm__choice-icon { font-size: 42px; line-height: 1; }
.tm__choice-label { font-size: var(--fs-body); }

.tm__choice--treat { background: var(--c-primary); box-shadow: 0 4px 0 var(--c-primary-d); }
.tm__choice--toy   { background: var(--c-accent);  box-shadow: 0 4px 0 #35A5A5; }
.tm__choice--song  { background: var(--c-stars);   box-shadow: 0 4px 0 #7A6ACF; }

.tm__choice.is-right { animation: tm-right var(--dur-slow) var(--ease-pop); }
@keyframes tm-right { 40% { transform: scale(1.12); } }

/* ---- "you need treats" gate ------------------------------------------- */

.tm--gate .tm__gate-icon { font-size: 76px; line-height: 1; }
.tm__gate-head { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.tm__gate-title { margin: 0; font-size: var(--fs-big); }
.tm__gate-sub { margin: 0; font-size: var(--fs-body); color: var(--c-ink-soft); max-width: 34ch; }
.tm__gate-btns { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; width: 100%; }
.tm__gate-btn { width: 100%; max-width: 420px; font-size: var(--fs-big); }

/* ---- the payoff: celebration, naming, gift ---------------------------- */

.tm--win .tm__stage, .tm--gift { position: relative; }
.tm__sparkles { font-size: 44px; animation: tm-sparkle 1.6s ease-in-out infinite; }
.tm__sparkles--big { font-size: 56px; }
@keyframes tm-sparkle {
  0%, 100% { transform: scale(1) rotate(-3deg); opacity: .9; }
  50% { transform: scale(1.15) rotate(3deg); opacity: 1; }
}
.tm__pet.is-win { animation: tm-win var(--dur-slow) var(--ease-pop); }
@keyframes tm-win { from { transform: scale(.5); opacity: 0; } }

.tm__win-head, .tm__gift-head {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
}
.tm__win-title, .tm__gift-title { margin: 0; }

.tm__name-q { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.tm__name-q-text { margin: 0; font-size: var(--fs-big); }

.tm__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.tm__chip { font-size: var(--fs-body); padding: var(--sp-2) var(--sp-5); }
.tm__chip.is-on { background: var(--c-bg-2); box-shadow: 0 4px 0 var(--c-buck); }

.tm__name-row { width: 100%; display: flex; justify-content: center; }

/* The only text input in the whole game. Big, calm, and selectable — the body
   sets user-select:none, which would otherwise make it feel broken. */
.tm__name-input {
  width: 100%; max-width: 420px;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border: 4px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-big);
  text-align: center;
  -webkit-user-select: text; user-select: text;
}
.tm__name-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(255, 138, 107, .25);
}

.tm__confirm { width: 100%; max-width: 480px; font-size: var(--fs-big); }

.tm__gift-line { margin: 0; font-size: var(--fs-big); }
.tm__gift-btns { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; width: 100%; }
.tm__gift-btn { width: 100%; max-width: 420px; font-size: var(--fs-big); }

/* ---- small screens ---------------------------------------------------- */
@media (max-width: 360px) {
  .ex__grid { grid-template-columns: 1fr; }
  .ex-hab { min-height: 210px; }
  .ex-hab__icon { font-size: 46px; }
  .tm__stage { min-height: 210px; }
  .tm__bubble-icon { font-size: 42px; }
  .tm__gate-title, .tm__name-q-text, .tm__ask-text { font-size: var(--fs-body); }
}

/* ---- roomy screens ---------------------------------------------------- */
@media (min-width: 1100px) {
  .ex { max-width: 1200px; }
  .ex__grid { grid-template-columns: repeat(4, 1fr); }
  .tm { max-width: 820px; }
}