/* 艾莎伙伴 · 孩子端
   给四岁用的：一屏只放三样东西——立绘、一个按钮、一行小字幕。
   没有导航、没有文字要读、没有要点的东西。 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:radial-gradient(120% 80% at 50% 0%,#f2f7fb 0%,#dfeaf3 45%,#cfe0ee 100%);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:#3d4a57;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
}

#stage{
  position:fixed;inset:0;
  display:flex;flex-direction:column;align-items:center;
  padding:max(10px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));
}

/* ── 立绘 ── */
#char{
  position:relative;flex:1;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
}
#char img{
  position:absolute;
  max-height:100%;max-width:100%;
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
}
/* 口型层：实测嘴在 y 29.5%~35.0%、x 44.4%~55.8%。
   用一层羽化椭圆罩住那块，边缘化开就不会出现接缝。 */
#lips{
  opacity:0;transition:opacity .1s;
  -webkit-mask-image:radial-gradient(ellipse 8.5% 4.6% at 50.1% 32.2%,#000 52%,transparent 100%);
          mask-image:radial-gradient(ellipse 8.5% 4.6% at 50.1% 32.2%,#000 52%,transparent 100%);
}
#lips.on{opacity:1}

/* 呼吸感：整张图上下浮动几个像素 */
.breath{animation:breath 5.6s ease-in-out infinite}
@keyframes breath{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-6px) scale(1.006)}
}
@media (prefers-reduced-motion:reduce){ .breath{animation:none} }

/* 听她说话的时候轻轻前倾一下 */
#char.listen{transform:scale(1.03) translateY(4px);transition:transform .25s}

/* ── 展示卡：要教给她看的东西从下半部分升上来 ──
   挡住的是裙摆，不挡脸。四岁认字母、认字、看算式，光靠听是学不会的。 */
:root{
  --bh:min(30vw,142px);          /* 四线三格的高度，Card 里其他东西都以它为基准 */
  --tz:min(38vw,168px);          /* 田字格的边长 */
}
.board{
  position:fixed;left:50%;z-index:15;
  bottom:calc(max(14px,env(safe-area-inset-bottom)) + min(34vw,132px) + 26px);
  width:min(92vw,520px);
  padding:16px 20px 18px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(238,246,252,.97));
  box-shadow:0 16px 44px rgba(56,104,146,.30),0 0 0 1px rgba(255,255,255,.7) inset;
  transform:translateX(-50%);          /* 只负责居中，动画不碰它 */
  opacity:0;pointer-events:none;
  transition:opacity .22s;             /* 收起时用这条 */
}
/* 🔴 静止状态直接声明成「可见」。
   先前靠 transition 做入场，实测第一次弹出时过渡不跑，卡片停在透明状态
   （opacity 一直 0，屏幕上看着什么都没有）。现在动画只当点缀 ——
   就算它一次也不执行，卡片该显示还是显示。
   动画走 translate / scale 两个独立属性，跟上面那句居中用的 transform 互不干扰，
   横屏那套居中也不会被带歪。 */
