* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* Andika(SIL 开源识字字体,专为初学阅读儿童设计):a 单层教学写法,大小写形态区分明显;打包时内嵌 */
@font-face { font-family:"Andika"; src:url("../fonts/Andika-Regular.woff2") format("woff2"); font-weight:400; }
@font-face { font-family:"Andika"; src:url("../fonts/Andika-Bold.woff2") format("woff2"); font-weight:700; }
:root {
  --en: "Andika","Comic Sans MS","Chalkboard SE","Trebuchet MS","Segoe UI",Arial,sans-serif;
}
html,body { height:100%; }
body {
  font-family: "Segoe UI","Microsoft YaHei",sans-serif;
  background: linear-gradient(180deg,#7fd0ff 0%, #b9edc4 55%, #ffe9a8 100%);
  min-height:100%;
  padding-bottom:40px;
}
/* 童趣背景装饰层:轻轻飘动,不挡点击;低透明度弱化,不与前景卡片抢注意力 */
.deco { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.deco span { position:absolute; opacity:.3; filter:saturate(.8); animation: floaty var(--d,6s) ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
header, .tabs, .wrap { position:relative; z-index:1; }
header { text-align:center; padding:20px 10px 4px; }
/* 卡通贴纸风标题:粗字重+白描边+每字微倾斜+波浪跳动 */
h1 { font-size:46px; letter-spacing:1px; font-weight:900; font-family:var(--en),"Microsoft YaHei"; }
h1 span {
  display:inline-block; --rot:0deg;
  animation: bob 2.6s ease-in-out infinite;
  text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff,
               2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 0 5px 8px #00000026;
}
h1 span:nth-child(1){ --rot:-4deg } h1 span:nth-child(2){ animation-delay:.12s; --rot:2deg }
h1 span:nth-child(3){ animation-delay:.24s; --rot:-3deg } h1 span:nth-child(4){ animation-delay:.36s; --rot:4deg }
h1 span:nth-child(5){ animation-delay:.48s; --rot:-2deg } h1 span:nth-child(6){ animation-delay:.60s; --rot:3deg }
h1 span:nth-child(7){ animation-delay:.72s; --rot:-4deg } h1 span:nth-child(8){ animation-delay:.84s; --rot:2deg }
h1 span:nth-child(9){ animation-delay:.96s; --rot:-3deg }
h1 .mde { font-size:26px; color:#7d97a8; margin:0 4px 0 2px; }
@keyframes bob { 0%,100%{ transform:rotate(var(--rot)) translateY(0) } 50%{ transform:rotate(var(--rot)) translateY(-5px) } }
h1 .r { color:#ff5d5d } h1 .o { color:#ff9f43 } h1 .y { color:#f6c445 }
h1 .g { color:#2ecc71 } h1 .b { color:#3498db } h1 .p { color:#9b59b6 }
.sub { color:#5b7a8c; font-size:15px; margin-top:4px; }

.tabs { display:flex; justify-content:center; gap:14px; margin:16px 0 20px; }
.tab {
  border:none; cursor:pointer; font-family:inherit; white-space:nowrap;
  font-size:19px; padding:10px 26px; border-radius:999px;
  background:#ffffffcc; color:#4a6572; box-shadow:0 3px 0 #00000014;
  transition: transform .1s;
}
.tab:active { transform:scale(.95); }
.tab.on { background:#ff8a5c; color:#fff; box-shadow:0 4px 0 #d96a3f; }

.tab.tvoice { padding:10px 15px; font-size:20px; }
/* 选老师弹窗 */
.vpop { position:fixed; inset:0; background:#0006; display:none; align-items:center; justify-content:center; z-index:60; }
.vpop.show { display:flex; }
.vpanel { background:#fffefa; border-radius:24px; padding:22px 24px; width:min(320px,88vw); box-shadow:0 12px 40px #00000055; }
.vtitle { text-align:center; font-size:19px; color:#4a6572; margin-bottom:16px; }
.vopt {
  display:flex; align-items:center; gap:10px; width:100%; margin-bottom:12px;
  border:3px solid transparent; cursor:pointer; font-family:inherit; font-size:19px;
  padding:14px 16px; border-radius:18px; background:#f4faff; color:#2c5d84;
  box-shadow:0 3px 0 #00000012; transition:transform .1s;
}
.vopt:active { transform:scale(.96); }
.vopt small { margin-left:auto; color:#8aa0ad; font-size:14px; }
.vopt.on { border-color:#7d6bf0; background:#efeaff; }
.vopt.on small::after { content:" ✓"; color:#7d6bf0; font-weight:bold; }

.wrap { max-width:980px; margin:0 auto; padding:0 16px; }

/* ------- 字母表 ------- */
#grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:14px; }
.card {
  background:#fff; border-radius:22px; padding:14px 6px 10px;
  text-align:center; cursor:pointer; box-shadow:0 4px 10px #0000001a;
  border:3px solid transparent; user-select:none;
  transition: transform .12s;
}
.card:hover { transform:translateY(-4px) scale(1.04); }
.card .aa { font-size:40px; font-weight:bold; line-height:1.1; font-family:var(--en); }
.card .em { font-size:26px; margin-top:2px; }
.card:hover .em { animation: wiggle .5s ease-in-out; }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-10deg)} 75%{transform:rotate(10deg)} }

/* ------- 字母详情 ------- */
#detail {
  position:fixed; inset:0; background:#0006; display:none;
  align-items:center; justify-content:center; z-index:50; padding:14px;
}
#detail.show { display:flex; }
.panel {
  background:#fffefa; border-radius:28px; width:min(680px,100%);
  max-height:94vh; overflow-y:auto; overflow-x:hidden; padding:26px 26px 20px; position:relative;
  box-shadow:0 12px 40px #00000055;
}
.close {
  position:absolute; top:14px; right:14px; border:none; cursor:pointer;
  width:42px; height:42px; border-radius:50%; font-size:20px;
  background:#ffe3e3; color:#e05555;
}
.bigletter { text-align:center; font-size:96px; font-weight:bold; line-height:1; font-family:var(--en); }
.bigletter span { display:inline-block; }   /* 脉冲只作用于文字本身,不撑宽面板(整行放大会触发横向滚动条→面板抖动) */
/* 正在发声的聚焦动效:大字母文字/按钮用轻脉冲;单词卡不位移,用呼吸光圈 */
.bigletter span.playing, .saybtn.playing { animation: wpulse .6s ease-in-out infinite; }
@keyframes wpulse { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.09) } }
.word.playing {
  border-color:#ffb84d; background:#fff3d6;
  animation: wglow 1s ease-in-out infinite;
}
@keyframes wglow {
  0%,100% { box-shadow:0 0 0 3px #ffd98044; }
  50%     { box-shadow:0 0 0 9px #ffb84d77; }
}
/* 两钮等宽对称,压缩纵向空间,给单词卡留位置 */
.saybtns { display:flex; justify-content:center; gap:12px; margin:12px 0 6px; }
.saybtn {
  border:none; cursor:pointer; font-family:inherit; font-size:16px;
  flex:1 1 0; max-width:220px; padding:9px 6px; border-radius:14px; color:#fff;
  box-shadow:0 3px 0 #00000022; transition:transform .1s;
}
.saybtn:active { transform:scale(.94); }
.saybtn.name { background:#4aa3ff; }
.saybtn.sound { background:#ff8a5c; }
.saybtn small { display:block; font-size:12px; opacity:.9; margin-top:1px; }
.xnote { text-align:center; color:#b07b2e; font-size:14px; margin:2px 0 6px; }
.words { display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:12px; margin-top:12px; }
.word {
  background:#f4faff; border:2px solid #d7ecff; border-radius:18px;
  padding:12px 6px; text-align:center; cursor:pointer; user-select:none;
  transition:transform .12s;
}
.word:hover { transform:scale(1.05); background:#eaf6ff; }
.word .we { font-size:44px; line-height:1.2; }
.word .we .wsvg { width:46px; height:46px; display:inline-block; vertical-align:middle; }
.word .ww { font-size:20px; font-weight:bold; color:#2c5d84; margin-top:2px; font-family:var(--en); }
.word .ww .fl { font-size:1.3em; }   /* 首字母放大+专属颜色,标识开头字母 */
.word .wi { font-size:13px; color:#6f8ba0; font-family:"Segoe UI",Arial,sans-serif; }  /* 音标行(需IPA字形,不用展示字体) */
.word .wz { font-size:14px; color:#7d97a8; }
.nav { display:flex; justify-content:space-between; margin-top:18px; }
.nav button {
  border:none; cursor:pointer; font-family:inherit; font-size:17px;
  padding:10px 20px; border-radius:16px; background:#e8f0e8; color:#3c6e47;
}
.nav button:disabled { opacity:.35; cursor:default; }

/* ------- 小游戏 ------- */
#quiz { display:none; text-align:center; }
#quiz.show { display:block; }
.stars { font-size:22px; margin-bottom:8px; min-height:30px; }
.qtitle { font-size:20px; color:#4a6572; margin-bottom:14px; }
.playbig {
  border:none; cursor:pointer; font-size:40px; width:110px; height:110px;
  border-radius:50%; background:#ffd93d; box-shadow:0 6px 0 #d9b32e;
  margin-bottom:22px; transition:transform .1s;
}
.playbig:active { transform:scale(.93); }
.opts { display:grid; grid-template-columns:repeat(2,minmax(120px,180px)); gap:16px; justify-content:center; }
.opt {
  border:none; cursor:pointer; font-family:inherit;
  font-size:52px; font-weight:bold; padding:18px 0; border-radius:22px; font-family:var(--en);
  background:#fff; box-shadow:0 5px 0 #00000018; transition:transform .1s;
}
.opt:active { transform:scale(.95); }
.opt.good { background:#c8f7c5; }
.opt.bad { animation:shake .3s; background:#ffd9d9; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.fb { font-size:26px; min-height:40px; margin-top:16px; }

.tip { text-align:center; color:#8aa0ad; font-size:13px; margin-top:26px; }

/* 移动端:压缩详情页纵向空间,单词卡优先 */
@media (max-width: 500px){
  h1 { font-size:34px; }
  h1 .mde { font-size:20px; }
  .tabs { gap:8px; }
  .tab { font-size:16px; padding:9px 14px; }
  .tab.tvoice { padding:8px 12px; font-size:18px; }
  .bigletter { font-size:62px; }
  .panel { padding:18px 14px 14px; border-radius:22px; }
  .close { top:10px; right:10px; width:36px; height:36px; font-size:17px; }
  .saybtns { margin:10px 0 4px; }
  .saybtn { font-size:15px; padding:8px 4px; }
  .word { padding:9px 4px; }
  .word .we { font-size:36px; }
  .word .we .wsvg { width:38px; height:38px; }
  .word .ww { font-size:17px; }
}