:root {
  --u: calc(min(100vw, 177.78vh) / 100);   /* 舞台宽度的1%，所有尺寸按它缩放 */
  --orange: #f7841e;
  --orange-d: #d9650a;
  --cream: #fff8e8;
  --brown: #7a4a1e;
  --green: #4f9a2c;
  --ink: #4a2f14;
}
/* 站酷快乐体（SIL OFL 免费商用），放在本地不用联网 */
@font-face { font-family: "KuaiLe"; src: url("fonts/ZCOOLKuaiLe.woff2") format("woff2"); font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #9fd36a; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; font-synthesis: none;
  font-family: "KuaiLe", "Microsoft YaHei", "PingFang SC", sans-serif; color: var(--ink); }
button, input { font-family: inherit; }
button { cursor: pointer; border: none; }
.hidden { display: none !important; }

#stage { position: relative; width: calc(var(--u) * 100); height: calc(var(--u) * 56.25); }
#stage .bg { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; }

/* 小蚂蚁头顶气泡：底边固定，文字多了往上长；尾巴是单独的 SVG，指向小蚂蚁 */
#bubble { position: absolute; left: 13%; bottom: 50%; width: 22%; padding: calc(var(--u)*1.1) calc(var(--u)*1.5);
  background: #fff; border: calc(var(--u)*.25) solid var(--orange); border-radius: calc(var(--u)*1.8);
  font-size: calc(var(--u)*1.75); line-height: 1.4; color: var(--ink);
  box-shadow: 0 calc(var(--u)*.3) calc(var(--u)*.8) rgba(0,0,0,.18);
  opacity: 0; transform: scale(.9); transform-origin: 70% 100%; transition: .25s; }
#bubble.show { opacity: 1; transform: scale(1); }
#tail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: .25s; }
#bubble.show + #tail { opacity: 1; }

/* 木板 */
#board { position: absolute; left: 36%; top: 19.5%; width: 58.5%; height: 58.5%;
  display: flex; flex-direction: column; padding: calc(var(--u)*.6) calc(var(--u)*1); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u)*.8); }
/* 标题右移避开左上角叶子，白色描边让它从木板上跳出来 */
.bar h1 { margin: 0 0 0 calc(var(--u)*6.5); font-size: calc(var(--u)*2.5); font-weight: normal; color: var(--orange-d);
  letter-spacing: .06em; -webkit-text-stroke: calc(var(--u)*.4) #fff; paint-order: stroke fill;
  text-shadow: 0 calc(var(--u)*.25) calc(var(--u)*.4) rgba(122,74,30,.25); white-space: nowrap; }