.board.on{
  opacity:1;
  animation:boardIn .36s cubic-bezier(.2,1.05,.35,1) both;
}
@keyframes boardIn{
  from{opacity:0;translate:0 26px;scale:.9}
  to  {opacity:1;translate:0 0;scale:1}
}
.board .bx{display:flex;flex-direction:column;align-items:center;justify-content:center}
.board .sub{margin-top:8px;font-size:clamp(13px,3.6vw,16px);color:#7d93a6;letter-spacing:.5px}
.board .big{line-height:1.05;color:#33465a;font-weight:700}

/* 大字：数字 */
.board .big.num{font-size:min(30vw,132px);font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif}
/* 大字：算式 */
.board .big.math{font-size:min(13.5vw,60px);font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  letter-spacing:2px;white-space:nowrap}
/* 大字：英文单词 */
.board .big.word{font-size:min(13vw,58px);font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  letter-spacing:1px;word-break:break-all;text-align:center}

/* 田字格：汉字用。十字虚线通到边，跟课本上一样 */
.tian{position:relative;width:var(--tz);height:var(--tz);
  border:2.5px solid #d98a86;border-radius:6px;background:#fffdfd;
  display:flex;align-items:center;justify-content:center}
.tian::before,.tian::after{content:"";position:absolute}
.tian::before{left:50%;top:0;bottom:0;border-left:2px dashed #e9b7b4}
.tian::after{top:50%;left:0;right:0;border-top:2px dashed #e9b7b4}
.tian span{position:relative;font-size:calc(var(--tz) * .72);line-height:1;
  color:#33465a;font-family:"KaiTi","STKaiti","Kaiti SC","楷体",serif;font-weight:400}

/* 四线三格：英语字母用。四条线分出三格 */
.four{position:relative;width:min(74vw,330px);height:var(--bh);
  display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(#cbdbec,#cbdbec),linear-gradient(#cbdbec,#cbdbec),
                   linear-gradient(#cbdbec,#cbdbec),linear-gradient(#cbdbec,#cbdbec);
  background-size:100% 1.5px;background-repeat:no-repeat;
  background-position:0 0,0 33.333%,0 66.666%,0 100%}
.four span{line-height:1;color:#33465a;font-weight:700;
  font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif}
/* 字母在四线三格里的落位 —— 按笔画的真实高度分三类
   线在 0 / 33.3% / 66.6% / 100%，也就是上面两格、中间一格、下面一格 */
/* 大写，以及 b d f h k l t：字身占上面两格，底边坐在第三条线上 */
.four.up span{font-size:calc(var(--bh) * .9);transform:translateY(-11%)}
/* a c e m n o 这类只有中间一格高；g j p q y 的尾巴会自然落到下面那格 */
.four.low span{font-size:calc(var(--bh) * .64);transform:translateY(-3.5%)}

/* 卡片出来时，立绘轻轻退后半步，注意力跟着走 */
#char.recall{transform:scale(.95) translateY(8px);filter:brightness(.985) saturate(.94);transition:transform .3s,filter .3s}

@media (max-width:360px){ :root{--bh:min(30vw,118px);--tz:min(38vw,146px)} }

/* 横屏：卡片靠右，别压住立绘 */
@media (orientation:landscape) and (max-height:560px){
  .board{left:auto;right:max(12px,env(safe-area-inset-right));
    bottom:auto;top:50%;transform:translateY(-50%);
    width:min(46vw,460px)}
}
/* 字幕 */
.say{
  flex:none;max-width:min(92vw,620px);min-height:2.9em;
  padding:0 6px 6px;
  font-size:clamp(15px,4.2vw,20px);line-height:1.55;text-align:center;
  color:#2f3d4a;opacity:0;transition:opacity .3s;
}
.say.on{opacity:1}
.say .who{font-size:.82em;color:#8aa0b3;display:block;margin-bottom:2px}

/* ── 那个大按钮 ── */
.talk{
  flex:none;position:relative;
  width:min(34vw,132px);height:min(34vw,132px);
  margin-bottom:6px;border:none;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#8fc4e8,#4f93c8 62%,#3b7cae);
  box-shadow:0 8px 22px rgba(63,124,174,.38),inset 0 -3px 10px rgba(0,0,0,.12);
  color:#fff;font:inherit;font-size:clamp(13px,3.6vw,16px);font-weight:700;
  line-height:1.25;letter-spacing:.5px;
  transition:transform .12s,box-shadow .12s,opacity .3s;
  cursor:pointer;
}
.talk .ring{
  position:absolute;inset:-9px;border-radius:50%;
  border:2px solid rgba(90,150,196,.35);opacity:0;
}
.talk.on{transform:scale(.94);box-shadow:0 3px 12px rgba(63,124,174,.5)}
.talk.on .ring{opacity:1;animation:pulse 1.15s ease-out infinite}
@keyframes pulse{
  0%{transform:scale(1);opacity:.65}
  100%{transform:scale(1.28);opacity:0}
}
.talk[disabled]{opacity:.4;pointer-events:none}
.talk.working{background:radial-gradient(circle at 38% 32%,#b9d3e6,#7fa8c6 62%,#6a95b4)}

/* 一直在听：一圈慢慢呼气的光，跟「正在收她的话」那种急促脉动分开。
   她四岁，看不懂字，全靠这个圈知道「现在可以讲」。 */
.talk.listening{background:radial-gradient(circle at 38% 32%,#a8d8f2,#5aa1d4 62%,#4189bd)}
.talk.listening .ring{opacity:1;animation:listenBreathe 2.8s ease-in-out infinite}
@keyframes listenBreathe{
  0%,100%{transform:scale(1);opacity:.55}
  50%    {transform:scale(1.12);opacity:.15}
}
/* 她按了暂停：整体退成灰，一眼看出「这下不听了」 */
.talk.paused{background:radial-gradient(circle at 38% 32%,#d5dde2,#a3b1bb 62%,#8b9aa5)}
.talk.paused .ring{opacity:.5;animation:none;border-color:rgba(140,155,168,.5)}
@media (prefers-reduced-motion:reduce){
  .talk.listening .ring{animation:none;opacity:.45}
}

/* ── 第一次那一屏 ── */
.start{
  position:fixed;inset:0;z-index:20;border:none;cursor:pointer;
  background:radial-gradient(120% 80% at 50% 20%,#eef6fc,#cfe3f2 70%,#b9d4e8);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  font:inherit;color:#2f4a60;
  transition:opacity .45s;
}
.start .snow{font-size:clamp(38px,11vw,64px);line-height:1;animation:fall 3.4s ease-in-out infinite}
@keyframes fall{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(10px) rotate(14deg)}}
.start .t1{font-size:clamp(20px,6vw,30px);font-weight:700;letter-spacing:1px}
.start .t2{
  margin-top:6px;font-size:clamp(14px,4vw,17px);
  padding:11px 30px;border-radius:999px;
  background:#4f93c8;color:#fff;box-shadow:0 6px 18px rgba(79,147,200,.4);
}
.start.gone{opacity:0;pointer-events:none}

/* ── 小的状态提示（家长瞄一眼用的） ── */
.hint{
  position:fixed;top:max(8px,env(safe-area-inset-top));right:12px;
  font-size:11.5px;color:#8aa0b3;opacity:.75;text-align:right;line-height:1.5;
  pointer-events:none;
}

/* ── 收场那一屏 ── */
.closed{
  position:fixed;inset:0;z-index:30;display:none;
  background:radial-gradient(120% 80% at 50% 30%,#eef6fc,#cfe3f2);
  align-items:center;justify-content:center;padding:24px;
}
.closed.on{display:flex}
.closed .box{
  text-align:center;max-width:520px;
  background:rgba(255,255,255,.72);border-radius:22px;padding:30px 26px;
  box-shadow:0 10px 30px rgba(80,130,170,.18);
}
.closed .big{font-size:clamp(19px,5.4vw,25px);font-weight:700;margin-bottom:10px;color:#2f4a60}
.closed .sub{font-size:clamp(13px,3.7vw,15.5px);line-height:1.7;color:#54697c;margin-bottom:20px}
.closed button{
  font:inherit;font-size:15px;padding:11px 34px;border:none;border-radius:999px;
  background:#4f93c8;color:#fff;box-shadow:0 5px 14px rgba(79,147,200,.35);cursor:pointer;
}

/* ── 横屏 / 平板：立绘靠左，按钮靠右 ── */
@media (orientation:landscape) and (max-height:560px){
  #stage{flex-direction:row;padding-left:max(12px,env(safe-area-inset-left))}
  #char{flex:1 1 58%}
  #say{flex:1 1 42%;text-align:left;max-width:42vw;padding:0 10px}
  .talk{width:min(20vw,116px);height:min(20vw,116px);margin:0 4vw 0 0}
}