/* The house-card look (see design/): strong colour per house on a navy ground, 楷体 for lesson text. */
:root {
  --navy: #232c86; --gold: #ffd23f; --ink: #1b1f4a; --red: #c81e2a; --teal: #2f7d6d; --note: #fff3c4; --quiet: #5a5f86;
  --sans: "Noto Sans", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;   /* Noto Sans first: Noto Sans SC's own ā ī ō ū have their tone marks off to one side */
  --kai: "LXGW WenKai", "Kaiti SC", "STKaiti", KaiTi, serif;
  --play: "ZCOOL KuaiLe", var(--sans);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--navy); color: var(--ink); font-family: var(--sans);
  -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column;
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.en { display: none; font-size: 0.78em; color: var(--teal); font-family: var(--sans); font-weight: 400; }
body.show-en .en { display: block; }
body.show-en span.en { display: inline; margin-left: 6px; }

/* ---------- top bar, shared by every activity ---------- */
.topbar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: var(--navy); flex-wrap: nowrap; }
.brand h1 { margin: 0; font: 400 27px/1.2 var(--play); color: var(--gold); white-space: nowrap; }
.topbar .en { color: #c9cdf3; }
.tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tab { border: 0; background: none; color: #fff; border-radius: 6px; padding: 7px 10px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.tab.active { background: var(--gold); color: var(--ink); font-weight: 700; }
.tab:disabled { color: #8d93cf; cursor: default; }
.bar-btn, .hint-toggle {
  border: 1.5px solid #7f86cc; background: none; color: #fff; border-radius: 6px; padding: 6px 12px; font-size: 15px; font-weight: 500;
  white-space: nowrap; min-height: 36px;
}
.bar-btn[aria-pressed="true"], .hint-toggle[aria-pressed="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.tools-only { display: none; }
body.tools-on .tools-only { display: inline-block; }
@media (max-aspect-ratio: 1/1) { .topbar .brand { display: none; } .topbar { padding: 9px 12px; } .tab { padding: 7px 7px; font-size: 14px; } }

.view { flex: 1; min-height: 0; }

/* ---------- ① the world map: a fixed canvas scaled to fit, so map and passport always share one screen ---------- */
#mapView { position: relative; overflow: hidden; }
.mapc { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mapc[data-orient="land"] { width: 1280px; height: 744px; }
.mapc[data-orient="port"] { width: 820px; height: 1124px; }
.prompt { position: absolute; left: 22px; top: 8px; margin: 0; font: 400 28px/1.3 var(--play); color: var(--gold); white-space: nowrap; }
.prompt .en { color: #c9cdf3; font-size: 15px; }
body.show-en .prompt span.en { display: inline; margin-left: 10px; }
.map { position: absolute; left: 20px; top: 52px; width: 1008px; height: 672px; border: 6px solid #fff; border-radius: 14px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.map > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapc[data-orient="port"] .prompt { left: 18px; top: 12px; font-size: 30px; }
.mapc[data-orient="port"] .map { left: 14px; top: 60px; width: 792px; height: 528px; }
.pin { --r: 42px; position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; }
.mapc[data-orient="port"] .pin { --r: 31px; }
.pin .badge {
  position: absolute; left: calc(-1 * var(--r)); top: calc(-1 * var(--r)); width: calc(2 * var(--r)); height: calc(2 * var(--r)); border-radius: 50%;
  background: var(--tint); box-shadow: 0 0 0 5px var(--c); animation: a1-bob 2.6s ease-in-out infinite;
}
.pin .badge img { position: absolute; left: -5%; top: 4%; width: 110%; height: 92%; object-fit: contain; }
.pin:hover .badge, .pin:focus-visible .badge { scale: 1.08; }
.pin.done .badge { box-shadow: 0 0 0 6px var(--gold); animation: none; }
.pin .tag {
  position: absolute; left: 0; top: calc(var(--r) + 9px); transform: translateX(-50%); padding: 3px 10px; border-radius: 8px; border: 2.5px solid #fff;
  background: var(--c); color: #fff; font: 400 22px/1.2 var(--play); white-space: nowrap;
}
.pin.tag-above .tag { top: auto; bottom: calc(var(--r) + 9px); }
.pin.tag-right .tag { top: 0; left: calc(var(--r) + 9px); transform: translateY(-50%); }
.mapc[data-orient="port"] .pin .tag { font-size: 20px; padding: 2px 8px; }
.pin .tag .en { color: #fff; font-size: 12px; text-align: center; }
.pin .mini-stamp {
  position: absolute; right: calc(-0.95 * var(--r)); top: calc(-1.15 * var(--r)); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 3px solid var(--red); color: var(--red); font: 700 18px/1 var(--sans); rotate: -12deg;
}
.pin.tick-left .mini-stamp { right: auto; left: calc(-0.95 * var(--r)); }

/* the passport */
.passport { position: absolute; left: 1044px; top: 52px; width: 216px; height: 672px; background: #fff; border-radius: 12px; overflow: hidden; }
.passport h2 { margin: 0; height: 54px; display: grid; place-content: center; background: var(--gold); font: 400 25px/1.1 var(--play); color: var(--ink); text-align: center; }
.passport h2 .en { color: var(--ink); font-size: 12px; }
.stamps { display: flex; flex-direction: column; align-items: center; justify-content: space-around; height: 618px; padding: 6px 0; }
.stamp {
  --size: 104px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--faint); box-shadow: inset 0 0 0 2px var(--mid); color: var(--mid); font: 400 calc(var(--size) * 0.24)/1.1 var(--play); rotate: var(--tilt, 0deg);
}
.stamp:nth-child(odd) { --tilt: -9deg; } .stamp:nth-child(even) { --tilt: 8deg; }
.stamp small { display: block; font: 700 calc(var(--size) * 0.13)/1.3 var(--sans); }
.stamp.got { background: #fff; color: var(--red); box-shadow: inset 0 0 0 4.5px var(--red), inset 0 0 0 7px #fff, inset 0 0 0 8.5px var(--red); }
.stamp.new { animation: a1-thump 0.6s ease-out; }
.mapc[data-orient="port"] .passport { left: 14px; top: 604px; width: 792px; height: 500px; }
.mapc[data-orient="port"] .passport h2 { height: 60px; font-size: 28px; }
.mapc[data-orient="port"] .stamps { height: 440px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; gap: 20px 92px; padding: 0 40px; }
.mapc[data-orient="port"] .stamp { --size: 168px; }

/* ---------- ① a house: the whole screen is one big card in the house's colour ---------- */
#houseView {
  margin: 6px 12px 12px; padding: 0 12px 12px; border-radius: 18px; background: var(--c); display: grid; gap: 0 12px;
  grid-template-columns: minmax(0, 1.9fr) minmax(340px, 1fr); grid-template-rows: auto minmax(0, 1fr);
}
.hv-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; height: 56px; color: #fff; }
.hv-head h2 { margin: 0; font: 400 40px/1.1 var(--play); color: #fff; }
.place { margin: 8px 0 0; font-size: 19px; font-weight: 500; color: #fff; }
.place .en, .hv-head .en { color: #fff; }
.back { height: 40px; padding: 0 16px; border: 2px solid #fff; border-radius: 8px; background: none; color: #fff; font-size: 18px; font-weight: 500; white-space: nowrap; }
.stage { position: relative; min-height: 0; overflow: hidden; border-radius: 12px; background: var(--pale); transition: background 1.5s; }
.stage.night { background: linear-gradient(#0d1730, #24304d 70%); }
.stage.winter { background: linear-gradient(#dfe7ee, #eef1f4 70%); }
.stage.summer { background: linear-gradient(#ffe3b0, #f7e6c4 70%); }
#three { width: 100%; height: 100%; display: block; touch-action: none; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; font: 400 26px/1.3 var(--play); color: var(--ink); text-align: center; }
.drag-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 8px; background: #fff; color: var(--ink);
  font-size: 15px; font-weight: 500; pointer-events: none; transition: opacity 0.6s; text-align: center; white-space: nowrap;
}

/* the dots on the 3D house: gold to tap, a tick once seen, locked until the text has been heard */
.hotspots { position: absolute; inset: 0; pointer-events: none; }
.stage:has(.finish:not(.hidden)) .hotspots { visibility: hidden; }
.hs {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; width: 46px; height: 46px; padding: 0; border: 3.5px solid #fff; border-radius: 50%;
  background: var(--gold); color: var(--ink); font: 700 22px/1 var(--sans); transition: opacity 0.3s, transform 0.2s;
}
.hs::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid var(--gold); animation: a1-ping 1.8s ease-out infinite; }
.hs.seen { background: var(--teal); color: #fff; font-size: 0; }
.hs.seen::after { content: "✓"; font-size: 24px; }
.hs.seen::before { animation: none; opacity: 0; }
.hs.hidden-behind { opacity: 0.25; }
.hs .hs-label {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); padding: 2px 8px; border-radius: 5px; background: var(--ink); color: #fff;
  font: 500 15px/1.4 var(--sans); white-space: nowrap;
}
.hs:hover, .hs:focus-visible { transform: translate(-50%, -50%) scale(1.12); }
.hs.playing { transform: translate(-50%, -50%) scale(1.15); background: #fff; color: var(--ink); box-shadow: 0 0 0 5px var(--gold); }
.hs.playing::before { animation: none; opacity: 0; }
.hs.pulse { animation: a1-pulse 0.7s ease-out 2; }
.hotspots.locked .hs { background: #d9dbe8; color: #7b7f9e; }
.hotspots.locked .hs::before { animation: none; opacity: 0; }
.hotspots.locked .hs::after {
  content: ""; position: absolute; right: -9px; top: -11px; width: 22px; height: 24px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cpath d='M6 11V7a5 5 0 0 1 10 0v4' fill='none' stroke='%237b7f9e' stroke-width='2.4'/%3E%3Crect x='2.5' y='10.5' width='17' height='12' rx='3' fill='%23fff' stroke='%237b7f9e' stroke-width='2'/%3E%3C/svg%3E");
}

/* what the animations put over the house */
.overlay { position: absolute; inset: 0; pointer-events: none; }
.callout {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 92%; padding: 8px 20px; border: 3px solid var(--ink); border-radius: 12px;
  background: #fff; color: var(--ink); font: 700 26px/1.35 var(--kai); text-align: center;
}
.callout .en { font-size: 14px; }
.thermo { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; pointer-events: none; }
.thermo div { min-width: 110px; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); text-align: center; font-size: 15px; font-weight: 500; }
.thermo b { display: block; font: 700 28px/1.2 var(--kai); white-space: nowrap; }
.scope { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 44%, rgba(10, 10, 10, 0.92) 45%); }
.back-btn {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); pointer-events: auto; min-height: 52px; padding: 8px 28px; border: 0; border-radius: 10px;
  background: var(--gold); color: var(--ink); font: 400 24px/1.2 var(--play);
}
.back-btn .en { display: none; }
body.show-en .back-btn .en { display: inline; margin-left: 6px; font-size: 13px; color: var(--ink); }

/* the finish stamp */
.finish { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 22px; background: rgba(27, 31, 74, 0.45); }
.big-stamp {
  width: min(300px, 62%); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: #fff; color: var(--red);
  box-shadow: inset 0 0 0 9px var(--red), inset 0 0 0 16px #fff, inset 0 0 0 19px var(--red); rotate: -10deg; font-family: var(--play);
}
.big-stamp b { font-size: 84px; font-weight: 400; line-height: 1.05; }
.big-stamp span { font-size: 40px; }
.finish.show .big-stamp { animation: a1-bigthump 0.7s cubic-bezier(.2,.8,.3,1.2); }
.finish-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn-gold, .btn-white { min-height: 64px; padding: 8px 30px; border: 0; border-radius: 10px; color: var(--ink); font: 400 26px/1.2 var(--play); }
.btn-gold { background: var(--gold); } .btn-white { background: #fff; }
.btn-gold .en, .btn-white .en { color: var(--ink); font-size: 13px; }

/* the text panel */
.card { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px; border-radius: 12px; background: #fff; overflow-y: auto; }
.read-btn {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; height: 58px; border: 2.5px solid #cfd2e2; border-radius: 10px; background: #fff; color: var(--ink);
  font: 400 27px/1 var(--play);
}
.read-btn svg { width: 30px; height: 30px; }
.read-btn .en { font-size: 14px; }
.read-btn.nudge { border-color: var(--gold); background: var(--gold); animation: a1-nudge 1.6s ease-out infinite; }
.read-btn.playing { border-color: var(--gold); background: var(--gold); animation: none; }
.read-btn.shake { animation: a1-shake 0.45s ease, a1-nudge 1.6s ease-out infinite; }
.lock-note { flex: none; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--note); text-align: center; font: 700 19px/1.35 var(--kai); }
.lock-note .en { font-size: 13px; }

/* the lesson text: pinyin floats above marked words without moving anything */
.passage { margin: 4px 4px 0; font: 700 clamp(21px, 2.35vw, 40px)/2.05 var(--kai); color: var(--ink); --py: var(--c); }
.passage .t { display: inline-block; white-space: nowrap; }
.passage .w { position: relative; display: inline-block; }
.passage .py {
  position: absolute; left: 50%; bottom: calc(100% - 0.62em); transform: translateX(-50%); white-space: nowrap;
  font: 500 0.5em/1 var(--sans); color: var(--py);
}
.passage .cp { display: none; }
.passage .c { border-radius: 3px; transition: background 0.3s; }
.passage .c.lit { background: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.passage .c[data-hs] { cursor: pointer; }
.passage.locked .c[data-hs] { cursor: default; }
.passage.all-pinyin { line-height: 1.3; }
.passage.all-pinyin .py { display: none; }
.passage.all-pinyin .c { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; vertical-align: bottom; margin: 0 1px; }
.passage.all-pinyin .cp { display: block; font: 500 0.48em/1.15 var(--sans); color: var(--py); }
.english { display: none; margin: 0; padding: 8px 10px; border-radius: 8px; background: #e9f2ee; color: var(--teal); font-size: 15px; line-height: 1.45; }
body.show-en .english { display: block; }
@media (min-aspect-ratio: 1/1) {
  /* with English on there's more to fit: smaller Chinese, and the dot buttons stay pinned in view if it still has to scroll */
  body.show-en .passage { font-size: clamp(18px, 1.85vw, 30px); line-height: 1.85; }
  body.show-en .passage.all-pinyin { line-height: 1.25; }
  .english { font-size: 14px; line-height: 1.35; padding: 6px 8px; }
  .chips { position: sticky; bottom: -16px; margin: 0 -16px -16px; padding: 8px 16px 16px; background: #fff; }
}

/* progress and the dot buttons */
.progress { flex: none; display: flex; align-items: center; justify-content: space-between; margin: auto 2px 0; color: var(--quiet); font-size: 18px; font-weight: 500; }
.card.is-locked .progress { visibility: hidden; }
.counter { display: flex; gap: 6px; }
.counter i { width: 16px; height: 16px; border-radius: 50%; background: #dfe1ec; }
.counter i.on { background: var(--teal); }
.chips { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 10px; border: 2.5px solid var(--c); border-radius: 8px; background: #fff; color: var(--ink); text-align: left;
  font: 700 21px/1.1 var(--kai);
}
.chip .dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); font: 700 16px/1 var(--sans); }
.chip .en { font-size: 12px; }
.chip.seen { border-color: var(--teal); background: #e3efea; }
.chip.seen .dot { background: var(--teal); color: #fff; }
.chip.on { border-color: var(--gold); background: var(--gold); }
.chip.on .dot { background: #fff; color: var(--ink); }
.chips.locked .chip { border-color: #cfd2e2; background: #eef0f6; color: #9a9db5; }
.chips.locked .chip .dot { background: #cfd2e2; color: var(--ink); }
.chips.busy .chip:not(.on) { opacity: 0.6; }

.toast {
  position: fixed; left: 50%; top: 14px; z-index: 10; transform: translate(-50%, -200%); padding: 10px 22px; border-radius: 10px; background: var(--gold); color: var(--ink);
  font: 400 22px/1.3 var(--play); transition: transform 0.4s; visibility: hidden;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; }

/* an upright iPad: the house on top, the text underneath */
@media (max-aspect-ratio: 1/1) {
  #houseView { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 46fr) minmax(0, 40fr); gap: 10px 0; }
  .hv-head { grid-column: auto; height: 46px; margin-bottom: -6px; }
  .card { display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; align-content: start; gap: 10px 20px; }
  .read-btn { grid-column: 1; grid-row: 1; }
  .progress { grid-column: 2; grid-row: 1; margin: 0; justify-content: flex-start; gap: 14px; }
  .lock-note { grid-column: 1 / -1; grid-row: 2; }
  .passage { grid-column: 1 / -1; grid-row: 3; font-size: clamp(20px, 4.1vw, 40px); }
  .english { grid-column: 1 / -1; grid-row: 4; }
  .chips { grid-column: 1 / -1; grid-row: 5; grid-template-columns: repeat(4, 1fr); }
  .chip { font-size: clamp(16px, 2.6vw, 21px); }
  .callout { font-size: 22px; }
}

@keyframes a1-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes a1-ping { from { transform: scale(0.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes a1-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.95); } 100% { box-shadow: 0 0 0 22px rgba(255, 210, 63, 0); } }
@keyframes a1-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.7); } 50% { box-shadow: 0 0 0 9px rgba(255, 210, 63, 0); } }
@keyframes a1-shake { 0%, 100% { translate: 0; } 20% { translate: -8px; } 40% { translate: 8px; } 60% { translate: -5px; } 80% { translate: 5px; } }
@keyframes a1-thump { 0% { scale: 2.2; opacity: 0; } 70% { scale: 0.92; opacity: 1; } 100% { scale: 1; } }
@keyframes a1-bigthump { 0% { scale: 3; opacity: 0; } 60% { scale: 0.9; opacity: 1; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pin .badge, .hs::before, .read-btn, .stamp.new, .finish.show .big-stamp { animation: none !important; }
}

/* ---------- ② 房屋小档案: house cards, drawn on a fixed canvas that is scaled to fit (see design/activity2) ---------- */
#a2View { position: relative; overflow: hidden; }
.a2 { position: absolute; left: 0; top: 0; transform-origin: 0 0; color: #fff; user-select: none; -webkit-user-select: none; }
.a2[data-orient="land"] { width: 1280px; height: 744px; }
.a2[data-orient="port"] { width: 820px; height: 1124px; }
.a2 .en { color: #c9cdf3; font-family: var(--sans); }

/* the words on a card: phrases keep together, pinyin floats above marked words without moving anything */
.a2-text { font-family: var(--kai); font-weight: 700; color: var(--ink); text-align: center; line-height: 1.8; }
.a2-text .ph { display: inline-block; white-space: nowrap; }
.a2-text .w { position: relative; display: inline-block; }
.a2-text .py {
  position: absolute; left: 50%; bottom: calc(100% - 0.36em); transform: translateX(-50%); white-space: nowrap;
  font: 500 max(10.5px, 0.55em)/1 var(--sans); color: var(--py, var(--ink));
}
.a2-text .cp, .a2-text .br { display: none; }
.a2[data-orient="land"] .slot .br, .a2[data-orient="land"] .a2-drag .br { display: inline; }
.all-pinyin .a2-text { line-height: 1.1; }
.all-pinyin .a2-text .py { display: none; }
.all-pinyin .a2-text .ph { display: block; white-space: normal; }      /* each phrase its own line, so no stranded characters */
.all-pinyin .a2-text .w, .all-pinyin .hc-stat.s0 .a2-text .ph, .all-pinyin .a2-play .a2-text .ph { display: inline; }
.all-pinyin .a2-text .c { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; vertical-align: bottom; margin: 0 1px 2px; }
.all-pinyin .a2-text .cp { display: block; font: 500 0.56em/1.15 var(--sans); color: var(--py, var(--ink)); }

/* the top row: pile, card in play, set aside, my cards */
.a2-top { position: absolute; inset: 0 0 auto 0; height: 128px; }
.a2-pile { position: absolute; left: 30px; top: 8px; width: 106px; height: 110px; }
.a2-pile i, .a2-pile b { position: absolute; width: 96px; height: 74px; border: 2px solid #fff; border-radius: 8px; background: #4c54a5; }
.a2-pile i:nth-child(1) { left: 10px; top: 0; }
.a2-pile i:nth-child(2) { left: 5px; top: 5px; }
.a2-pile b { left: 0; top: 10px; display: grid; place-items: center; font: 700 36px/1 var(--sans); color: #fff; }
.a2-pile small { position: absolute; left: 0; top: 92px; width: 106px; text-align: center; font-size: 15px; color: #c9cdf3; font-weight: 500; white-space: nowrap; }
.a2-pile.empty i { display: none; }
.a2-play {
  position: absolute; left: 176px; top: 10px; width: 610px; height: 106px; background: #fff; border: 5px solid var(--gold); border-radius: 12px;
  transform: rotate(-1.2deg); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: grab; touch-action: none; --py: #7a3fc4;
}
.a2-play .a2-text { font-size: 36px; line-height: 1.7; }
.a2-play .a2-text.long { font-size: 30px; line-height: 1.55; }
.all-pinyin .a2-play .a2-text { font-size: 26px; line-height: 1.1; }
.all-pinyin .a2-play .a2-text.long { font-size: 20px; }
body.show-en .a2-play .a2-text { line-height: 1.35; }
body.show-en .a2-play .a2-text.long { font-size: 24px; line-height: 1.25; }
body.show-en .all-pinyin .a2-play .a2-text { font-size: 22px; line-height: 1.05; }
body.show-en .all-pinyin .a2-play .a2-text.long { font-size: 18px; }
.a2-tip { position: absolute; left: 14px; top: 8px; font-size: 14px; color: #6a6f9e; font-weight: 500; }
.a2-tip .en { display: none; }
body.show-en .a2-tip .en { display: inline; margin-left: 6px; color: #2f7d6d; }
.a2-play-en { display: none; font-size: 14px; color: #2f7d6d !important; line-height: 1.2; }
body.show-en .a2-play-en { display: block; }
.a2-hand { display: none; position: absolute; right: 18px; top: 26px; width: 52px; height: 52px; border-radius: 50%; background: #fff3c4; color: var(--ink); padding: 10px; }
.a2-hand svg { display: block; width: 100%; height: 100%; }
.a2-play.first .a2-hand { display: block; animation: a2-bob 1.1s ease-in-out infinite; }
.a2-play.lifted { background: none; border: 2.5px dashed #7f86cc; cursor: grabbing; }
.a2-play.lifted > * { visibility: hidden; }
.a2-play.bounce { animation: a2-wiggle 0.45s ease-out; }
.a2-aside {
  position: absolute; left: 806px; top: 40px; width: 112px; height: 46px; border: 2px solid #fff; border-radius: 8px; background: none; color: #fff;
  font: 500 17px/1 var(--sans);
}
.a2-aside:disabled { opacity: 0.4; }
.a2-aside .en { display: none; }
.a2-mine { position: absolute; left: 950px; top: 12px; width: 310px; }
.a2-mine h3 { margin: 0 0 8px; font: 400 18px/1.2 var(--play); color: #fff; }
.a2-mine h3 .en { display: none; }
.a2-minis { display: flex; gap: 10px; }
.a2-mini { position: relative; width: 52px; height: 70px; border-radius: 6px; border: 1.5px solid #5b63b5; background: #1a2165; display: grid; place-items: center; overflow: hidden; }
.a2-mini b { color: #7a82cc; font: 700 22px/1 var(--sans); }
.a2-mini img { display: none; width: 46px; }
.a2-mini.got { background: var(--c); border: 3px solid var(--gold); }
.a2-mini.got img { display: block; }
.a2-mini.got b { display: none; }

/* the finish banner replaces the top row */
.a2-end { position: absolute; inset: 0 0 auto 0; height: 128px; }
.a2-end-title { position: absolute; left: 40px; top: 26px; margin: 0; font: 400 52px/1.2 var(--play); color: var(--gold); white-space: nowrap; }
.a2-end-title .en { font-size: 16px; color: #c9cdf3; }
.a2-spark { position: absolute; color: var(--gold); display: block; }
.a2-spark svg { display: block; width: 100%; height: 100%; }
.a2-spark.s1 { left: 16px; top: 18px; width: 26px; height: 26px; }
.a2-spark.s2 { left: 530px; top: 8px; width: 34px; height: 34px; }
.a2-spark.s3 { left: 574px; top: 64px; width: 20px; height: 20px; }
.a2-again {
  position: absolute; right: 26px; top: 22px; width: 240px; height: 68px; border: 0; border-radius: 10px; background: var(--gold); color: var(--ink);
  font: 400 27px/1 var(--play);
}
.a2-go3 {
  position: absolute; right: 280px; top: 22px; width: 300px; height: 68px; border: 3px solid var(--gold); border-radius: 10px; background: none; color: var(--gold);
  font: 400 27px/1 var(--play);
}
.a2-again .en, .a2-go3 .en { display: none; }

/* the five house cards */
.a2-houses { position: absolute; left: 0; top: 0; }
.hc { position: absolute; left: calc(20px + var(--i) * 251px); top: 130px; width: 236px; height: 604px; border-radius: 16px; background: var(--c); }
.hc.done { outline: 6px solid var(--gold); outline-offset: -1px; }
.hc h2 { position: absolute; left: 16px; top: 8px; margin: 0; font: 400 34px/1.2 var(--play); color: #fff; }
.hc-say {
  position: absolute; right: 12px; top: 8px; width: 40px; height: 40px; padding: 9px; border: 0; border-radius: 50%; background: #fff; color: var(--c);
}
.hc-say::before { content: ""; position: absolute; inset: -6px; }
.hc-say svg { display: block; width: 100%; height: 100%; }
.hc-say.playing { background: var(--gold); color: var(--ink); }
.hc-say.ring { box-shadow: 0 0 0 5px var(--gold); animation: a2-ring 1s ease-in-out infinite; }
.hc-pic { position: absolute; left: 10px; top: 56px; width: 216px; height: 158px; border-radius: 10px; background: var(--tint); }
.hc-pic img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.hc-stamp {
  display: none; position: absolute; right: -2px; bottom: -6px; width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 4px solid var(--red); color: var(--red);
  place-items: center; font: 400 25px/1 var(--play); transform: rotate(-14deg); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px var(--red);
}
.hc.done .hc-stamp { display: grid; }
.hc.just .hc-stamp { animation: a2-thump 0.5s cubic-bezier(.2,1.4,.4,1); }
.hc-stats { position: absolute; left: 10px; top: 222px; width: 216px; height: 372px; padding: 4px 8px; border-radius: 10px; background: #fff; display: flex; flex-direction: column; }
.hc-stat { display: flex; flex-direction: column; }
.hc-stat.s0 { height: 84px; } .hc-stat.s1 { height: 130px; } .hc-stat.s2 { height: 150px; }
.hc-label { height: 26px; padding: 3px 4px 0; font: 700 16px/1.3 var(--sans); color: var(--c); white-space: nowrap; }
.hc-label .en { font-size: 11px; color: #5a5f86; margin-left: 4px; }
.slot {
  flex: 1; margin-bottom: 6px; padding: 0 3px; border: 0; border-radius: 7px; background: var(--faint); display: flex; align-items: center; justify-content: center; min-height: 0; width: 100%;
  --py: var(--c);
}
.slot .q { font: 700 30px/1 var(--sans); color: var(--mid); }
.slot .a2-text { font-size: 18.5px; }
.all-pinyin .slot .a2-text { font-size: 16px; }
.slot.filled { background: #fff; box-shadow: inset 0 0 0 2.5px var(--c); }
.slot.hot { background: #fff3c4; box-shadow: inset 0 0 0 4px #f2a900; }
.slot.hot .q { color: #f2a900; }
.slot.wrong { background: #fdeaea; box-shadow: inset 0 0 0 4px var(--red); animation: a2-shake 0.4s ease-out; }
.slot .x { font: 700 34px/1 var(--sans); color: var(--red); }

/* the card under the finger: shrunk to slot size so it's easy to aim */
.a2-drag {
  position: absolute; z-index: 20; width: 200px; min-height: 100px; padding: 8px 4px; text-align: center;
  background: #fff; border: 4px solid var(--gold); border-radius: 10px; font-size: 18.5px; rotate: 3deg; pointer-events: none;
  box-shadow: 0 10px 16px rgba(11, 15, 58, 0.55);
}
.all-pinyin .a2-drag { font-size: 16px; }

/* the hint bubble */
.a2-bubble { position: absolute; z-index: 15; width: 212px; padding: 10px 8px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; text-align: center; animation: a2-pop 0.2s ease-out; }
.a2-bubble p { margin: 0; font: 700 20px/1.4 var(--kai); color: var(--ink); white-space: nowrap; }
.a2-bubble .en { font-size: 12px; line-height: 1.25; color: #2f7d6d; margin-top: 3px; }
.a2-tail { position: absolute; width: 28px; height: 30px; margin-left: -14px; }
.a2-tail svg { display: block; width: 100%; height: 100%; }
.a2-bubble.down .a2-tail { top: calc(100% - 2px); }
.a2-bubble.up .a2-tail { bottom: calc(100% - 2px); transform: rotate(180deg); }

/* an upright iPad: each card turns on its side, so all five still show at once */
.a2[data-orient="port"] .a2-top, .a2[data-orient="port"] .a2-end { height: 118px; }
.a2[data-orient="port"] .a2-pile { left: 16px; top: 2px; transform: scale(0.875); transform-origin: 0 0; }
.a2[data-orient="port"] .a2-play { left: 120px; top: 4px; width: 524px; height: 104px; }
.a2[data-orient="port"] .a2-play .a2-text { font-size: 32px; }
.a2[data-orient="port"] .a2-play .a2-text.long { font-size: 26px; }
.a2[data-orient="port"].all-pinyin .a2-play .a2-text { font-size: 24px; }
.a2[data-orient="port"].all-pinyin .a2-play .a2-text.long { font-size: 19px; }
body.show-en .a2[data-orient="port"] .a2-play .a2-text.long { font-size: 22px; }
body.show-en .a2[data-orient="port"].all-pinyin .a2-play .a2-text { font-size: 20px; }
body.show-en .a2[data-orient="port"].all-pinyin .a2-play .a2-text.long { font-size: 17px; }
.a2[data-orient="port"] .a2-aside { left: 660px; top: 6px; width: 146px; height: 44px; }
.a2[data-orient="port"] .a2-mine { left: 660px; top: 60px; width: 150px; }
.a2[data-orient="port"] .a2-mine h3 { display: none; }
.a2[data-orient="port"] .a2-minis { gap: 4px; }
.a2[data-orient="port"] .a2-mini { width: 26px; height: 36px; border-radius: 4px; }
.a2[data-orient="port"] .a2-mini b, .a2[data-orient="port"] .a2-mini.got img { display: none; }
.a2[data-orient="port"] .a2-mini.got { border-width: 2px; }
.a2[data-orient="port"] .a2-end-title { left: 24px; top: 28px; font-size: 40px; }
.a2[data-orient="port"] .a2-spark.s2 { left: 420px; } .a2[data-orient="port"] .a2-spark.s3 { left: 456px; top: 70px; }
.a2[data-orient="port"] .a2-again { right: 16px; top: 62px; width: 240px; height: 50px; font-size: 22px; }
.a2[data-orient="port"] .a2-go3 { right: 16px; top: 6px; width: 240px; height: 50px; font-size: 22px; }
.a2[data-orient="port"] .hc { left: 14px; top: calc(122px + var(--i) * 198px); width: 792px; height: 190px; border-radius: 14px; }
.a2[data-orient="port"] .hc h2 { left: 14px; top: 8px; font-size: 30px; }
.a2[data-orient="port"] .hc-say { left: 129px; right: auto; top: 7px; width: 38px; height: 38px; padding: 8px; }
.a2[data-orient="port"] .hc-pic { left: 10px; top: 50px; width: 162px; height: 130px; border-radius: 9px; }
.a2[data-orient="port"] .hc-stamp { width: 56px; height: 56px; font-size: 19px; right: -4px; bottom: -4px; }
.a2[data-orient="port"] .hc-stats { left: 178px; top: 10px; width: 604px; height: 170px; padding: 0 6px; flex-direction: row; gap: 6px; border-radius: 9px; }
.a2[data-orient="port"] .hc-stat { height: 100%; }
.a2[data-orient="port"] .hc-stat.s0 { width: 136px; } .a2[data-orient="port"] .hc-stat.s1 { width: 220px; } .a2[data-orient="port"] .hc-stat.s2 { width: 228px; }
.a2[data-orient="port"] .hc-label { height: 28px; padding-top: 6px; font-size: 15px; }
.a2[data-orient="port"] .slot .a2-text { font-size: 18px; }
.a2[data-orient="port"].all-pinyin .slot .a2-text { font-size: 16px; }

@keyframes a2-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes a2-wiggle { 0% { translate: 0; } 25% { translate: -8px 0; } 55% { translate: 6px 0; } 80% { translate: -3px 0; } 100% { translate: 0; } }
@keyframes a2-shake { 0%, 100% { translate: 0; } 25% { translate: -5px 0; } 60% { translate: 4px 0; } }
@keyframes a2-thump { 0% { transform: rotate(-14deg) scale(2.4); opacity: 0; } 100% { transform: rotate(-14deg) scale(1); opacity: 1; } }
@keyframes a2-ring { 0%, 100% { box-shadow: 0 0 0 4px var(--gold); } 50% { box-shadow: 0 0 0 8px var(--gold); } }
@keyframes a2-pop { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .a2 *, .a2 { animation: none !important; }
}

/* ---------- ③ 房屋小医生: one patient at a time, on the same fixed canvas as Activity 2 (see design/activity3) ---------- */
#a3View { position: relative; overflow: hidden; }
.a3 { position: absolute; left: 0; top: 0; transform-origin: 0 0; color: var(--ink); user-select: none; -webkit-user-select: none; --py: var(--quiet); }
.a3[data-orient="land"] { width: 1280px; height: 744px; }
.a3[data-orient="port"] { width: 820px; height: 1124px; }
.a3 .en { color: var(--teal); font-family: var(--sans); font-weight: 500; }
.a3 section { position: absolute; inset: 0; }

/* lesson words: pinyin floats above marked words without moving anything */
.a3-t { font-family: var(--kai); font-weight: 700; }
.a3-t .ln { display: block; white-space: nowrap; }
.a3-t .w { position: relative; display: inline-block; }
.a3-t .py { position: absolute; left: 50%; bottom: calc(100% - 0.12em); transform: translateX(-50%); white-space: nowrap; font: 500 max(11px, 0.46em)/1 var(--sans); color: var(--py); }
.a3-t .cp { display: none; }
.all-pinyin .a3-t .py { display: none; }
.all-pinyin .a3-t .c { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; vertical-align: bottom; margin: 0 1px; }
.all-pinyin .a3-t .cp { display: block; font: 500 0.46em/1.15 var(--sans); color: var(--py); }

/* the patient's chart */
.a3-chart { position: absolute; left: 24px; top: 10px; width: 1232px; height: 410px; background: #fff; border-radius: 14px; }
.a3-head { position: absolute; inset: 0 0 auto 0; height: 54px; padding: 0 8px 0 16px; display: flex; align-items: center; gap: 10px; background: var(--gold); border-radius: 14px 14px 0 0; }
.a3-head svg { width: 30px; height: 30px; flex: none; }
.a3-title { font: 400 26px/1 var(--play); white-space: nowrap; }
.a3-title .en { font-size: 15px; color: var(--ink); }
.a3-dots { margin-left: auto; display: flex; gap: 8px; }
.a3-dots i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 2.5px solid var(--ink); font: 700 20px/1 var(--sans); }
.a3-dots i.now { background: var(--ink); color: var(--gold); }
.a3-dots i.done { background: #fff; border: 3px solid var(--red); color: var(--red); }
.a3-scene { position: absolute; left: 20px; top: 68px; width: 446px; height: 319px; border-radius: 10px; object-fit: cover; }
.a3-says { position: absolute; left: 504px; top: 86px; width: 708px; height: 282px; padding: 0 36px; display: flex; flex-direction: column; justify-content: center; background: var(--note); border: 3px solid var(--ink); border-radius: 16px; }
.a3-says::before { content: ""; position: absolute; left: -15px; top: 50%; width: 26px; height: 26px; margin-top: -13px; background: var(--note); border: solid var(--ink); border-width: 0 0 3px 3px; transform: rotate(45deg); }
.a3-says .a3-t { font-size: 46px; line-height: 80px; }
.a3-says .en { font-size: 19px; line-height: 1.3; margin-top: 6px; }
.all-pinyin .a3-says .a3-t { font-size: 36px; line-height: 1.2; }
body.show-en .a3-says .a3-t { font-size: 38px; line-height: 62px; }
body.show-en .all-pinyin .a3-says .a3-t { font-size: 30px; line-height: 1.15; }

/* the question, and the hint that takes its place */
.a3-q { position: absolute; left: 0; right: 0; top: 426px; margin: 0; text-align: center; font: 400 30px/44px var(--play); color: var(--gold); --py: #c9cdf3; }
.a3-q .ln { display: inline; }
.a3-q .en { font-size: 15px; color: #c9cdf3; }
.all-pinyin .a3-q { top: 422px; font-size: 25px; line-height: 1.1; }
.a3-hint { position: absolute; left: 50%; bottom: 272px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; width: max-content; max-width: 1240px; min-height: 46px; padding: 3px 18px 3px 8px; background: #fff; border: 3px solid var(--red); border-radius: 8px; animation: a2-pop 0.2s ease-out; }
.a3-hint-say { flex: none; width: 38px; height: 38px; padding: 7px; border: 0; border-radius: 50%; background: none; color: var(--red); }
.a3-hint-say svg { display: block; width: 100%; height: 100%; }
.a3-hint-say.playing { background: var(--gold); color: var(--ink); }
.a3-hint .a3-t { font-size: 24px; line-height: 30px; padding-top: 6px; }
.a3-hint .en { font-size: 14px; line-height: 1.25; }
.all-pinyin .a3-hint .a3-t { font-size: 22px; line-height: 1.1; padding-top: 0; }
.all-pinyin .a3-hint.long .a3-t { font-size: 19px; }

/* the five house cards */
.a3-card { position: absolute; left: calc(32px + var(--i) * 246px); top: 476px; width: 232px; height: 250px; padding: 0; border: 3px solid #fff; border-radius: 12px; background: var(--c); transition: translate 0.15s; }
.a3-card:not(:disabled):hover { translate: 0 -6px; }
.a3-card:not(:disabled):active { translate: 0 2px; }
.a3-card:disabled { cursor: default; }
.a3-card h3 { position: absolute; inset: 0 0 auto 0; margin: 0; height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 400 32px/1 var(--play); color: #fff; white-space: nowrap; }
.a3-card h3 .en { font-size: 13px; color: #fff; margin: 0; }
.a3-card-pic { position: absolute; left: 7px; right: 7px; top: 52px; bottom: 7px; border-radius: 8px; background: var(--pale); }
.a3-card-pic img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.a3-card.tried { animation: a2-shake 0.4s ease-out; }
.a3-card.tried::after { content: ""; position: absolute; inset: -3px; border-radius: 12px; background: var(--navy); opacity: 0.62; }

/* the right answer */
.a3-house { position: absolute; left: 24px; top: 10px; width: 500px; height: 710px; border: 3px solid #fff; border-radius: 14px; background: var(--c); z-index: 2; }
.a3-house h2 { margin: 0; height: 69px; display: grid; place-items: center; font: 400 44px/1 var(--play); color: #fff; }
.a3-house-pic { position: absolute; left: 11px; right: 11px; top: 69px; bottom: 11px; border-radius: 10px; background: var(--pale); }
.a3-house-pic img { position: absolute; inset: 0 8px 40px; width: calc(100% - 16px); height: calc(100% - 40px); object-fit: contain; }
.a3-stamp {
  position: absolute; right: 42px; bottom: 44px; width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--red); font: 400 31px/1 var(--play); rotate: -12deg;
  box-shadow: inset 0 0 0 5px var(--red), inset 0 0 0 9px #fff, inset 0 0 0 10.5px var(--red); animation: a3-thump 0.45s cubic-bezier(.2,1.4,.4,1) 0.3s backwards;
}
.a3-thanks { position: absolute; left: 540px; top: 10px; width: 716px; height: 212px; background: #fff; border-radius: 14px; }
.a3-happy { position: absolute; left: 16px; top: 62px; width: 134px; height: 142px; border-radius: 10px; object-fit: cover; }
.a3-thanks-words { position: absolute; left: 168px; top: 62px; bottom: 8px; display: flex; flex-direction: column; justify-content: center; font-size: 40px; line-height: 1.2; }
.a3-thanks-words .en { display: none; margin: 4px 0 0; font-size: 17px; }
body.show-en .a3-thanks-words span.en { display: block; }
.all-pinyin .a3-thanks-words { font-size: 34px; }
.a3-reason { position: absolute; left: 540px; top: 236px; width: 716px; height: 350px; padding: 22px 36px 0; background: #fff; border-radius: 14px; }
.a3-correct { display: block; font: 400 58px/1.1 var(--play); color: var(--c); }
.a3-correct .en { font-size: 18px; }
.a3-aloud { position: absolute; right: 36px; top: 32px; padding: 6px 14px; border-radius: 8px; background: var(--note); font-size: 22px; font-weight: 700; white-space: nowrap; }
.a3-aloud .en { font-size: 13px; }
.a3-why { margin-top: 22px; }
.a3-why > .a3-t:first-child { font-size: 50px; line-height: 84px; }
.a3-also { margin-top: 2px; font-size: 36px; color: var(--quiet); }
.a3-also .ln { display: inline; }
.a3-also .en { font-size: 15px; }
.a3-why > .en { font-size: 18px; line-height: 1.3; margin-top: 4px; }
.all-pinyin .a3-why > .a3-t:first-child { font-size: 42px; line-height: 1.15; }
.all-pinyin .a3-also { font-size: 30px; margin-top: 6px; }
body.show-en .a3-why { margin-top: 8px; }
body.show-en .a3-why > .a3-t:first-child { font-size: 42px; line-height: 64px; }
body.show-en .all-pinyin .a3-why > .a3-t:first-child { font-size: 34px; line-height: 1.1; }
body.show-en .a3-also { font-size: 28px; }
.a3-next { position: absolute; left: 540px; top: 600px; width: 716px; height: 120px; border: 0; border-radius: 14px; background: var(--gold); color: var(--ink); font: 400 50px/1.1 var(--play); }
.a3-next .en { font-size: 18px; color: var(--ink); }

/* all five cured */
.a3-end-title { position: absolute; left: 0; right: 0; top: 18px; margin: 0; text-align: center; font: 400 50px/1.2 var(--play); color: var(--gold); }
.a3-end-title .en { font-size: 17px; color: #c9cdf3; }
.a3-end-card { position: absolute; left: 40px; top: 84px; width: 1200px; height: 636px; background: #fff; border-radius: 16px; }
.a3-end-icon { position: absolute; left: 573px; top: 14px; width: 54px; height: 54px; }
.a3-end-icon svg { display: block; width: 100%; height: 100%; }
.a3-doctor { position: absolute; left: 0; right: 0; top: 66px; margin: 0; text-align: center; font: 700 60px/1.2 var(--kai); color: var(--red); }
.a3-doctor .en { font-size: 18px; }
.a3-rows { position: absolute; left: 24px; top: 180px; margin: 0; padding: 0; list-style: none; display: flex; gap: 18px; }
.a3-row { width: 216px; display: flex; flex-direction: column; align-items: center; }
.a3-row-scene { width: 216px; height: 154px; border-radius: 10px; object-fit: cover; }
.a3-row-word { height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; }
.a3-row-word .a3-t { font-size: 32px; line-height: 1.1; }
.a3-row-word .en { font-size: 12px; line-height: 1.1; margin: 0; }
body.show-en .a3-row-word span.en { display: block; margin: 0; }
.all-pinyin .a3-row-word .a3-t { font-size: 28px; }
.a3-arrow { width: 26px; height: 26px; margin: 2px 0; color: var(--quiet); }
.a3-arrow svg { display: block; width: 100%; height: 100%; }
.a3-row-card { position: relative; width: 200px; height: 180px; border-radius: 10px; background: var(--c); }
.a3-row-card h4 { margin: 0; height: 40px; display: grid; place-items: center; font: 400 26px/1 var(--play); color: #fff; }
.a3-row-card .a3-card-pic { left: 8px; right: 8px; top: 40px; bottom: 8px; border-radius: 6px; }

/* an upright iPad: the same parts, one above the other */
.a3[data-orient="port"] .a3-chart { left: 20px; top: 10px; width: 780px; height: 610px; }
.a3[data-orient="port"] .a3-scene { left: 166px; top: 66px; width: 448px; height: 320px; }
.a3[data-orient="port"] .a3-says { left: 20px; top: 410px; width: 740px; height: 182px; padding: 10px 32px 0; }
.a3[data-orient="port"] .a3-says::before { left: 50%; top: -15px; margin: 0 0 0 -13px; border-width: 3px 0 0 3px; }
.a3[data-orient="port"] .a3-says .a3-t { font-size: 40px; line-height: 52px; }
.a3[data-orient="port"] .a3-says .en { font-size: 16px; margin-top: 2px; }
.a3[data-orient="port"].all-pinyin .a3-says .a3-t { font-size: 29px; line-height: 1.08; }
body.show-en .a3[data-orient="port"] .a3-says .a3-t { font-size: 30px; line-height: 38px; }
body.show-en .a3[data-orient="port"].all-pinyin .a3-says .a3-t { font-size: 22px; line-height: 1.05; }
.a3[data-orient="port"] .a3-q { top: 630px; font-size: 29px; }
.a3[data-orient="port"] .a3-q .en { display: none; }
.a3[data-orient="port"].all-pinyin .a3-q { top: 626px; font-size: 24px; }
.a3[data-orient="port"] .a3-hint { bottom: 440px; max-width: 800px; }
.a3[data-orient="port"] .a3-hint .a3-t { font-size: 24px; }
.a3[data-orient="port"] .a3-hint.long .a3-t { font-size: 20px; }
.a3[data-orient="port"].all-pinyin .a3-hint .a3-t { font-size: 20px; }
.a3[data-orient="port"].all-pinyin .a3-hint.long .a3-t { font-size: 16px; }
.a3[data-orient="port"] .a3-card { width: 250px; height: 206px; top: 688px; left: calc(20px + var(--i) * 265px); }
.a3[data-orient="port"] .a3-card:nth-child(n+4) { top: 906px; left: calc(152px + (var(--i) - 3) * 266px); }
.a3[data-orient="port"] .a3-card h3 { height: 46px; font-size: 30px; }
.a3[data-orient="port"] .a3-card-pic { top: 46px; }
.a3[data-orient="port"] .a3-house { left: 20px; top: 10px; width: 780px; height: 440px; }
.a3[data-orient="port"] .a3-house h2 { height: 54px; font-size: 42px; }
.a3[data-orient="port"] .a3-house-pic { top: 54px; }
.a3[data-orient="port"] .a3-house-pic img { inset: 4px 100px; width: calc(100% - 200px); height: calc(100% - 8px); }
.a3[data-orient="port"] .a3-stamp { right: 26px; bottom: 26px; }
.a3[data-orient="port"] .a3-thanks { left: 20px; top: 464px; width: 780px; height: 166px; }
.a3[data-orient="port"] .a3-thanks .a3-head { display: none; }
.a3[data-orient="port"] .a3-happy { left: 14px; top: 10px; width: 137px; height: 146px; }
.a3[data-orient="port"] .a3-thanks-words { left: 170px; top: 8px; font-size: 44px; }
.a3[data-orient="port"] .a3-reason { left: 20px; top: 644px; width: 780px; height: 340px; }
.a3[data-orient="port"] .a3-next { left: 20px; top: 998px; width: 780px; height: 106px; font-size: 48px; }
.a3[data-orient="port"] .a3-end-title { top: 16px; font-size: 44px; }
.a3[data-orient="port"] .a3-end-card { left: 20px; top: 76px; width: 780px; height: 1028px; }
.a3[data-orient="port"] .a3-end-icon { left: 90px; top: 26px; }
.a3[data-orient="port"] .a3-doctor { left: 90px; top: 14px; font-size: 56px; }
.a3[data-orient="port"] .a3-rows { left: 20px; top: 112px; flex-direction: column; gap: 10px; }
.a3[data-orient="port"] .a3-row { width: 740px; height: 172px; flex-direction: row; gap: 12px; }
.a3[data-orient="port"] .a3-row-scene { width: 240px; height: 172px; flex: none; }
.a3[data-orient="port"] .a3-row-word { width: 180px; height: auto; flex: none; justify-content: center; }
.a3[data-orient="port"] .a3-arrow { rotate: -90deg; margin: 0; flex: none; }
.a3[data-orient="port"] .a3-row-card { width: 256px; height: 172px; flex: none; }

@keyframes a3-thump { from { scale: 2.4; opacity: 0; } to { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .a3 *, .a3 { animation: none !important; transition: none !important; }
}

/* the way on to Activity 4 */
.a3-go4 { position: absolute; right: 40px; top: 14px; width: 270px; height: 60px; border: 3px solid var(--gold); border-radius: 10px; background: none; color: var(--gold); font: 400 27px/1 var(--play); }
.a3-go4 .en { display: none !important; }
.a3[data-orient="port"] .a3-go4 { right: 20px; top: 12px; width: 186px; height: 54px; font-size: 21px; }
body.show-en .a3[data-orient="port"] .a3-end-title { right: 206px; }
body.show-en .a3[data-orient="port"] .a3-end-title .en { font-size: 14px; }

/* ---------- ④ 生字练习: one character at a time, on the same fixed canvas (see design/activity4); lesson words share Activity 3's .a3-t ---------- */
#a4View { position: relative; overflow: hidden; }
.a4 { position: absolute; left: 0; top: 0; transform-origin: 0 0; color: var(--ink); user-select: none; -webkit-user-select: none; --py: var(--quiet); }
.a4[data-orient="land"] { width: 1280px; height: 744px; }
.a4[data-orient="port"] { width: 820px; height: 1124px; }
.a4 .en { color: var(--teal); font-family: var(--sans); font-weight: 500; }
.a4 section { position: absolute; inset: 0; }

/* the eight characters along the top */
.a4-tiles { position: absolute; left: 24px; top: 10px; display: flex; gap: 10px; }
.a4-tile { width: 62px; height: 62px; display: grid; place-items: center; border: 1.5px solid #5b63b5; border-radius: 8px; background: #1a2165; color: #8d93cf; font: 700 41px/1 var(--kai); }
.a4-tile.now { background: var(--gold); border: 3px solid #fff; color: var(--ink); }
.a4-tile.done { background: #fff; border: 3px solid var(--red); color: var(--red); }
.a4-count { position: absolute; right: 24px; top: 16px; margin: 0; text-align: right; font: 500 22px/1.3 var(--sans); color: #c9cdf3; }
.a4-count .en { color: #c9cdf3; font-size: 15px; }

/* the character's card, in its house's colour */
.a4-card { position: absolute; left: 24px; top: 86px; width: 582px; height: 634px; background: var(--c); border: 3px solid #fff; border-radius: 14px; }
.a4-name { position: absolute; left: 23px; top: 13px; margin: 0; font: 400 38px/1 var(--play); color: #fff; }
.a4-name .en { font-size: 16px; color: #fff; }
.a4-pic { position: absolute; left: 11px; top: 67px; width: 554px; height: 262px; border-radius: 10px; background: var(--pale); }
.a4-pic img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.a4-phrase { position: absolute; left: 11px; top: 341px; width: 554px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border-radius: 10px; }
.a4-phrase .a3-t { padding-top: 26px; font-size: min(62px, calc(510px / var(--n))); line-height: 1.2; }
.a4-phrase .en { font-size: 15px; line-height: 1.2; margin: 6px 0 0 !important; text-align: center; }
.all-pinyin .a4-phrase .a3-t { padding-top: 0; font-size: min(54px, calc(450px / var(--n))); }
.a4-target { background: var(--gold); border-radius: 4px; box-shadow: 0 0 0 3px var(--gold); }
.a4-blank { display: inline-block; width: 0.92em; height: 0.92em; margin: 0 0.04em; vertical-align: -0.1em; background: #fff; border: 2.5px dashed var(--ink); border-radius: 4px; }
.a4-steps { position: absolute; left: 23px; top: 505px; display: flex; }
.a4-step { width: 186px; height: 44px; display: flex; align-items: center; gap: 8px; color: #fff; }
.a4-step:last-child { width: auto; }
.a4-step i { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 2.5px solid #fff; border-radius: 50%; font: 700 22px/1 var(--sans); font-style: normal; }
.a4-step b { font: 400 28px/1 var(--play); white-space: nowrap; }
.a4-step .en { display: none !important; }
body.show-en .a4-step b { display: flex; flex-direction: column; font-size: 24px; }
body.show-en .a4-step .en { display: block !important; margin: 2px 0 0; font-size: 13px; color: #fff; }
.a4-step.now i { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.a4-step.now b { color: var(--gold); }
.a4-step.done i { background: #fff; border: 3px solid var(--red); color: var(--red); }
.a4-prompt { position: absolute; left: 23px; top: 560px; width: 386px; margin: 0; font: 700 24px/1.25 var(--sans); color: #fff; }
.a4-prompt .en { display: none; color: #fff; font-size: 15px; }
body.show-en .a4-prompt .en { display: block; margin: 2px 0 0; }
.a4-replay { position: absolute; left: 419px; top: 561px; width: 146px; height: 44px; border: 0; border-radius: 8px; background: #fff; color: var(--c); font: 700 21px/1 var(--sans); }
.a4-replay .en { display: none !important; }
.a4-next { position: absolute; left: 11px; top: 555px; width: 554px; height: 66px; border: 0; border-radius: 10px; background: var(--gold); color: var(--ink); font: 400 36px/1 var(--play); }
.a4-next .en { font-size: 16px; color: var(--ink); }

/* 田字格, as in their exercise books */
.a4-box, .a4-tian { position: relative; background: #fff; }
.a4-box::before, .a4-tian::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2.5px dashed #e39aa4; }
.a4-box::after, .a4-tian::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2.5px dashed #e39aa4; }
.a4-box { position: absolute; left: 622px; top: 86px; width: 634px; height: 634px; border-radius: 6px; box-shadow: inset 0 0 0 4px #e39aa4; }
.a4-glyph { position: absolute; inset: 18px; z-index: 1; }
.a4-glyph svg, .a4-tian svg { display: block; width: 100%; height: 100%; }
.a4-stamp {
  position: absolute; right: 30px; bottom: 30px; width: 124px; height: 124px; z-index: 2; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--red); font: 400 31px/1 var(--play); rotate: -12deg;
  box-shadow: inset 0 0 0 5px var(--red), inset 0 0 0 9px #fff, inset 0 0 0 10.5px var(--red); animation: a3-thump 0.45s cubic-bezier(.2,1.4,.4,1) 0.1s backwards;
}

/* the writing pad: at real size, not scaled with the canvas, so the bubble's sizes are multiplied by the scale (--s) */
.a4-pad { position: absolute; z-index: 2; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.a4-pad svg { display: block; }
.a4-oops { position: absolute; left: 50%; top: calc(12px * var(--s)); transform: translateX(-50%); width: max-content; margin: 0; padding: calc(9px * var(--s)) calc(18px * var(--s)); text-align: center; pointer-events: none; background: #fff; border: calc(3px * var(--s)) solid var(--red); border-radius: calc(10px * var(--s)); font: 700 calc(28px * var(--s))/1.2 var(--kai); color: var(--ink); animation: a2-pop 0.2s ease-out; }
.a4-oops .en { display: none; font: 500 calc(15px * var(--s))/1.2 var(--sans); color: var(--teal); }
body.show-en .a4-oops .en { display: block; margin: 0; }

/* all eight written */
.a4-end-title { position: absolute; left: 0; right: 0; top: 14px; margin: 0; text-align: center; font: 400 50px/1.2 var(--play); color: var(--gold); }
.a4-end-title .en { font-size: 17px; color: #c9cdf3; }
.a4-end-card { position: absolute; left: 40px; top: 84px; width: 1200px; height: 636px; margin: 0; padding: 22px 26px; list-style: none; display: grid; grid-template-columns: repeat(4, 272px); grid-auto-rows: 284px; gap: 16px 20px; background: #fff; border-radius: 16px; }
.a4-end-char { position: relative; background: var(--c); border-radius: 12px; }
.a4-end-char h3 { margin: 0; height: 48px; display: grid; place-items: center; font: 400 26px/1 var(--play); color: #fff; }
.a4-end-words { position: absolute; left: 10px; right: 10px; top: 48px; bottom: 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6px 4px 8px; background: #fff; border-radius: 8px; }
.a4-end-py { font: 500 22px/1 var(--sans); color: var(--quiet); }
.a4-tian { display: block; flex: none; width: 140px; height: 140px; padding: 4px; border-radius: 4px; box-shadow: inset 0 0 0 2.5px #e39aa4; }
.a4-tian::before, .a4-tian::after { border-width: 1.5px; }
.a4-tian svg { position: relative; z-index: 1; }
.a4-end-words .a3-t { font-size: min(26px, calc(232px / var(--n))); line-height: 1.15; }
.all-pinyin .a4-end-words .a3-t { font-size: min(22px, calc(190px / var(--n))); line-height: 1; }
.all-pinyin .a4-end-words .a4-tian { width: 124px; height: 124px; }

/* an upright iPad: the card shrinks to a band above a bigger box */
.a4[data-orient="port"] .a4-tiles { left: 20px; }
.a4[data-orient="port"] .a4-tile { width: 88px; height: 88px; font-size: 58px; }
.a4[data-orient="port"] .a4-count { display: none; }
.a4[data-orient="port"] .a4-card { left: 20px; top: 108px; width: 780px; height: 240px; }
.a4[data-orient="port"] .a4-name { left: 21px; top: 12px; font-size: 34px; }
.a4[data-orient="port"] .a4-name .en { display: none; }
.a4[data-orient="port"] .a4-pic { left: 13px; top: 55px; width: 200px; height: 168px; border-radius: 8px; }
.a4[data-orient="port"] .a4-pic img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.a4[data-orient="port"] .a4-phrase { left: 225px; top: 11px; width: 538px; height: 136px; border-radius: 8px; }
.a4[data-orient="port"] .a4-phrase .a3-t { font-size: min(62px, calc(500px / var(--n))); }
.a4[data-orient="port"].all-pinyin .a4-phrase .a3-t { font-size: min(52px, calc(440px / var(--n))); }
.a4[data-orient="port"] .a4-steps { left: 233px; top: 153px; }
.a4[data-orient="port"] .a4-step { width: 178px; }
.a4[data-orient="port"] .a4-step:last-child { width: auto; }
.a4[data-orient="port"] .a4-prompt { left: 233px; top: 200px; width: 380px; font-size: 22px; line-height: 32px; }
.a4[data-orient="port"] .a4-prompt .en { display: none; }
.a4[data-orient="port"] .a4-replay { left: 617px; top: 198px; height: 34px; font-size: 19px; }
.a4[data-orient="port"][data-phase="done"] .a4-steps { display: none; }
.a4[data-orient="port"] .a4-next { left: 225px; top: 155px; width: 538px; height: 76px; }
.a4[data-orient="port"] .a4-box { left: 42px; top: 364px; width: 736px; height: 736px; }
.a4[data-orient="port"] .a4-end-title { top: 12px; font-size: 44px; }
.a4[data-orient="port"] .a4-end-card { left: 20px; top: 76px; width: 780px; height: 1028px; padding: 16px 20px; grid-template-columns: repeat(2, 360px); grid-auto-rows: 240px; gap: 12px 20px; }
.a4[data-orient="port"] .a4-end-char h3 { height: 40px; }
.a4[data-orient="port"] .a4-end-words { top: 40px; bottom: 8px; left: 8px; right: 8px; padding: 4px 4px 6px; }
.a4[data-orient="port"] .a4-tian { width: 116px; height: 116px; }
.a4[data-orient="port"] .a4-end-words .a3-t { font-size: min(30px, calc(320px / var(--n))); }
.a4[data-orient="port"].all-pinyin .a4-tian { width: 96px; height: 96px; }
.a4[data-orient="port"].all-pinyin .a4-end-words .a3-t { font-size: min(26px, calc(270px / var(--n))); }

@media (prefers-reduced-motion: reduce) {
  .a4 *, .a4-oops { animation: none !important; }
}

.a4-go5 { position: absolute; right: 40px; top: 14px; width: 270px; height: 60px; border: 3px solid var(--gold); border-radius: 10px; background: none; color: var(--gold); font: 400 27px/1 var(--play); }
.a4-go5 .en { display: none !important; }
.a4[data-orient="port"] .a4-go5 { right: 20px; top: 12px; width: 186px; height: 54px; font-size: 19px; }

/* ========== ⑤ 我的梦想房屋 ========== */
#a5View { position: relative; overflow: hidden; }
.a5 { position: absolute; left: 0; top: 0; transform-origin: 0 0; color: #fff; user-select: none; -webkit-user-select: none; }
.a5[data-orient="land"] { width: 1280px; height: 744px; }
.a5[data-orient="port"] { width: 820px; height: 1124px; }
.a5 section { position: absolute; inset: 0; }
.a5 .en { color: #c9cdf3; font-family: var(--sans); font-weight: 500; font-size: 0.62em; }
.a5 button { border: 0; background: none; padding: 0; font: inherit; color: inherit; }
.a5-t { font-family: var(--kai); font-weight: 700; }
.a5-t .w { position: relative; display: inline-block; }
.a5-t .py { position: absolute; left: 50%; bottom: calc(100% - 0.12em); transform: translateX(-50%); white-space: nowrap; font: 500 max(11px, 0.46em)/1 var(--sans); color: inherit; opacity: .85; }
.a5-t .cp { display: none; }
.all-pinyin .a5-t .py { display: none; }
.all-pinyin .a5-t .c { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; vertical-align: bottom; margin: 0 1px; }
.all-pinyin .a5-t .cp { display: block; font: 500 0.46em/1.15 var(--sans); }

/* 1. the places */
.a5-prompt { position: absolute; left: 22px; right: 22px; top: 8px; margin: 0; font: 400 30px/1.3 var(--play); color: var(--gold); }
.a5-prompt .a5-t { font-family: var(--play); font-weight: 400; }
.a5-prompt .en { display: none; }
body.show-en .a5-prompt .en { display: inline; margin-left: 10px; font-size: 16px; }
.a5-places { position: absolute; left: 20px; right: 20px; top: 60px; bottom: 16px; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.a5[data-orient="port"] .a5-places { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
.a5 .a5-placecard { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.25); text-align: left; }
.a5-placecard:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.a5-placecard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.a5-placename { position: absolute; left: 10px; top: 10px; padding: 3px 14px 5px; border-radius: 9px; background: var(--navy); color: var(--gold); font-size: 32px; line-height: 1.2; }
.a5-placename .a5-t { font-family: var(--play); font-weight: 400; }
.a5-placeneeds { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; }
.a5-need { display: inline-block; padding: 10px 12px 5px; border-radius: 7px; background: #fff; color: var(--ink); font-size: 21px; line-height: 1.25; border: 2px solid #c5c8dc; white-space: nowrap; }
.a5 .a5-need .en { color: var(--teal); }

/* 2. building: the stage on one side, the cards on the other */
.a5-left { position: absolute; left: 20px; top: 0; width: 650px; bottom: 16px; }
.a5-title { position: absolute; left: 0; right: 0; top: 8px; height: 54px; display: flex; align-items: center; gap: 12px; }
.a5-where { margin: 0; font-size: 38px; line-height: 1; color: var(--gold); white-space: nowrap; }
.a5-where .a5-t { font-family: var(--play); font-weight: 400; }
.a5-needs { display: flex; gap: 8px; }
.a5 .a5-change { margin-left: auto; padding: 7px 14px; border: 2px solid #7f86cc; border-radius: 8px; font: 500 16px/1.2 var(--sans); white-space: nowrap; }
.a5-stageslot { position: absolute; left: 0; right: 0; top: 68px; bottom: 0; }
.a5-stage { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; background: #33407a; }
.a5-square { position: absolute; left: 50%; top: 50%; width: 660px; height: 660px; transform: translate(-50%, -50%); }
.a5-pic, .a5-holder, .a5-weather { position: absolute; inset: 0; width: 100%; height: 100%; }
.a5-holder { touch-action: none; cursor: grab; }
.a5-holder:active { cursor: grabbing; }
.a5-gl { display: block; width: 100%; height: 100%; }
.a5-weather { pointer-events: none; }
.a5-turn { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); margin: 0; padding: 3px 12px; border-radius: 16px; background: rgba(27,31,74,.72); color: #fff; font: 500 15px/1.3 var(--sans); white-space: nowrap; pointer-events: none; }
.a5-turn .en { display: none; }
.a5-bubble { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 20px); padding: 13px 22px 10px; background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 10px; font-size: 25px; line-height: 1.3; white-space: nowrap; text-align: center; }
.a5-bubble[data-long="yes"] { font-size: 22px; padding-left: 14px; padding-right: 14px; }
.a5-bubble::before { content: ""; position: absolute; left: 50%; top: -11px; width: 18px; height: 18px; margin-left: -9px; background: #fff; border-left: 2.5px solid var(--ink); border-top: 2.5px solid var(--ink); transform: rotate(45deg); }
.all-pinyin .a5-bubble { white-space: normal; width: calc(100% - 24px); font-size: 21px; line-height: 1.25; }
.a5-bubble .en { display: none; color: var(--teal); }
body.show-en .a5-bubble .en { display: block; font-size: 14px; white-space: normal; }

.a5-right { position: absolute; left: 686px; top: 0; width: 574px; bottom: 16px; }
.a5-head { position: absolute; left: 4px; top: 12px; margin: 0; font-size: 23px; line-height: 1.2; white-space: nowrap; }
.a5-walls { position: absolute; left: 0; right: 0; top: 44px; display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.a5-card { position: relative; display: flex; align-items: stretch; background: var(--c) !important; border-radius: 10px; color: #fff; text-align: center; transition: opacity .15s; }
.a5-card img { flex: none; object-fit: cover; background: #fff; border: 3px solid #fff; border-radius: 6px; }
.a5-cardtext { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; }
.a5-cardname { font-size: 27px; line-height: 1.15; white-space: nowrap; }
.a5-cardname .a5-t { font-family: var(--play); font-weight: 400; }
.a5 .a5-cardname .en { display: none; color: #fff; }
body.show-en .a5-cardname .en { display: block; font-size: 12px; white-space: normal; line-height: 1.1; }
.a5-chip { padding: 2px 9px 3px; background: #fff; color: var(--ink); border-radius: 5px; font: 700 17px/1.25 var(--kai); white-space: nowrap; }
.wallcard { height: 104px; padding: 7px; }
.wallcard img { width: 80px; height: 90px; }
.wallcard .a5-cardname { font-size: 26px; }
.a5-parts { position: absolute; left: 0; right: 0; top: 268px; }
.a5-group { height: 130px; position: relative; }
.a5-grouphead { margin: 0 0 3px 4px; font-size: 19px; line-height: 1.2; white-space: nowrap; }
.a5-grouphead.dim { opacity: .55; }
.a5-pair { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.partcard { height: 100px; padding: 7px; }
.partcard img { width: 86px; height: 86px; }
.a5-card.dim { filter: saturate(.45) brightness(.62); }
.a5-card.on { box-shadow: 0 0 0 3.5px var(--gold); }
.a5-card.on::after { content: "✓"; position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; font: 700 15px/24px var(--sans); }
.a5-card.refused { box-shadow: 0 0 0 4px var(--red); animation: a5-shake .36s; }
.a5-card.refused::after { content: "×"; position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--red); border: 2px solid #fff; color: #fff; font: 700 18px/21px var(--sans); }
@keyframes a5-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.a5 .a5-done { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; border-radius: 10px; background: var(--gold); color: var(--ink); font: 400 30px/1 var(--play); }
.a5 .a5-done.off { background: #5f5f88; color: #aeb0d4; }
.a5-done .en { color: inherit; font-size: 15px; margin-left: 8px; display: none; }
body.show-en .a5-done .en { display: inline; }

/* naming */
.a5-nameinput { position: absolute; left: 0; right: 0; top: 50px; height: 62px; width: 100%; padding: 0 18px; border: 0; border-radius: 9px; font: 700 30px/1 var(--kai); color: var(--ink); background: #fff; user-select: text; -webkit-user-select: text; }
.a5-used { position: absolute; left: 4px; right: 0; top: 128px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 21px/1.2 var(--kai); }
.a5-usedchip { padding: 5px 12px 6px; background: var(--c); border-radius: 7px; font: 400 21px/1.1 var(--play); }
.a5-classlabel { position: absolute; left: 4px; top: 196px; font: 700 25px/1.2 var(--kai); display: flex; flex-direction: column; gap: 8px; }
.a5-classinput { width: 240px; height: 72px; border: 0; border-radius: 9px; padding: 0 0 0 18px; font: 700 42px/1 var(--sans); letter-spacing: 16px; color: var(--ink); background: #fff; user-select: text; -webkit-user-select: text; }
.a5-classnote { position: absolute; left: 4px; top: 316px; margin: 0; font: 700 21px/1.3 var(--kai); color: #dfe1f6; }
.a5-formsay { position: absolute; left: 4px; right: 0; top: 362px; margin: 0; padding: 0; font-size: 23px; line-height: 1.3; color: var(--gold); white-space: normal; }
.a5-namebuttons { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 14px; grid-template-columns: 1fr 1.2fr; }
.a5 .a5-back { height: 56px; border-radius: 10px; border: 2px solid #fff; font: 700 25px/1 var(--kai); }
.a5 .a5-send { height: 56px; border-radius: 10px; background: var(--gold); color: var(--ink); font: 400 29px/1 var(--play); }
.a5 .a5-send:disabled { opacity: .55; }
.a5-namebuttons .en { display: none; }

/* upright: picture on top, two rows of six cards below */
.a5[data-orient="port"] .a5-left { left: 20px; top: 0; width: 780px; bottom: auto; height: 680px; }
.a5[data-orient="port"] .a5-stageslot { top: 62px; }
.a5[data-orient="port"] .a5-square { width: 780px; height: 780px; top: 0; transform: translate(-50%, -112px); }
.a5[data-orient="port"] .a5-right { left: 20px; width: 780px; top: 690px; bottom: 10px; }
.a5[data-orient="port"] .a5-head { top: 0; font-size: 20px; }
.a5[data-orient="port"] .a5-walls { top: 30px; grid-template-columns: repeat(6, 1fr); }
.a5[data-orient="port"] .a5-parts { top: 188px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.a5[data-orient="port"] .a5-group { height: auto; }
.a5[data-orient="port"] .a5-pair { gap: 8px; }
.a5[data-orient="port"] .a5-card { flex-direction: column; height: 146px; padding: 5px; }
.a5[data-orient="port"] .a5-card img { width: 100%; height: 76px; }
.a5[data-orient="port"] .a5-cardname { font-size: 21px; }
.a5[data-orient="port"] .a5-chip { font-size: 14px; padding: 1px 6px 2px; }
.a5[data-orient="port"] .a5-cardtext { gap: 3px; }
.a5[data-orient="port"] .a5-grouphead { font-size: 18px; }
.a5[data-orient="port"] .a5-done { height: 50px; font-size: 27px; }
/* naming upright: the form goes on top, so the iPad keyboard never covers it */
.a5[data-orient="port"].naming .a5-left { top: 400px; height: 714px; }
.a5[data-orient="port"].naming .a5-title { top: 0; }
.a5[data-orient="port"].naming .a5-right { top: 0; height: 396px; bottom: auto; }
.a5[data-orient="port"] .a5-classlabel { top: 176px; flex-direction: row; align-items: center; }
.a5[data-orient="port"] .a5-classinput { height: 60px; font-size: 34px; }
.a5[data-orient="port"] .a5-classnote { top: 244px; }
.a5[data-orient="port"] .a5-formsay { top: 284px; }

/* 3. the wall */
.a5-wallhead { position: absolute; left: 20px; right: 20px; top: 6px; height: 50px; display: flex; align-items: center; gap: 14px; }
.a5-walltitle { margin: 0; font: 400 36px/1 var(--play); color: var(--gold); white-space: nowrap; }
.a5-wallno { padding: 5px 14px; background: #fff; color: var(--ink); border-radius: 7px; font: 700 26px/1.1 var(--sans); }
.a5 .a5-qrbtn { padding: 7px 14px; border: 2px solid #7f86cc; border-radius: 8px; font: 500 16px/1.2 var(--sans); white-space: nowrap; }
.a5-removenote { font: 700 20px/1.2 var(--kai); color: #dfe1f6; white-space: nowrap; }
.a5-count { margin-left: auto; font: 700 22px/1.2 var(--kai); white-space: nowrap; }
.a5 .a5-wallback { padding: 9px 18px; background: var(--gold); color: var(--ink); border-radius: 8px; font: 400 23px/1 var(--play); white-space: nowrap; }
.a5-wallback .en, .a5-removenote .en, .a5-count .en, .a5-walltitle .en, .a5-qrbtn .en { display: none; }
.a5-grid { position: absolute; left: 20px; right: 20px; top: 62px; bottom: 12px; display: grid; gap: 11px 14px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 212px; overflow-y: auto; -webkit-overflow-scrolling: touch; align-content: start; }
.a5[data-orient="port"] .a5-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 196px; }
.a5-wallcard { position: relative; background: var(--c); border-radius: 10px; overflow: hidden; transition: opacity .2s; }
.a5-wallcard.going { opacity: .4; }
.a5-wallcard.mine { outline: 4px solid var(--gold); outline-offset: -4px; }
.a5 .a5-wallopen { position: absolute; inset: 0; display: block; text-align: left; color: #fff; }
.a5-thumb { position: absolute; left: 6px; right: 6px; top: 6px; bottom: 62px; background: rgba(255,255,255,.3); border-radius: 6px; overflow: hidden; }
.a5-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a5-wallname { position: absolute; left: 12px; right: 8px; bottom: 28px; font: 400 25px/1.2 var(--play); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a5-wallparts { position: absolute; left: 12px; right: 8px; bottom: 7px; font: 700 15px/1.25 var(--kai); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a5-mine { position: absolute; right: 12px; top: 12px; padding: 3px 12px 4px; background: var(--gold); color: var(--ink); border-radius: 7px; font: 400 20px/1.1 var(--play); pointer-events: none; }
.a5 .a5-remove { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); color: var(--ink); font: 700 22px/28px var(--sans); }
.a5-empty { position: absolute; left: 0; right: 0; top: 240px; text-align: center; margin: 0; font: 700 30px/1.3 var(--kai); }
.a5-join { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; background: var(--navy); }
.a5-qrbox { position: absolute; left: 90px; top: 30px; width: 470px; text-align: center; }
.a5-qr { width: 470px; height: 470px; background: #fff; border-radius: 10px; }
.a5-qr svg { display: block; width: 100%; height: 100%; }
.a5-scan { margin: 16px 0 0; font: 700 34px/1.2 var(--kai); }
.a5-scannote { margin: 6px 0 0; font: 700 24px/1.2 var(--kai); color: #dfe1f6; }
.a5-joinright { position: absolute; left: 660px; right: 30px; top: 30px; bottom: 20px; }
.a5-typeit { margin: 0 0 14px; font: 700 30px/1.2 var(--kai); }
.a5-digits { display: flex; gap: 12px; }
.a5-digits span { width: 124px; height: 150px; background: #fff; border-radius: 12px; color: var(--ink); font: 700 88px/150px var(--sans); text-align: center; }
.a5-steps { list-style: none; counter-reset: s; margin: 40px 0 0; padding: 0; }
.a5-steps li { counter-increment: s; position: relative; padding-left: 74px; margin-bottom: 26px; font: 700 32px/52px var(--kai); }
.a5-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--ink); font: 700 30px/52px var(--sans); text-align: center; }
.a5 .a5-joinclose { position: absolute; right: 0; bottom: 0; padding: 10px 24px; background: var(--gold); color: var(--ink); border-radius: 8px; font: 700 24px/1 var(--kai); }
.a5[data-orient="port"] .a5-qrbox { left: 150px; top: 24px; width: 520px; }
.a5[data-orient="port"] .a5-qr { width: 520px; height: 520px; }
.a5[data-orient="port"] .a5-joinright { left: 110px; right: 110px; top: 680px; }
.a5-big { position: absolute; inset: 0; background: var(--navy); }
.a5-bigleft { position: absolute; left: 20px; top: 8px; bottom: 16px; width: 700px; }
.a5-bigleft .a5-square { width: 720px; height: 720px; }
.a5-bigright { position: absolute; left: 740px; right: 20px; top: 14px; bottom: 16px; }
.a5-bigname { margin: 0; font: 400 40px/1.2 var(--play); color: var(--gold); }
.a5-bigplace { margin: 4px 0 14px; font: 700 26px/1.2 var(--kai); }
.a5-bigwhy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 550px; overflow-y: auto; }
.a5-bigwhy li { padding: 14px 14px 10px; background: #fff; color: var(--ink); border-radius: 8px; font-size: 25px; line-height: 1.35; white-space: normal; }
.a5-bigwhy .en { display: none; color: var(--teal); }
body.show-en .a5-bigwhy .en { display: block; font-size: 13px; }
.a5 .a5-bigclose { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; border-radius: 10px; background: var(--gold); color: var(--ink); font: 700 26px/1 var(--kai); }
.a5-bigclose .en { display: none; }
.a5[data-orient="port"] .a5-bigleft { left: 20px; right: 20px; width: auto; top: 8px; bottom: auto; height: 640px; }
.a5[data-orient="port"] .a5-bigleft .a5-square { width: 780px; height: 780px; }
.a5[data-orient="port"] .a5-bigright { left: 20px; top: 660px; }
.a5[data-orient="port"] .a5-bigwhy { max-height: 300px; }

/* the teacher section */
.a5-thead { position: absolute; left: 0; right: 0; top: 22px; margin: 0; text-align: center; font: 400 54px/1.1 var(--play); color: var(--gold); }
.a5-thead .en { display: none; }
.a5-tnote { position: absolute; left: 0; right: 0; top: 90px; margin: 0; text-align: center; font: 700 25px/1.3 var(--kai); }
body.show-en .a5-tnote .en { display: block; font-size: 15px; }
.a5-lockbox { position: absolute; left: 50%; top: 150px; width: 540px; margin-left: -270px; padding: 28px 36px 24px; background: #fff; color: var(--ink); border-radius: 14px; }
.a5-lockbox label span { font: 700 27px/1.3 var(--kai); }
.a5 .a5-lockbox .en { color: var(--teal); }
.a5-pass { display: block; width: 100%; height: 64px; margin-top: 8px; padding: 0 16px; border: 2.5px solid #c5c8dc; border-radius: 9px; font: 700 30px/1 var(--sans); color: var(--ink); user-select: text; -webkit-user-select: text; }
.a5-keep { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.a5-keep span { font-size: 23px !important; }
.a5-keepbox { width: 28px; height: 28px; accent-color: var(--teal); }
.a5 .a5-unlock { display: block; width: 100%; height: 60px; background: var(--gold); border-radius: 10px; color: var(--ink); font: 400 30px/1 var(--play); }
.a5-unlock .en { display: none; }
.a5-tsay { min-height: 26px; margin: 10px 0 0; text-align: center; font: 700 21px/1.2 var(--kai); color: var(--red); }
.a5-nocode { margin: 8px 0 0; text-align: center; font: 700 21px/1.2 var(--kai); color: var(--quiet); }
.a5-openrow { position: absolute; left: 50%; top: 140px; display: flex; gap: 40px; transform: translateX(-50%); }
.a5 .a5-newwall, .a5 .a5-lastwall { width: 440px; height: 300px; border-radius: 16px; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.a5 .a5-newwall { background: var(--gold); }
.a5 .a5-lastwall { background: #fff; }
.a5-newwall b, .a5-lastwall b { font: 400 38px/1.15 var(--play); }
.a5-newwall small, .a5-lastwall small { font: 700 23px/1.3 var(--kai); max-width: 360px; }
.a5-newwall .en, .a5-lastwall .en { display: none; }
.a5-lastno { padding: 6px 24px; background: var(--navy); color: #fff; border-radius: 9px; font: 700 36px/1.1 var(--sans); }
.a5-other { position: absolute; left: 50%; top: 472px; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); font: 700 22px/1.2 var(--kai); white-space: nowrap; }
.a5-other .en { display: none; }
.a5-otherinput { width: 120px; height: 46px; border: 0; border-radius: 8px; padding: 0 12px; font: 700 26px/1 var(--sans); color: var(--ink); user-select: text; -webkit-user-select: text; }
.a5 .a5-other button { padding: 11px 22px; background: #fff; color: var(--ink); border-radius: 8px; font: 700 22px/1 var(--kai); }
.a5-tsay2 { position: absolute; left: 0; right: 0; top: 530px; margin: 0; text-align: center; font: 700 22px/1.2 var(--kai); color: var(--gold); }
.a5 .a5-tclose { position: absolute; right: 24px; bottom: 20px; padding: 10px 28px; border: 2px solid #fff; border-radius: 9px; font: 700 23px/1 var(--kai); }
.a5-tclose .en { display: none; }
.a5[data-orient="port"] .a5-openrow { flex-direction: column; gap: 22px; top: 130px; }
.a5[data-orient="port"] .a5-other { top: 790px; }
.a5[data-orient="port"] .a5-tsay2 { top: 850px; }
.a5-only { display: none; }
body.a5-on .a5-only { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .a5-card.refused { animation: none; } }
/* English hints in the tight places */
body.show-en .a5-head { font-size: 18px; top: 16px; }
body.show-en .a5-head .en { font-size: 10.5px; margin-left: 5px; }
body.show-en .a5[data-orient="port"] .a5-card img { height: 44px; }
body.show-en .a5[data-orient="port"] .a5-cardname { font-size: 18px; }
body.show-en .a5[data-orient="port"] .a5-cardname .en { font-size: 10.5px; }
.a5[data-orient="port"] .a5-grouphead .en { display: none !important; }
/* the top bar has one more button on Activity 5 */
body.a5-on .brand .en { display: none !important; }
body.a5-on .topbar .bar-btn .en { display: none; }
@media (max-aspect-ratio: 1/1) { body.a5-on .tab { padding: 6px 5px; font-size: 13px; } body.a5-on .bar-btn, body.a5-on .hint-toggle { padding-left: 8px; padding-right: 8px; font-size: 13px; } body.a5-on .topbar { gap: 6px; } }
.a5-change .en { display: none !important; }
.a5-needs .en, .a5-where .en { font-size: 12px !important; }
.all-pinyin .a5-head { top: 0; font-size: 20px; }
.all-pinyin .a5-grouphead { font-size: 16px; margin-top: -4px; }
.a5[data-orient="port"].all-pinyin .a5-head { top: -8px; font-size: 17px; }
/* sideways, 全部拼音: the part cards give up a little height so the pinyin above each heading sits clear of the card above */
.a5:not([data-orient="port"]).all-pinyin .a5-grouphead { margin-top: 0; }
.a5:not([data-orient="port"]).all-pinyin .partcard { height: 90px; }
.a5:not([data-orient="port"]).all-pinyin .partcard img { width: 76px; height: 76px; }
.a5-sentnote { font-size: 22px; color: var(--gold); white-space: nowrap; font-family: var(--kai); font-weight: 700; }
.a5-sentnote .en { display: none; }
.a5 .a5-seewall { position: absolute; right: 0; top: 232px; padding: 12px 20px; background: #fff; color: var(--ink); border-radius: 9px; font: 700 23px/1 var(--kai); white-space: nowrap; }
.a5-seewall .en { display: none; }
.a5[data-orient="port"] .a5-seewall { top: 182px; }
.a5[data-orient="port"] .a5-cardname { margin-top: 8px; }
.a5[data-orient="port"] .a5-wallparts { white-space: normal; line-height: 1.15; bottom: 5px; font-size: 13.5px; }
.a5[data-orient="port"] .a5-wallname { bottom: 38px; font-size: 22px; }
.a5[data-orient="port"] .a5-thumb { bottom: 72px; }
body.show-en .a5[data-orient="port"] .a5-left { height: 620px; }
body.show-en .a5[data-orient="port"] .a5-right { top: 630px; }
body.show-en .a5[data-orient="port"] .a5-card { height: 176px; }
body.show-en .a5[data-orient="port"] .a5-card img { height: 72px; }
body.show-en .a5[data-orient="port"] .a5-parts { top: 218px; }
.all-pinyin .a5-card.on::after { right: 3px; top: 3px; width: 20px; height: 20px; font-size: 13px; line-height: 20px; }
.all-pinyin .a5-cardname { font-size: 23px; }
.all-pinyin .wallcard .a5-cardname { font-size: 22px; }
.a5-t .c { vertical-align: baseline; }
.a5[data-orient="port"].all-pinyin .a5-card img { height: 52px; }
.a5[data-orient="port"].all-pinyin .a5-cardname { font-size: 18px; margin-top: 0; }