.tools { display: flex; gap: calc(var(--u)*.5); }
.tool { font-size: calc(var(--u)*1.05); padding: calc(var(--u)*.4) calc(var(--u)*.8); border-radius: 99px;
  background: #fff; color: var(--brown); border: calc(var(--u)*.12) solid #e6c48f; }
.tool[aria-pressed="false"] { opacity: .5; }
.tool:hover { background: #fff1d6; }

.view { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: calc(var(--u)*.6); }

/* 对话 */
#chat { flex: 1; overflow-y: auto; padding: calc(var(--u)*.4); display: flex; flex-direction: column; gap: calc(var(--u)*.7); }
.msg { display: flex; align-items: flex-end; gap: calc(var(--u)*.6); max-width: 88%; animation: pop .25s ease-out; }
.msg .av { flex: none; width: calc(var(--u)*3.2); height: calc(var(--u)*3.2); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--u)*1.8); background: #fff; border: calc(var(--u)*.15) solid #e6c48f; }
.msg .say { padding: calc(var(--u)*.7) calc(var(--u)*1.1); border-radius: calc(var(--u)*1.2);
  font-size: calc(var(--u)*1.55); line-height: 1.5; letter-spacing: .02em; }
.msg.ai .say { background: #fff; border-bottom-left-radius: calc(var(--u)*.2); box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.msg.kid { align-self: flex-end; flex-direction: row-reverse; }
.msg.kid .say { background: var(--orange); color: #fff; font-weight: bold; border-bottom-right-radius: calc(var(--u)*.2); }
.msg.kid .av { background: #ffe2c2; }
.dots span { display: inline-block; width: .5em; height: .5em; margin: 0 .12em; border-radius: 50%;
  background: var(--orange); animation: jump 1s infinite; }
.dots span:nth-child(2) { animation-delay: .15s; } .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes jump { 0%,60%,100% { transform: none; } 30% { transform: translateY(-.4em); } }
@keyframes pop { from { opacity: 0; transform: translateY(calc(var(--u)*.6)); } }

#ideas { display: flex; flex-wrap: wrap; gap: calc(var(--u)*.5); padding: calc(var(--u)*.4) 0; }
#ideas button { font-size: calc(var(--u)*1.05); padding: calc(var(--u)*.35) calc(var(--u)*.9); border-radius: 99px;
  background: #eaf7d9; color: var(--green); border: calc(var(--u)*.12) dashed var(--green); }

.inputRow { display: flex; gap: calc(var(--u)*.6); align-items: center; }
.inputRow input { flex: 1; min-width: 0; font-size: calc(var(--u)*1.35); padding: calc(var(--u)*.7) calc(var(--u)*1);
  border-radius: 99px; border: calc(var(--u)*.18) solid #e6c48f; background: #fff; color: var(--ink); outline: none; }
.inputRow input:focus { border-color: var(--orange); }
.inputRow button { font-size: calc(var(--u)*1.3); font-weight: bold; padding: calc(var(--u)*.7) calc(var(--u)*1.2); border-radius: 99px; }
.mic { background: #fff; border: calc(var(--u)*.18) solid #e6c48f !important; width: calc(var(--u)*4); padding: calc(var(--u)*.6) 0 !important; }
.mic.on { background: #ff5b5b; animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 calc(var(--u)*.6) rgba(255,91,91,.25); } }
.send { background: var(--orange); color: #fff; }
.book { background: var(--green); color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }
/* 绘本 */
.page { flex: 1; display: flex; gap: calc(var(--u)*1.4); min-height: 0; align-items: center; }
.pic { height: 100%; aspect-ratio: 1; border-radius: calc(var(--u)*1); overflow: hidden; background: #fff;
  border: calc(var(--u)*.3) solid #fff; box-shadow: 0 calc(var(--u)*.3) calc(var(--u)*1) rgba(0,0,0,.18);
  display: grid; place-items: center; flex: none; }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic .wait { text-align: center; font-size: calc(var(--u)*1.3); color: var(--brown); padding: calc(var(--u)*1); }
.pic .wait .brush { font-size: calc(var(--u)*4); display: block; animation: jump 1.2s infinite; }
.txt { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u)*1); }
#bookTitle { font-size: calc(var(--u)*2.1); font-weight: bold; color: var(--orange-d); }
#pageText { margin: 0; font-size: calc(var(--u)*1.9); line-height: 1.6; font-weight: bold; }
#pageNo { font-size: calc(var(--u)*1.1); color: #a07a50; }
.bookBar { display: flex; gap: calc(var(--u)*.6); justify-content: center; padding-top: calc(var(--u)*.8); flex-wrap: wrap; }
.bookBar button { font-size: calc(var(--u)*1.15); font-weight: bold; padding: calc(var(--u)*.55) calc(var(--u)*1.1);
  border-radius: 99px; background: #fff; color: var(--brown); border: calc(var(--u)*.15) solid #e6c48f; }
.bookBar button:hover:not(:disabled) { background: #fff1d6; }

/* 书架 */
#shelf { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u)*1); align-content: start; }
.cover { background: #fff; border-radius: calc(var(--u)*.8); padding: calc(var(--u)*.5); text-align: center; cursor: pointer;
  border: calc(var(--u)*.15) solid #e6c48f; font-size: calc(var(--u)*1.05); font-weight: bold; position: relative; }
.cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--u)*.5); display: block; margin-bottom: calc(var(--u)*.3); }
.cover small { display: block; color: #a07a50; font-weight: normal; }
.cover .del { position: absolute; top: calc(var(--u)*.2); right: calc(var(--u)*.2); background: rgba(255,255,255,.9);
  border-radius: 50%; width: calc(var(--u)*2); height: calc(var(--u)*2); font-size: calc(var(--u)*1); color: #c33; }
.empty { grid-column: 1/-1; text-align: center; font-size: calc(var(--u)*1.4); color: #a07a50; padding-top: calc(var(--u)*4); }

#toast { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); background: rgba(74,47,20,.9); color: #fff;
  padding: calc(var(--u)*.6) calc(var(--u)*1.4); border-radius: 99px; font-size: calc(var(--u)*1.15); opacity: 0;
  transition: .3s; pointer-events: none; max-width: 80%; text-align: center; }
#toast.show { opacity: 1; }

/* 开场封面 */
#start { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,248,232,.35); z-index: 5; }
#btnStart { font-size: calc(var(--u)*2.4); font-weight: bold; color: #fff; background: var(--green);
  padding: calc(var(--u)*1.4) calc(var(--u)*3); border-radius: 99px; border: calc(var(--u)*.35) solid #fff;
  box-shadow: 0 calc(var(--u)*.5) calc(var(--u)*1.5) rgba(0,0,0,.25); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.05); } }