@import url("./home-hud-v3.css?v=20260903-original-hotspots");

:root {
  --park-paper: #fff3ce;
  --park-paper-edge: #d0a861;
  --park-ink: #493528;
  --park-muted: #806a58;
  --park-teal: #087f82;
}

/* 童话乐园顶部导航：复用原画底部功能栏的米色底座、分隔线和圆形图标。 */
.home-top-rail {
  z-index: 20;
  inset: clamp(8px, 1.5vh, 17px) clamp(14px, 2.5vw, 48px) auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.family-account-button,
.parent-tools {
  position: relative;
  inset: auto;
  box-sizing: border-box;
  border: 3px solid rgb(255 250 222 / 96%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 42%), transparent 48%),
    var(--park-paper);
  box-shadow:
    inset 0 0 0 1px rgb(177 128 59 / 22%),
    0 6px 0 var(--park-paper-edge),
    0 12px 25px rgb(49 64 47 / 22%);
  pointer-events: auto;
}

.family-account-button {
  width: clamp(215px, 16.5vw, 300px);
  height: clamp(60px, 7.3vh, 78px);
  min-height: 0;
  display: flex;
  align-items: center;
  gap: clamp(7px, .65vw, 11px);
  padding: 5px 12px 5px 6px;
  border-radius: 23px;
  color: var(--park-ink);
  text-align: left;
  cursor: pointer;
}

.family-account-button > .family-avatar {
  width: clamp(40px, 3.2vw, 52px);
  display: grid;
}

.family-account-button > .family-copy {
  min-width: 0;
  display: grid;
  flex: 1;
  gap: 1px;
}

.family-account-button > .family-arrow {
  display: block;
  color: var(--park-teal);
}

.family-copy small {
  color: var(--park-teal);
  font-size: clamp(10px, .66vw, 12px);
}

.family-copy strong {
  font-size: clamp(14px, .92vw, 18px);
}

.parent-tools {
  width: clamp(360px, 26vw, 500px);
  height: clamp(66px, 8.2vh, 86px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 5px 6px 4px;
  border-radius: 24px;
}

.parent-tools .parent-tool,
.parent-tools .app-mode-button {
  position: relative;
  inset: auto;
  width: auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 0 6px;
  border: 0;
  border-right: 1px solid rgb(157 113 55 / 22%);
  border-radius: 0;
  color: var(--park-ink);
  background: transparent;
  box-shadow: none;
  filter: none;
  text-align: center;
  cursor: pointer;
}

.parent-tools .parent-tool:last-child {
  border-right: 0;
}

.parent-tools .parent-tool > .parent-tool-icon {
  width: clamp(31px, 2.6vw, 44px);
  display: grid;
  aspect-ratio: 1;
  border: 3px solid #fff9df;
  border-radius: 50%;
  box-shadow:
    inset 0 -4px 0 rgb(0 0 0 / 14%),
    0 3px 5px rgb(71 61 38 / 22%);
  transition: transform .16s ease, filter .16s ease;
}

.parent-tools .parent-tool > .parent-tool-copy {
  min-width: 0;
  display: grid;
  line-height: 1.05;
  text-align: center;
}

.parent-tool-copy strong {
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(10px, .65vw, 13px);
  white-space: nowrap;
}

.parent-tool-copy small {
  margin-top: 2px;
  color: var(--park-muted);
  font-family: "Fredoka", "Noto Sans SC", sans-serif;
  font-size: clamp(7px, .48vw, 9px);
  white-space: nowrap;
}

.app-mode-tool .parent-tool-icon {
  color: #fff7d2;
  background: #e5ad2e;
}

.sound-tool .parent-tool-icon {
  background: #85b638;
}

.child-tool .parent-tool-icon {
  background: #ef7047;
}

.settings-tool .parent-tool-icon {
  background: #9860bd;
}

.parent-tools .app-mode-icon svg {
  width: 54%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.parent-tools .parent-tool:hover .parent-tool-icon {
  filter: brightness(1.06) saturate(1.06);
  transform: translateY(-2px);
}

.parent-tools .parent-tool:active .parent-tool-icon {
  transform: translateY(2px) scale(.97);
}

.parent-tools .app-mode-button[aria-pressed="true"] .parent-tool-icon {
  color: #705020;
  background: #ffe16c;
}

.family-account-button:focus-visible,
.parent-tools .parent-tool:focus-visible {
  outline: 4px solid rgb(255 255 255 / 94%);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgb(8 127 130 / 58%);
}

@media (max-width: 980px) {
  .home-top-rail {
    inset: 7px 9px auto;
  }

  .family-account-button {
    width: 25%;
    height: 55px;
    padding-right: 9px;
    border-radius: 18px;
  }

  .family-account-button > .family-avatar {
    width: 35px;
  }

  .family-copy i,
  .family-arrow {
    display: none;
  }

  .parent-tools {
    width: 48%;
    height: 58px;
    padding: 4px 5px;
    border-radius: 18px;
  }

  .parent-tools .parent-tool > .parent-tool-icon {
    width: 29px;
  }

  .parent-tool-copy strong {
    font-size: 9px;
  }

  .parent-tool-copy small {
    font-size: 7px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .family-account-button {
    height: 49px;
  }

  .parent-tools {
    height: 52px;
  }

  .parent-tools .parent-tool > .parent-tool-icon {
    width: 26px;
    border-width: 2px;
  }

  .parent-tool-copy small {
    display: none;
  }
}