/* Join In 四上 Unit 1 —— 课本同风格共享皮肤 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --paper: #FBF3E2; --paper2: #FFFDF7; --blue: #DCEEF9; --line: #EADFC8;
  --ink: #3A3A34; --mut: #8A8578;
  --green: #67A62B; --green-d: #4C7D1F; --green-l: #E8F3D9;
  --orange: #F08A00; --orange-d: #C96E00; --orange-l: #FDEBD0;
  --pink: #E85D8A; --purple: #8B6BC7; --teal: #2FA6A0; --red: #E05A4E; --gold: #F5B301;
  --r: 18px;
}
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--paper); color: var(--ink);
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  -webkit-user-select: none; user-select: none;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(circle at 12% 8%, #F9E7C4 0 90px, transparent 91px),
  radial-gradient(circle at 92% 20%, #DCEEF9 0 70px, transparent 71px),
  radial-gradient(circle at 80% 92%, #E8F3D9 0 100px, transparent 101px); opacity: .7; }
.en { font-family: "Comic Sans MS", "Chalkboard SE", "Segoe UI", sans-serif; }
.wrap { max-width: 780px; margin: 0 auto; padding: 0 16px; }
.topbar { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 0 6px; }
.back { display: inline-flex; align-items: center; gap: 4px; background: var(--paper2); border: 1.5px solid var(--line);
  color: var(--ink); border-radius: 999px; padding: 8px 14px; font-size: 14px; text-decoration: none; }
.badge { display: inline-block; background: var(--orange); color: #fff; font-weight: 700; font-size: 15px;
  padding: 6px 16px; border-radius: 4px 14px 14px 4px; box-shadow: 2px 2px 0 var(--orange-d); }
.badge.b-green { background: var(--green); box-shadow: 2px 2px 0 var(--green-d); }
.badge.b-purple { background: var(--purple); box-shadow: 2px 2px 0 #6B4FA8; }
.badge.b-teal { background: var(--teal); box-shadow: 2px 2px 0 #1F7E79; }
.badge.b-pink { background: var(--pink); box-shadow: 2px 2px 0 #C23D68; }
.htitle { font-size: 24px; font-weight: 800; margin: 10px 0 2px; color: var(--green-d); }
.hsub { font-size: 13px; color: var(--mut); margin-bottom: 12px; }
.card { background: var(--paper2); border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; cursor: pointer;
  background: var(--orange); color: #fff; font-size: 16px; font-weight: 700; font-family: inherit;
  border-radius: 999px; padding: 12px 22px; box-shadow: 0 3px 0 var(--orange-d); transition: transform .12s; }
.btn:active { transform: scale(.95); }
.btn.green { background: var(--green); box-shadow: 0 3px 0 var(--green-d); }
.btn.ghost { background: var(--paper2); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.btn.small { font-size: 14px; padding: 8px 16px; box-shadow: 0 2px 0 var(--orange-d); }
.btn:disabled { opacity: .45; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--paper2); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 8px 14px; font-size: 15px; cursor: pointer; }
.chip.on { background: var(--green-l); border-color: var(--green); color: var(--green-d); font-weight: 700; }
.ptip { background: #FFF8DC; border: 1.5px dashed #E0C868; border-radius: 14px; padding: 10px 12px;
  font-size: 13.5px; line-height: 1.65; margin: 10px 0; }
.ptip b { color: #A87B00; }
.tabs { display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.line { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border-radius: 12px; margin: 5px 0;
  cursor: pointer; border: 1.5px solid transparent; }
.line.playing { background: var(--orange-l); border-color: var(--orange); }
.line .who { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; color: #fff; margin-top: 2px; }
.who.m { background: var(--green); } .who.k { background: var(--orange); } .who.g { background: #4A90D9; } .who.t { background: var(--purple); }
.line .tx { font-size: 17px; line-height: 1.5; }
.rholder { width: 100%; height: 8px; border-radius: 999px; background: #EEE5D0; overflow: hidden; margin-top: 6px; }
.rholder i { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s; }
.stars { display: flex; gap: 4px; justify-content: center; margin: 8px 0; }
.stars i { width: 26px; height: 26px; display: inline-block; opacity: .25; }
.stars i.on { opacity: 1; animation: pop .4s; }
.ovl { position: fixed; inset: 0; background: rgba(40,35,20,.45); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.ovl.show { display: flex; }
.sheet { background: var(--paper2); border-radius: 22px; padding: 22px 18px; max-width: 460px; width: 100%;
  text-align: center; max-height: 86vh; overflow: auto; border: 2px solid var(--line); }
.sheet h3 { font-size: 20px; margin-bottom: 8px; }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
@keyframes pop { 0%{transform:scale(.3)} 70%{transform:scale(1.25)} 100%{transform:scale(1)} }
.pop { animation: pop .35s; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.floaty { animation: floaty 2.6s ease-in-out infinite; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wcard { background: var(--paper2); border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 8px;
  text-align: center; cursor: pointer; transition: transform .12s; }
.wcard:active { transform: scale(.94); }
.wcard img { max-width: 100%; height: 92px; object-fit: contain; }
.wcard .en { font-size: 16px; font-weight: 700; color: var(--green-d); margin-top: 4px; }
.wcard .zh { font-size: 12.5px; color: var(--mut); }
.wcard.right { border-color: var(--green); background: var(--green-l); }
.wcard.wrong { border-color: var(--red); background: #FDEAEA; animation: shake .4s; }
.opt { background: var(--paper2); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px;
  font-size: 17px; cursor: pointer; text-align: center; font-family: inherit; }
.opt.right { border-color: var(--green); background: var(--green-l); }
.opt.wrong { border-color: var(--red); background: #FDEAEA; animation: shake .4s; }
.bigpic { text-align: center; margin: 6px 0; }
.bigpic img { max-width: 100%; max-height: 300px; object-fit: contain; border-radius: 14px; }
.modgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.mod { position: relative; background: var(--paper2); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 14px 12px 12px; text-decoration: none; color: var(--ink); display: block; transition: transform .12s; }
.mod:active { transform: scale(.96); }
.mod .ic { font-size: 30px; }
.mod .nm { font-weight: 800; font-size: 16.5px; margin-top: 6px; }
.mod .ds { font-size: 12px; color: var(--mut); margin-top: 3px; line-height: 1.45; }
.mod .st { position: absolute; top: 10px; right: 10px; font-size: 12px; color: var(--gold); letter-spacing: 1px; }
.mod.locked { opacity: .55; }
.tiger { display: flex; align-items: flex-end; gap: 8px; margin: 6px 0 2px; }
.tiger img { width: 64px; }
.bubble { background: var(--paper2); border: 1.5px solid var(--line); border-radius: 4px 16px 16px 16px;
  padding: 9px 12px; font-size: 14.5px; line-height: 1.6; }
@media print {
  body { background: #fff; }
  body::before, .topbar, .noprint { display: none !important; }
  .card { border: 1px solid #bbb; break-inside: avoid; }
}