/* app.css — 儿童编程学习原型 · 共享样式（设计令牌 + 微交互 + 动画） */
:root{
  /* 统一使用系统默认字体栈（不加载外部字体，适配各系统） */
  --sys-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --sys-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
}
html{scroll-behavior:smooth; font-size:18px;} /* 整体放大字号，基准 18px */
body{font-family:var(--sys-sans);}
.font-display, .font-sans{font-family:var(--sys-sans);}
/* 等宽字体保留给代码/示例展示 */
.font-mono, .font-mono *{font-family:var(--sys-mono);}
/* 统一内容宽度：适合 PC / 平板，手机自动收窄 */
.max-w-3xl{max-width:880px !important;}

/* 微交互 */
.tap{transition:transform .15s ease, box-shadow .15s ease;}
.tap:active{transform:scale(.95);}
.card-hover{transition:transform .2s ease, box-shadow .2s ease;}
.card-hover:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(46,34,128,.12);}

/* 星星/成功弹入 */
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.animate-pop{animation:pop .4s ease both;}

/* 答错抖动 */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.shake{animation:shake .4s ease;}

/* 隐藏滚动条但保留滚动 */
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{scrollbar-width:none;}

/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
}