/* screen-home.css — the Home / Den screen. Owned by S7.
   Everything here is scoped to #screen-home or to a home-only class, so nothing
   can leak into another agent's screen. */

/* The HUD is fixed at top-right; start home's content below it so the title and
   the coin chips never collide, even at 320px. */
#screen-home {
  padding-top: 72px;
  max-width: 900px;
  margin: 0 auto;
}

.home__title {
  text-align: center;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-big);
  color: var(--c-ink-soft);
  letter-spacing: .5px;
}

/* ---- the den scene ------------------------------------------------------ */
/* A warm little room: soft floor, soft light, her pets milling about on it. */
.den__floor {
  position: relative;
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  margin-bottom: var(--sp-4);
  background:
    radial-gradient(120% 90% at 50% 0%, #FFF9EE 0%, rgba(255,249,238,0) 62%),
    linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg-2) 58%, #F3DFC6 58%, #EFD7BA 100%);
  box-shadow: inset 0 -6px 0 rgba(58,46,57,.06), var(--shadow);
  overflow: hidden;
}
/* a suggestion of a window and a rug — scenery only, never tappable */
.den__floor::before {
  content: "";
  position: absolute; top: 12px; left: 14px;
  width: 58px; height: 58px; border-radius: 13px;
  /* sky, then a cross of mullions, so it reads as a window and not as an
     empty box someone forgot to fill */
  background:
    linear-gradient(#FFFFFF, #FFFFFF) 50% 0 / 6px 100% no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) 0 50% / 100% 6px no-repeat,
    linear-gradient(180deg, #DCEEFB 0%, #EAF6FE 62%, #FDF3D8 100%);
  box-shadow: 0 0 0 5px #FFFFFF, 0 4px 0 rgba(58,46,57,.10);
  opacity: .95;
}
.den__floor::after {
  content: "";
  position: absolute; left: 8%; right: 8%; bottom: 6px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  filter: blur(2px);
}

.den {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  /* Grows with the viewport so the den feels like a room rather than a strip,
     and the screen doesn't trail off into dead space under the stats. */
  min-height: clamp(150px, 30vh, 300px);
}

.den__pet {
  position: relative;
  width: 96px;
  padding: 4px 2px 2px;
  border-radius: var(--r-md);
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-pop);
  /* the whole figure, art + name, clears the 64px tap floor comfortably */
  min-height: var(--tap);
}
.den__pet:active { transform: scale(.94); }
.den__pet:focus-visible { outline: 4px solid var(--c-accent); outline-offset: 2px; }

.den__art {
  width: 90px; height: 90px;
  margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: center;
}
.den__art > svg { display: block; max-width: 100%; height: auto; }

.den__fallback {
  font-size: 62px; line-height: 1;
  filter: drop-shadow(0 3px 0 rgba(58,46,57,.10));
}

.den__name {
  margin-top: 2px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* A wish bubble: "there is something nice you could do here". Never a warning
   colour, never a red dot — this is an invitation. */
.den__wish {
  position: absolute;
  top: -4px; right: 2px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: 0 2px 0 rgba(58,46,57,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  animation: den-wish 2.6s var(--ease-pop) infinite;
}
@keyframes den-wish {
  0%, 68%, 100% { transform: translateY(0) scale(1); }
  78%           { transform: translateY(-6px) scale(1.12); }
}

.den__empty {
  width: 100%;
  text-align: center;
  color: var(--c-ink-soft);
  font-size: var(--fs-body);
  padding: var(--sp-5) var(--sp-3);
}

/* ---- the one big call-to-action ---------------------------------------- */
.home-cta {
  position: relative;
  margin: 0 0 var(--sp-4);
}

.home-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 108px;
  padding: var(--sp-4) 88px var(--sp-4) var(--sp-4);  /* room for the 🔊 */
  border: none;
  border-radius: var(--r-lg);
  background: var(--c-primary);
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--c-primary-d), var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast);
  animation: cta-breathe 3.4s ease-in-out infinite;
}
.home-cta__btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--c-primary-d);
  animation: none;
}
.home-cta__btn:focus-visible { outline: 4px solid var(--c-ink); outline-offset: 3px; }

@keyframes cta-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

