:root {
  --home-background: #f4f3f3;
  color-scheme: light;
  font-family: "STYuanti", "Yuanti SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #3e5350;
  background: var(--home-background);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { overflow: hidden; background: var(--home-background); }
button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.home {
  --sidebar-width: clamp(200px, 17vw, 310px);
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(20px, 2.4vh, 32px) clamp(24px, 2.8vw, 56px);
}
.fullscreen-feature-host { position: absolute; z-index: 40; inset: 0; background: var(--home-background); }
.fullscreen-feature-host[hidden] { display: none; }
.fullscreen-feature-host iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--home-background); }
.home.is-feature-active > :not(.fullscreen-feature-host) { opacity: 0; pointer-events: none; }
.sidebar {
  position: absolute;
  z-index: 12;
  top: clamp(20px, 2.4vh, 32px);
  bottom: clamp(20px, 2.4vh, 32px);
  left: clamp(2px, .25vw, 6px);
  width: var(--sidebar-width);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.home-brand {
  position: absolute;
  z-index: 14;
  top: clamp(20px, 2.4vh, 32px);
  left: clamp(24px, 2.8vw, 56px);
  width: var(--sidebar-width);
  margin: 0;
  pointer-events: none;
}
.sidebar-brand { visibility: hidden; }
h1 { flex: 0 0 auto; margin: 8px 0 15px; text-align: center; font-size: clamp(22px, 1.55vw, 31px); font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.school-brand { margin: 0 0 12px; line-height: 0; }
.school-brand img { display: block; width: 100%; max-width: 310px; height: auto; margin-inline: auto; mix-blend-mode: multiply; user-select: none; }
.home-brand img { background: transparent; border-radius: 0; mix-blend-mode: normal; box-shadow: none; }
.home-fullscreen {
  position: absolute;
  z-index: 30;
  top: clamp(18px, 2.4vh, 32px);
  right: clamp(18px, 2.8vw, 56px);
  width: clamp(46px, 3.4vw, 58px);
  height: clamp(46px, 3.4vw, 58px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 17px;
  color: #477967;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 6px 18px rgba(62, 83, 80, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.home-fullscreen:hover { background: rgba(255, 255, 255, .82); transform: scale(1.04); }
.home-fullscreen:active { transform: scale(.96); }
.home-fullscreen svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.unit-nav { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.1vh, 14px); }
.unit-button {
  --ink: #705293;
  width: 100%;
  min-height: 0;
  border: 0;
  padding: 4px 0 7px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1px, .35vh, 5px);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.unit-kindergarten { --label-tint: #e9def780; }
.unit-campus { --ink: #3e749c; --label-tint: #dceefb80; }
.unit-renhe { --ink: #3e7a5c; --label-tint: #deefe580; }
.unit-books { --ink: #aa7146; --label-tint: #fbe6d780; }
.unit-art { display: block; height: clamp(90px, 15.7vh, 190px); width: clamp(100px, 17.2vh, 206px); flex: 0 1 auto; min-height: 0; mix-blend-mode: multiply; }
.unit-label {
  flex: 0 0 auto;
  padding: 7px 8px;
  border: 1px solid #ffffffb3;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff99, #ffffff33), var(--label-tint);
  box-shadow: 0 3px 10px #48534c06, inset 0 1px 0 #ffffffa6;
  font-size: clamp(15px, 1vw, 20px);
  font-weight: 600;
  line-height: clamp(25.2px, 1.68vw, 33.6px);
  letter-spacing: .045em;
  white-space: nowrap;
}
.unit-button:hover { background: transparent; transform: translateY(-3px); }
.unit-button:active { transform: translateY(1px) scale(.98); }
.unit-button:focus-visible { outline: 3px solid #97b4a5; outline-offset: 2px; }
.scene { width: 100%; height: 100%; min-width: 0; min-height: 0; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; }
.map-stage {
  --frame-width: clamp(8px, 1.15vw, 17px);
  position: relative;
  isolation: isolate;
  z-index: 0;
  margin: 0;
  min-height: 0;
  height: calc(100% - clamp(18px, 2.4vh, 26px));
  align-self: center;
  width: min(56vw, calc((100dvh - 64px) * .84));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fffdf8;
}
.map-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--frame-width));
  border: var(--frame-width) solid transparent;
  border-radius: 17px;
  background: linear-gradient(#fffdf8, #fffdf8) padding-box,
    linear-gradient(155deg, #dccff0, #f6d6e2 25%, #ffe1b8 48%, #dceacb 73%, #c7e2df) border-box;
  box-shadow: 0 0 0 3px #fffdf8, 0 5px 0 #aa9d8a66, 0 18px 34px #566d5b2b, inset 0 1px 1px #fff;
  pointer-events: none;
}
.map-stage::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid #fffdf8e6;
  border-radius: 7px;
  box-shadow: 0 0 0 1px #b797ab38;
  pointer-events: none;
}
.map-stage-content { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.map-stage-map { position: absolute; inset: 0; }
.map-frame-charm {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(32px, 2.6vw, 42px);
  height: clamp(32px, 2.6vw, 42px);
  border: 2px solid #fffdf8;
  border-radius: 50%;
  background: #ffe5e7;
  box-shadow: 0 4px 0 #d7a9ad, 0 7px 14px #766e6b33;
  color: #d47f93;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1;
  pointer-events: none;
}
.map-frame-flower { left: calc(-1 * var(--frame-width) - 22px); top: 28px; transform: rotate(-13deg); }
.map-frame-star {
  right: calc(-1 * var(--frame-width) - 22px);
  bottom: 28px;
  background: #fff0c9;
  box-shadow: 0 4px 0 #e4c081, 0 7px 14px #766e6b33;
  color: #d49a52;
  transform: rotate(15deg);
}
.map-status { color: #7b8b84; font-size: clamp(18px, 1.35vw, 25px); letter-spacing: .08em; }
.map-stage img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; user-select: none; -webkit-user-drag: none; }
.home-map-viewer { position: absolute; inset: 0; }
.home-map-viewer .map-viewer { min-height: 0; border-radius: 4px; }
/* Both actors use the same media box and bottom baseline, including action swaps. */
.character-slot { --home-character-size: clamp(247.5px, 48vh, 450px); --map-safe-gap: clamp(28px, 2.6vw, 42px); min-width: 0; position: relative; z-index: 2; overflow: visible; }
.home-character-gif { position: absolute; left: 50%; bottom: 0; width: min(var(--home-character-size), 100%); height: min(var(--home-character-size), 100%); max-width: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; opacity: .8; transform: translateX(-50%); filter: drop-shadow(0 9px 8px #30473826); pointer-events: none; user-select: none; -webkit-user-drag: none; transition: opacity .2s ease; }
.character-slot.is-selected .home-character-gif { opacity: 1; }
.home-character-video { border-radius: 0; clip-path: none; }
@media (min-width: 1101px) {
  .sidebar { width: clamp(190px, 13vw, 240px); }
}
@media (min-aspect-ratio: 4/3) {
  .character-slot-xiaoai .home-character-gif { left: auto; right: var(--map-safe-gap); transform: none; }
  .character-slot-xiaohe .home-character-gif { left: var(--map-safe-gap); transform: none; }
}
@media (min-width: 1101px) and (min-aspect-ratio: 4/3) {
  .map-stage { width: min(52.08vw, calc((100dvh - 64px) * .7812)); }
  .map-stage-map { left: -3.7634%; right: -3.7634%; }
}
@media (min-width: 681px) and (min-aspect-ratio: 4/3) {
  .map-stage-map .map-model-toolbar,
  .map-stage-map .map-compass { right: calc(3.7634% + 12px); }
}
.unit-dialog { width: min(90vw, 430px); padding: 28px 30px 32px; border: 0; border-radius: 26px; color: #3e5350; background: #fcfbf8; text-align: center; box-shadow: 0 24px 80px #20332926; }
.unit-dialog::backdrop { background: #20332955; backdrop-filter: blur(4px); }
.dialog-close { position: absolute; right: 13px; top: 10px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #72817a; font-size: 32px; cursor: pointer; }
.dialog-art { width: 136px; height: 136px; margin: 10px auto 15px; mix-blend-mode: multiply; }
.unit-dialog h2 { margin: 0; font-size: 27px; line-height: 1.4; }
.unit-dialog p { margin: 12px 0 24px; color: #87918b; font-size: 18px; }
.dialog-return { min-height: 52px; min-width: 170px; border: 0; border-radius: 14px; background: #e9eee8; color: #3e6554; font-size: 20px; cursor: pointer; }
.dialog-return:hover { background: #dce6db; }
@media (max-width: 1100px) and (min-aspect-ratio: 4/3) {
  .home { --sidebar-width: 190px; padding: 16px 20px; }
  .sidebar { top: 16px; bottom: 16px; left: 20px; }
  .home-brand { top: 16px; left: 20px; }
  h1 { font-size: 21px; letter-spacing: .025em; }
  .unit-label { font-size: 15px; line-height: 25.2px; padding: 6px 12px; letter-spacing: .025em; }
  .map-stage { width: min(53.94vw, calc((100dvh - 36px) * .7812)); }
  .map-stage-map { left: -3.7634%; right: -3.7634%; }
}
@media (max-aspect-ratio: 4/3) {
  body { overflow: auto; }
  .map-stage-content { display: contents; }
  .map-stage-map { position: static; width: 100%; }
  .home { height: auto; min-height: 100dvh; padding: 22px; overflow: hidden; }
  .sidebar { top: 22px; bottom: 22px; left: 22px; }
  .home-brand { top: 22px; left: 22px; }
  h1 { margin-bottom: 24px; }
  .unit-nav { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: auto; gap: 8px; }
  .unit-art { width: min(16vw,155px); height: min(16vw,155px); }
  .unit-label { font-size: clamp(11px,1.45vw,17px); line-height: clamp(16.8px,2.45vw,28px); padding: 6px 8px; letter-spacing: 0; }
  .scene { min-height: 560px; height: calc(100dvh - 44px); }
  .map-stage { width: min(72vw,740px); height: auto; }
  .map-stage.has-model { aspect-ratio: .84; }
  .map-stage img { height: auto; }
}
@media (max-width: 600px) {
  .home { padding: 18px 12px; }
  .home { --sidebar-width: min(78vw, 300px); }
  .sidebar { top: 18px; bottom: 18px; left: 12px; }
  .home-brand { top: 18px; left: 12px; }
  .unit-nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .unit-art { height: 118px; width: 126px; }
  .unit-label { font-size: 14px; line-height: 22.4px; padding: 6px 10px; }
  .map-stage { width: 92vw; }
  .map-frame-charm { display: none; }
}
@media (max-height: 559px) and (min-aspect-ratio: 4/3) { body { overflow: auto; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.unit-art > img, .dialog-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.unit-art > img { transform: scale(1.1); transform-origin: center; }
.unit-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.school-name { display: block; font-size: 24px; line-height: 1.4; white-space: normal; }
.home-error { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.home-error button { padding: 12px 24px; border: 1px solid #d9e0d5; border-radius: 14px; color: #42614d; background: #eef2e8; cursor: pointer; }

/* Reserve a real column for the permanent menu, including on portrait tablets.
   Size the map and both actors from the remaining space so they cannot overlap it. */
.home-persistent-menu {
  --home-inset-x: clamp(8px, 1vw, 24px);
  --home-inset-y: clamp(16px, 2.4vh, 32px);
  --sidebar-width: clamp(110px, 13vw, 210px);
  --home-menu-width: calc(var(--sidebar-width) * .71125 - var(--home-inset-x) * .65);
  --home-column-gap: clamp(12px, 1.2vw, 24px);
  --home-height: max(560px, 100dvh);
  /* Keep the map's existing size; the reclaimed menu width goes to the actor columns. */
  --home-scene-width: calc(100vw - var(--home-inset-x) * 2 - var(--sidebar-width) - var(--home-column-gap));
  --home-map-width: min(calc(var(--home-scene-width) * .6), calc((var(--home-height) - var(--home-inset-y) * 2 - 26px) * .7812));
  --home-map-height: calc(var(--home-map-width) / .7812);
  display: grid;
  grid-template-columns: var(--home-menu-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--home-column-gap);
  height: var(--home-height);
  padding: var(--home-inset-y) var(--home-inset-x);
}
.home-persistent-menu .sidebar {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  width: 100%;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: none;
}
.home-persistent-menu .home-brand { left: var(--home-inset-x); top: var(--home-inset-y); transform: scale(1.5); transform-origin: top left; }
.home-persistent-menu .sidebar-brand { width: var(--sidebar-width); }
.home-persistent-menu .unit-nav {
  --menu-gap-reduction: clamp(16px, 4vh, 48px);
  width: var(--sidebar-width);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  /* Keep 35% of the original left gap: the previous 50% gap reduced by another 30%. */
  transform: translateX(calc(var(--home-inset-x) * -.65 - var(--sidebar-width) * .11375));
}
/* Move the scaled buttons toward the group's center without shrinking their artwork. */
.home-persistent-menu .unit-button { position: relative; top: calc(var(--menu-center-offset) * var(--menu-gap-reduction)); transform: scale(.65); }
.home-persistent-menu .unit-button:nth-child(1) { --menu-center-offset: 1.5; }
.home-persistent-menu .unit-button:nth-child(2) { --menu-center-offset: .5; }
.home-persistent-menu .unit-button:nth-child(3) { --menu-center-offset: -.5; }
.home-persistent-menu .unit-button:nth-child(4) { --menu-center-offset: -1.5; }
.home-persistent-menu .unit-button:hover { transform: translateY(-3px) scale(.65); }
.home-persistent-menu .unit-button:active { transform: translateY(1px) scale(.637); }
.home-persistent-menu .unit-art { width: min(90%, 17.2vh, 186px); height: clamp(64px, 15.7vh, 172px); }
.home-persistent-menu .unit-label { font-size: clamp(15.6px, 1.3vw, 26px); line-height: 1.6; padding: 5px 6px; letter-spacing: 0; white-space: normal; }
.home-persistent-menu .scene { grid-area: 1 / 2; height: 100%; min-height: 0; align-items: center; }
.home-persistent-menu .map-stage { width: var(--home-map-width); height: var(--home-map-height); }
.home-persistent-menu .map-stage-content { display: grid; }
.home-persistent-menu .map-stage-map { position: absolute; width: auto; }
.home-persistent-menu .map-stage img { height: 100%; }
.home-persistent-menu .character-slot { height: var(--home-map-height); --map-safe-gap: clamp(14px, 2vw, 36px); }
.home-persistent-menu .character-slot .home-character-gif {
  width: max(0px, calc(100% - var(--map-safe-gap)));
  height: var(--home-map-height);
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
}
.home-persistent-menu .character-slot-xiaoai .home-character-gif { left: auto; right: var(--map-safe-gap); object-position: right bottom; }
.home-persistent-menu .character-slot-xiaohe .home-character-gif { left: var(--map-safe-gap); right: auto; object-position: left bottom; }
[hidden] { display: none !important; }