.home-cta__icon { font-size: 46px; line-height: 1; flex: 0 0 auto; }
.home-cta__label {
  font-size: var(--fs-big);
  line-height: 1.15;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tone tints, so the button also *looks* like the thing it offers. */
.home-cta__btn[data-tone="read"]    { background: var(--c-primary); box-shadow: 0 6px 0 var(--c-primary-d), var(--shadow-lg); }
.home-cta__btn[data-tone="care"]    { background: var(--c-heart);   box-shadow: 0 6px 0 #D9436F, var(--shadow-lg); }
.home-cta__btn[data-tone="explore"] { background: var(--c-accent);  box-shadow: 0 6px 0 #35A5A5, var(--shadow-lg); }
.home-cta__btn[data-tone="shop"]    { background: #8E7BE0;          box-shadow: 0 6px 0 #6E5CC0, var(--shadow-lg); }
.home-cta__btn[data-tone="gift"]    { background: var(--c-buck);    color: var(--c-ink); box-shadow: 0 6px 0 #D2921F, var(--shadow-lg); }

/* Sibling of the button, not a child of it: one tap can only ever hit one. */
.home-cta__speak {
  position: absolute;
  top: 50%; right: var(--sp-3);
  transform: translateY(-50%);
  width: var(--tap); height: var(--tap);
  min-width: var(--tap); min-height: var(--tap);
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--c-ink);
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(58,46,57,.18);
}
.home-cta__speak:active { transform: translateY(calc(-50% + 3px)); box-shadow: 0 1px 0 rgba(58,46,57,.18); }

/* ---- a glance at her world ---------------------------------------------- */
.glance {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.glance__chip {
  flex: 1 1 0;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-pop);
}
.glance__chip:active { transform: scale(.96); }
.glance__chip:focus-visible { outline: 4px solid var(--c-accent); outline-offset: 2px; }
.glance__icon { font-size: 26px; line-height: 1.1; }
.glance__num  { font-size: var(--fs-big); font-weight: 700; line-height: 1.1; }
.glance__word { font-size: var(--fs-small); color: var(--c-ink-soft); }
.glance__chip--pets  .glance__num { color: var(--c-primary-d); }
.glance__chip--books .glance__num { color: #3F9C9C; }
.glance__chip--read  .glance__num { color: #A9761A; }

/* ---- the grown-ups door -------------------------------------------------- */
.home__foot { display: flex; justify-content: center; padding-bottom: var(--sp-4); }
.home__version {
  font-size: 12px;
  color: var(--c-line);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  letter-spacing: .3px;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  transition: color var(--dur) ease, background var(--dur) ease;
}
/* Deliberately dull feedback: an adult holding on purpose sees it, a child
   brushing past does not notice anything worth chasing. */
.home__version.is-pressing {
  color: var(--c-ink-soft);
  background: var(--c-bg-2);
}

/* ---- parent panel -------------------------------------------------------- */
.pp { position: fixed; inset: 0; z-index: 80; display: flex;
      align-items: center; justify-content: center; padding: var(--sp-3); }
.pp__scrim { position: absolute; inset: 0; background: rgba(58,46,57,.55); }

.pp__box {
  position: relative;
  width: 100%; max-width: 560px; max-height: 92vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-lg);
  /* The panel is for adults: normal type, normal density, no game styling. */
  font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 15px;
  color: var(--c-ink);
}
.pp__head { display: flex; align-items: center; justify-content: space-between;
            gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pp__title { margin: 0; font-size: 20px; font-weight: 700; }
.pp__close {
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--c-bg-2); color: var(--c-ink);
  font-size: 18px; cursor: pointer; flex: 0 0 auto;
}

.pp__row { display: flex; align-items: center; justify-content: space-between;
           gap: var(--sp-3); padding: var(--sp-2) 0;
           border-bottom: 1px solid var(--c-line); }
.pp__row--stack { flex-wrap: wrap; }
.pp__rowlabel { font-weight: 600; }

.pp__switch {
  min-width: 84px; min-height: 44px;
  border: 2px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-bg-2); color: var(--c-ink-soft);
  font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.pp__switch.is-on { background: var(--c-good); border-color: #4FAF6F; color: #1F4B30; }

.pp__seg { display: flex; gap: var(--sp-2); }
.pp__segbtn {
  min-height: 44px; padding: 0 var(--sp-4);
  border: 2px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-bg-2); color: var(--c-ink-soft);
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.pp__segbtn.is-on { background: var(--c-accent); border-color: #35A5A5; color: #073C3C; }

.pp__stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.pp__stats span {
  background: var(--c-bg-2); border-radius: var(--r-pill);
  padding: 4px 12px; font-size: 13px; font-weight: 600;
}

.pp__sub { margin: var(--sp-4) 0 var(--sp-2); font-size: 15px; font-weight: 700; }

.pp__ta {
  display: block; width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.35;
  padding: var(--sp-2);
  border: 2px solid var(--c-line); border-radius: var(--r-sm);
  background: #FCFAF7; color: var(--c-ink);
  resize: vertical;
  /* the global user-select:none would make the export impossible to copy */
  -webkit-user-select: text; user-select: text;
}

.pp__btn {
  min-height: 44px; margin-top: var(--sp-2); margin-right: var(--sp-2);
  padding: 0 var(--sp-4);
  border: 2px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-bg-2); color: var(--c-ink);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.pp__btn--danger { background: #FBE3E3; border-color: #E9B3B3; color: #8E2020; }

.pp__note { margin: var(--sp-2) 0 0; font-size: 13px; line-height: 1.4;
            color: var(--c-ink-soft); }
.pp__note--where { margin-top: var(--sp-4); padding-top: var(--sp-3);
                   border-top: 1px solid var(--c-line); font-size: 12px; }

.pp__reset { margin-top: var(--sp-2); }
.pp__confirm { background: #FDF0F0; border: 2px solid #E9B3B3;
               border-radius: var(--r-md); padding: var(--sp-3); }
.pp__confirm .pp__note { color: #8E2020; margin-top: 0; }

/* ---- wider screens ------------------------------------------------------- */
@media (min-width: 700px) {
  #screen-home { padding-top: 84px; }
  .home__title { font-size: var(--fs-huge); }
  .den { min-height: 190px; gap: var(--sp-3) var(--sp-5); }
  .den__pet { width: 110px; }
  .home-cta__btn { min-height: 128px; }
  .home-cta__label { font-size: var(--fs-huge); }
  .home-cta__icon { font-size: 58px; }
}

/* ---- very narrow (320px) -------------------------------------------------- */
@media (max-width: 360px) {
  .den__pet { width: 86px; }
  .den__art { width: 82px; height: 82px; }
  .home-cta__btn { padding-right: 80px; min-height: 96px; }
  .home-cta__label { font-size: var(--fs-body); }
  .home-cta__icon { font-size: 38px; }
  .glance { gap: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  .home-cta__btn, .den__wish { animation: none; }
}