/* The course pages: alphabet, lessons, practice, quiz, course home.
   Japanese kindergarten: soft filled colours, no outlines, big round letters, laid out
   sideways for a wide browser window. */

:root {
  --bad: #C65A4B;
  --ok-bg: #D9F0DD;
  --bad-bg: #FBD9D2;
  --ink: #4B3A2C;
}

/* a palette that repeats: button colour, its shadow, and a light tint for the card behind it */
.pal-1 { --c: #9BD67F; --cd: #7DBB61; --cl: #E6F5DC; }
.pal-2 { --c: #8BC5EE; --cd: #6BA8D4; --cl: #DDEEFA; }
.pal-3 { --c: #F8B26A; --cd: #DE9449; --cl: #FFE9D2; }
.pal-4 { --c: #C3AEEB; --cd: #A58ED0; --cl: #EEE7FA; }
.pal-5 { --c: #F5A3AE; --cd: #DB8590; --cl: #FFE3E7; }
.pal-6 { --c: #7FA6DC; --cd: #6288BE; --cl: #DCE7F7; }
.pal-7 { --c: #7DD6BD; --cd: #5DB9A0; --cl: #D9F3EB; }
.pal-8 { --c: #F8D468; --cd: #DCB74B; --cl: #FFF1C7; }

/* ---------- the alphabet ---------- */

.alpha { width: 100%; max-width: 1500px; display: flex; flex-direction: column; gap: 1.5rem; text-align: left; }

body.wide-page main { max-width: 1560px; }

.alpha-status { padding: 1rem 1.5rem; border-radius: 24px; background: var(--bg-elevated); text-align: center; font-size: 1.06rem; }
.alpha-status .zh, .alpha-status .en { display: block; }
.alpha-status .zh, .alpha-status .en { font-weight: 800; font-size: 0.96rem; }
.alpha-status a { display: block; color: var(--ink); }
.alpha-status[data-state="connected"] { background: var(--ok-bg); }

.alpha-heading { margin: 0 0 1.2rem; display: flex; align-items: baseline; gap: 1rem; }
.alpha-heading .zh, .alpha-heading .en { display: inline; font-size: 1.76rem; font-weight: 800; }

.alpha-note { margin: 1.2rem 0 0; text-align: center; }
.alpha-note .zh, .alpha-note .en { display: block; font-size: 0.97rem; color: var(--text-secondary); }

.group-grid { display: grid; gap: 0.9rem; }
#alpha-hands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#alpha-positions { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.group { padding: 1rem 1.1rem 1.2rem; border-radius: 26px; background: var(--cl); }
.group-head { display: flex; align-items: center; gap: 0.9rem; }
.group-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c);
  color: var(--ink);
  font-size: 1.36rem;
  font-weight: 800;
  box-shadow: 0 4px 0 var(--cd);
}
.group-title .zh, .group-title .en { display: block; font-size: 1.12rem; font-weight: 800; }

.letter-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

.letter-btn {
  min-width: 3.9rem;
  padding: 0.7rem 0.7rem;
  border: none;
  border-radius: 28px;
  background: var(--c);
  color: var(--ink);
  box-shadow: 0 7px 0 var(--cd);
  font-family: inherit;
  font-size: 1.76rem;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.letter-btn:hover { filter: brightness(1.05); }
.letter-btn:active, .letter-btn.playing { transform: translateY(5px); box-shadow: 0 2px 0 var(--cd); }
.letter-btn.playing { animation: letter-bounce 0.6s ease-in-out infinite alternate; }
.letter-btn:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }

@keyframes letter-bounce { from { filter: brightness(1); } to { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .letter-btn.playing { animation: none; } }

/* while the hand is moving, other taps wait their turn */
.is-busy .robot-btn, .is-busy .letter-btn:not(.playing) { pointer-events: none; opacity: 0.55; }

@media (max-width: 1150px) {
  #alpha-hands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #alpha-positions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #alpha-hands, #alpha-positions { grid-template-columns: 1fr; }
}

/* ---------- lessons ---------- */

body.lesson-page { background: var(--bg); }

.lesson-shell { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; }

.lesson-top { display: flex; align-items: center; gap: 1.5rem; padding: 1.3rem 2.5rem; }
.lesson-exit { display: inline-flex; width: 2.8rem; height: 2.8rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-elevated); color: var(--ink); }
.lesson-exit:hover { background: var(--bg-elevated-hover); text-decoration: none; }
.lesson-exit svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

.lesson-progress { flex: 1; height: 1.1rem; border-radius: 99px; background: var(--bg-elevated); overflow: hidden; }
.lesson-bar { height: 100%; width: 0; border-radius: 99px; background: #9BD67F; transition: width 0.3s ease; }

.hand-chip { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1.2rem; border: none; border-radius: 99px; background: var(--bg-elevated); color: var(--ink); font-family: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hand-chip .zh, .hand-chip .en { display: inline; color: inherit; font-size: inherit; margin: 0; }
.hand-chip .en { font-weight: 400; opacity: 0.65; font-size: 0.85rem; }
.chip-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #C9B8A3; }
.hand-chip[data-state="connected"] { background: var(--ok-bg); }
.hand-chip[data-state="connected"] .chip-dot { background: var(--ok); }
.hand-chip[data-state="connecting"] .chip-dot { background: #E0A92B; }

.lesson-main { flex: 1; padding: 1rem 2.5rem 1.5rem; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.lesson-main.finished { text-align: center; align-items: center; }

.gate { text-align: center; align-self: center; }
.gate .step-body { margin-left: auto; margin-right: auto; }

.step-title { margin: 0 0 1rem; line-height: 1.3; }
.step-title .zh, .step-title .en { display: block; font-size: 2.24rem; font-weight: 800; }
.step-body { margin: 0 0 1.2rem; max-width: 760px; }
.step-body .zh, .step-body .en { display: block; font-size: 1.28rem; line-height: 1.6; }
.step-hint { margin: 0 0 1.4rem; }
.step-hint .zh, .step-hint .en { display: block; font-size: 1.06rem; color: var(--text-secondary); }

.btn .zh, .btn .en { display: inline; color: inherit; }
.lesson-main .btn { margin-top: 0.6rem; margin-right: 0.6rem; align-self: flex-start; }

/* the sideways question layout: the question on the left, the answers on the right */
.q-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.q-left { display: flex; flex-direction: column; align-items: flex-start; }
.q-right { min-width: 0; }

/* explore */
.explore-counter { margin: 0.5rem 0 1.2rem; font-size: 1.01rem; color: var(--text-secondary); }
.explore-counter .zh, .explore-counter .en { display: inline; color: inherit; font-size: inherit; }
.explore-counter .en { margin-left: 0.6rem; color: var(--text-tertiary); font-size: 0.9rem; }
.explore-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.explore-row { padding: 1.3rem 1.4rem 1.5rem; border-radius: 30px; background: var(--cl, var(--bg-elevated)); }
.explore-row:nth-child(8n+1) { --c: #9BD67F; --cd: #7DBB61; --cl: #E6F5DC; }
.explore-row:nth-child(8n+2) { --c: #8BC5EE; --cd: #6BA8D4; --cl: #DDEEFA; }
.explore-row:nth-child(8n+3) { --c: #F8B26A; --cd: #DE9449; --cl: #FFE9D2; }
.explore-row:nth-child(8n+4) { --c: #C3AEEB; --cd: #A58ED0; --cl: #EEE7FA; }
.explore-row:nth-child(8n+5) { --c: #F5A3AE; --cd: #DB8590; --cl: #FFE3E7; }
.explore-row:nth-child(8n+6) { --c: #7FA6DC; --cd: #6288BE; --cl: #DCE7F7; }
.explore-row:nth-child(8n+7) { --c: #7DD6BD; --cd: #5DB9A0; --cl: #D9F3EB; }
.explore-row:nth-child(8n+8) { --c: #F8D468; --cd: #DCB74B; --cl: #FFF1C7; }
.explore-label .zh, .explore-label .en { display: block; font-size: 1.2rem; font-weight: 800; }
.explore-row.tried .explore-label .zh::after { content: " ✓"; color: var(--ok); }
.explore-buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.1rem; }

.chip-btn {
  min-width: 5rem;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 24px;
  background: var(--c, #FFD98A);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--cd, #E0B45A);
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.chip-btn:active, .chip-btn.on { transform: translateY(4px); box-shadow: 0 2px 0 var(--cd, #E0B45A); }

/* watch */
.watch-area { margin: 0.5rem 0 0; }
.robot-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.6rem; border-radius: 28px; background: #D2E8F8; }
.robot-card-title .zh, .robot-card-title .en { display: block; font-size: 1.2rem; font-weight: 800; }
.robot-card .btn { margin: 0; }

/* answers */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.options-wide { grid-template-columns: 1fr; }
.option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.5rem;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 30px;
  background: var(--c);
  color: var(--ink);
  box-shadow: 0 7px 0 var(--cd);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.option:nth-child(4n+1) { --c: #9BD67F; --cd: #7DBB61; }
.option:nth-child(4n+2) { --c: #8BC5EE; --cd: #6BA8D4; }
.option:nth-child(4n+3) { --c: #F8B26A; --cd: #DE9449; }
.option:nth-child(4n+4) { --c: #C3AEEB; --cd: #A58ED0; }
.option:hover:not(:disabled) { filter: brightness(1.05); }
.option.selected { transform: translateY(5px); box-shadow: 0 2px 0 var(--cd); filter: brightness(1.08); }
.option.correct { --c: #7FD08F; --cd: #5FB471; transform: translateY(5px); box-shadow: 0 2px 0 var(--cd); }
.option.wrong { --c: #F2A396; --cd: #D68376; opacity: 0.9; }
.option:disabled { cursor: default; }
.option-content { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.option-text { font-size: 2.56rem; font-weight: 800; }
.option-sentence { font-size: 1.36rem; font-weight: 800; }
.option-pinyin { font-size: 0.92rem; color: rgba(75, 58, 44, 0.75); }

/* make / build: numbered buttons */
.num-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.9rem; }
.num-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.5rem 0.9rem;
  border: none;
  border-radius: 26px;
  background: #FFE0BC;
  color: var(--ink);
  box-shadow: 0 6px 0 #E8BF8D;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.num-btn:active, .num-btn.selected { transform: translateY(4px); box-shadow: 0 2px 0 #E8BF8D; }
.num-btn.selected { background: #FFD052; }
.num-label { font-size: 0.95rem; color: var(--text-secondary); }
.num-value { font-size: 2.08rem; font-weight: 800; line-height: 1.15; }
.build-section { margin-bottom: 1.6rem; }
.build-section:last-child { margin-bottom: 0; }
.build-label { margin-bottom: 0.7rem; }
.build-label .zh, .build-label .en { display: block; font-size: 1.0rem; font-weight: 800; }

/* the bar along the bottom: feedback on the left, the big button on the right */
.lesson-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 2rem; padding: 1.2rem 2.5rem; background: var(--bg-elevated); transition: background 0.15s ease; }
.lesson-foot[hidden] { display: none; }
.lesson-foot[data-result="ok"] { background: var(--ok-bg); }
.lesson-foot[data-result="bad"] { background: var(--bad-bg); }
.lesson-feedback { flex: 1; }
.lesson-feedback[hidden] { display: none; }
.feedback-title .zh, .feedback-title .en { display: block; font-size: 1.44rem; font-weight: 800; }
.lesson-foot[data-result="ok"] .feedback-title { color: #2E7A43; }
.lesson-foot[data-result="bad"] .feedback-title { color: var(--bad); }
.feedback-text { margin-top: 0.3rem; }
.feedback-text .zh, .feedback-text .en { display: block; font-size: 1.0rem; }
.lesson-action { margin-left: auto; min-width: 300px; padding: 1.2rem 2rem; font-size: 1.04rem; }
.lesson-foot[data-result="ok"] .lesson-action { background: #7FD08F; box-shadow: 0 5px 0 #5FB471; }
.lesson-foot[data-result="bad"] .lesson-action { background: #F2A396; box-shadow: 0 5px 0 #D68376; }

/* finished */
.finish-title .zh, .finish-title .en { font-size: 2.72rem; }
.finish-stats { display: flex; justify-content: center; gap: 1.5rem; margin: 2rem 0; flex-wrap: wrap; }
.finish-stat { min-width: 11rem; padding: 1.4rem 1.6rem; border-radius: 30px; background: var(--bg-elevated); }
.finish-stat:nth-child(1) { background: #D9F0DD; }
.finish-stat:nth-child(2) { background: #FFF1C7; }
.finish-stat:nth-child(3) { background: #DDEEFA; }
.finish-value { font-size: 2.4rem; font-weight: 800; }
.finish-label .zh, .finish-label .en { display: block; font-size: 1.01rem; }
.finish-buttons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.finish-buttons .btn { margin: 0; }
.lesson-missing { margin: 3rem 0 1.5rem; }

@media (max-width: 900px) {
  .q-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .lesson-main, .lesson-top, .lesson-foot { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hand-chip .en { display: none; }
  .lesson-action { min-width: 0; flex: 1; }
}

/* ---------- course home, practice and quiz ---------- */

.path { width: 100%; max-width: 1240px; display: flex; flex-direction: column; gap: 2rem; text-align: left; }
.path-summary { display: flex; gap: 1rem; flex-wrap: wrap; }
.path-stat { flex: 1; min-width: 9rem; padding: 1.1rem 1.4rem; border-radius: 26px; background: var(--bg-elevated); }
.path-stat:nth-child(1) { background: #D9F0DD; }
.path-stat:nth-child(2) { background: #FFF1C7; }
.path-stat:nth-child(3) { background: #DDEEFA; }
.path-stat strong { display: block; font-size: 1.6rem; }
.path-stat .zh, .path-stat .en { font-size: 0.92rem; }

.start-card { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2rem; border-radius: 32px; background: #9BD67F; box-shadow: 0 7px 0 #7DBB61; color: var(--ink); }
.start-card:hover { text-decoration: none; color: var(--ink); filter: brightness(1.04); }
.start-card .zh, .start-card .en { font-size: 1.44rem; font-weight: 800; color: inherit; }
.start-card .chapter-arrow { margin-left: auto; color: inherit; font-size: 1.6rem; }
.start-card[hidden] { display: none; }

#units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.unit { padding: 1.5rem 1.6rem; border-radius: 32px; background: var(--cl); }
.unit:nth-child(1) { --cl: #E6F5DC; --c: #9BD67F; }
.unit:nth-child(2) { --cl: #DDEEFA; --c: #8BC5EE; }
.unit:nth-child(3) { --cl: #FFE9D2; --c: #F8B26A; }
.unit:nth-child(4) { --cl: #EEE7FA; --c: #C3AEEB; }
.unit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.unit-title .zh, .unit-title .en { display: block; font-size: 1.44rem; font-weight: 800; }
.unit-blurb { margin-top: 0.2rem; }
.unit-blurb .zh, .unit-blurb .en { display: block; font-size: 0.92rem; color: var(--text-secondary); }
.unit-read { font-size: 0.95rem; font-weight: 700; }
.lesson-list { display: flex; flex-direction: column; gap: 0.7rem; }
.lesson-link { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; border-radius: 22px; background: #FFFFFF99; color: var(--ink); transition: transform 0.08s ease, background 0.15s ease; }
.lesson-link:hover { text-decoration: none; background: #FFFFFF; }
.lesson-link.next { background: #FFFFFF; box-shadow: 0 5px 0 rgba(75, 58, 44, 0.15); }
.lesson-mark { width: 2.4rem; height: 2.4rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c, #FFD98A); font-size: 1.01rem; font-weight: 800; }
.lesson-link.done .lesson-mark { background: #7FD08F; }
.lesson-name .zh, .lesson-name .en { display: block; font-size: 1.0rem; font-weight: 800; }
.lesson-score { margin-left: auto; font-size: 0.92rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }

.tool-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.tool-card { display: block; padding: 1.5rem 1.7rem; border-radius: 30px; background: #FFE9D2; color: var(--ink); }
.tool-card:nth-child(2) { background: #DDEEFA; }
.tool-card:nth-child(3) { background: #EEE7FA; }
.tool-card:hover { text-decoration: none; filter: brightness(0.97); }
.tool-card > .zh, .tool-card > .en { display: block; font-size: 1.44rem; font-weight: 800; }
.tool-card p { margin: 0.5rem 0 0; }
.tool-card p .zh, .tool-card p .en { font-size: 0.97rem; color: var(--text-secondary); }

.section-title { margin: 0 0 1rem; }
.section-title .zh, .section-title .en { display: inline; font-size: 1.28rem; font-weight: 800; }

.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; width: 100%; max-width: 1240px; }
.topic-card { display: block; padding: 1.8rem 1.8rem 2rem; border-radius: 32px; background: var(--cl); box-shadow: 0 7px 0 var(--cd); color: var(--ink); text-align: left; transition: transform 0.08s ease, box-shadow 0.08s ease; }
.topic-card:nth-child(1) { --cl: #9BD67F; --cd: #7DBB61; }
.topic-card:nth-child(2) { --cl: #8BC5EE; --cd: #6BA8D4; }
.topic-card:nth-child(3) { --cl: #F8B26A; --cd: #DE9449; }
.topic-card:nth-child(4) { --cl: #C3AEEB; --cd: #A58ED0; }
.topic-card:hover { text-decoration: none; filter: brightness(1.04); }
.topic-card:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--cd); }
.topic-card > .zh, .topic-card > .en { display: block; font-size: 1.76rem; font-weight: 800; }
.topic-card p { margin: 0.7rem 0 0; }
.topic-card p .zh, .topic-card p .en { font-size: 0.97rem; font-weight: 600; }
.best-score { margin-top: 1.2rem; font-size: 0.96rem; font-weight: 700; color: var(--text-secondary); }

@media (max-width: 1000px) {
  #units, .tool-row { grid-template-columns: 1fr; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .topic-grid { grid-template-columns: 1fr; }
}

/* button labels follow the button's own size */
.btn .zh, .btn .en { font-size: inherit; color: inherit; display: inline; }
.lesson-action .zh, .lesson-action .en { display: inline; }

/* ---------- download page ---------- */

.files { width: 100%; max-width: 1240px; display: flex; flex-direction: column; gap: 2.75rem; text-align: left; }
.files .alpha-heading { margin: 0 0 1.2rem; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; }
.file-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.2rem; padding: 1.5rem 1.7rem; border-radius: 30px; background: var(--cl); color: var(--ink); box-shadow: 0 6px 0 var(--c); transition: transform 0.08s ease, box-shadow 0.08s ease; }
.file-card:hover { text-decoration: none; color: var(--ink); filter: brightness(0.98); }
.file-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--c); }
.file-name { font-size: 1.2rem; font-weight: 800; }
.file-note { margin-top: 0.2rem; font-size: 0.92rem; color: var(--text-secondary); }
.file-action { display: flex; flex-direction: row; align-items: center; gap: 0.9rem; flex: none; }
.file-get { padding: 0.7rem 1.4rem; border-radius: 99px; background: var(--c); font-size: 1.01rem; font-weight: 800; }
.file-size { font-size: 0.85rem; color: var(--text-secondary); }
.setting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.setting { padding: 1.1rem 1.3rem; border-radius: 24px; background: var(--cl); }
.setting-key { font-size: 0.95rem; color: var(--text-secondary); }
.setting-value { margin-top: 0.15rem; font-size: 1.04rem; font-weight: 800; }
.bom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; }
.bom-group { padding: 1.5rem 1.7rem; border-radius: 30px; background: var(--cl); }
.bom-title { margin-bottom: 0.8rem; font-size: 1.28rem; font-weight: 800; }
.bom-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.bom-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 1.01rem; line-height: 1.45; }
.bom-qty { flex: none; padding: 0.15rem 0.7rem; border-radius: 99px; background: var(--c); font-weight: 800; }
.files .credit-line { margin: 1rem 0 0; font-size: 0.95rem; color: var(--text-secondary); }

/* ---------- calibrate page ---------- */

.cal-num { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; margin-right: 0.4rem; border-radius: 50%; background: #FFD98A; box-shadow: 0 4px 0 #E0B45A; font-size: 1.28rem; font-weight: 800; align-self: center; }
.cal-bi .zh, .cal-bi .en { display: block; font-size: 1.0rem; line-height: 1.6; }
p.cal-bi { margin: 0 0 1rem; }
.cal-steps { margin: 0 0 1.2rem; padding-left: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.cal-steps li::marker { font-weight: 800; }
.code-block { margin: 0 0 1.2rem; padding: 1.3rem 1.5rem; max-height: 22rem; overflow: auto; border-radius: 26px; background: #4B3A2C; color: #FFF2DC; font-size: 0.95rem; line-height: 1.55; }
.code-block code { font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; }
.cal-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
.test-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 1.2rem; }
.group-title-bi .zh, .group-title-bi .en { font-size: 1.12rem; font-weight: 800; }
.letter-wide { min-width: 7rem; font-size: 1.04rem; }
.letter-wide .zh, .letter-wide .en { display: block; font-size: 1.04rem; color: inherit; }
.tune-table { display: flex; flex-direction: column; gap: 0.8rem; margin: 1.2rem 0; }
.tune-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 4fr); gap: 1rem; align-items: center; padding: 1rem 1.3rem; border-radius: 22px; background: var(--cl); }
.tune-name { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92rem; font-weight: 700; overflow-wrap: anywhere; }
.tune-value { font-size: 1.04rem; font-weight: 800; }
.tune-row .cal-bi .zh, .tune-row .cal-bi .en { font-size: 0.92rem; }
@media (max-width: 800px) { .tune-row { grid-template-columns: 1fr; } }

/* ---------- mouth shapes and the handshape drawings ---------- */

.mouth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.mouth-card { padding: 0.9rem 0.9rem 1.1rem; border-radius: 28px; background: var(--cl); text-align: center; }
.mouth-imgs { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.mouth-imgs.two { grid-template-columns: 1fr 1fr; }
.mouth-imgs img { display: block; width: 100%; height: auto; border-radius: 20px; }
.mouth-label { margin-top: 0.7rem; font-size: 1.6rem; font-weight: 800; }
.chart-img { display: block; width: 100%; height: auto; margin: 0.5rem 0 1rem; border-radius: 22px; background: #fff; }

/* the old page-wide "section + section" gap must not push grid cells out of line */
#units > section, .path section + section, .alpha > section + section, .files > section + section, .tool-row > * { margin-top: 0; }
.path > section, .alpha > section, .files > section { margin-top: 0; }

.file-card { flex-direction: row; align-items: center; }

/* the reading pages and the older cards, same single-language look */
.reading { width: 100%; max-width: 860px; text-align: left; display: flex; flex-direction: column; gap: 1.6rem; }
.reading h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.reading p { margin: 0; color: var(--text-secondary); line-height: 1.8; font-size: 1rem; }
.reading-center { text-align: center; }
.chart-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.chart-pair figure, .chart-single { margin: 0; border-radius: 22px; overflow: hidden; background: #fff; }
.chart-pair img, .chart-single img { display: block; width: 100%; }
.chart-pair figcaption { padding: 0.5rem 0.9rem 0.7rem; font-size: 0.85rem; color: var(--text-secondary); background: var(--bg-elevated); }
.chart-single { max-width: 640px; margin: 0 auto 1.5rem; }
.chart-narrow { max-width: 440px; }
.fact-line { margin: 0 0 0.6rem; color: var(--text-secondary); font-size: 0.95rem; }
.soft { font-weight: 400; color: var(--text-secondary); font-size: 0.9em; }
.note-wide { max-width: 760px; margin: 1.5rem auto 0; text-align: left; font-size: 1rem; line-height: 1.7; }
.ref-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ref-card { padding: 0.9rem 1.2rem; }


/* ---------- 3D model previews ---------- */

.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.model-card { padding: 0.9rem 0.9rem 1.1rem; border-radius: 30px; background: var(--cl); box-shadow: 0 6px 0 var(--c); }
.model-viewer { position: relative; height: 250px; border-radius: 22px; background: rgba(255, 255, 255, 0.6); overflow: hidden; cursor: grab; touch-action: pan-y; }
.model-viewer:active { cursor: grabbing; }
.model-viewer canvas { display: block; width: 100%; height: 100%; }
.model-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: var(--text-secondary); pointer-events: none; }
.model-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0.4rem 0; }
.file-get { display: inline-block; padding: 0.55rem 1.3rem; border-radius: 99px; background: var(--c); color: var(--ink); font-size: 1rem; font-weight: 800; }
.file-get:hover { color: var(--ink); text-decoration: none; filter: brightness(0.96); }

.bom-list li.has-image { flex-wrap: wrap; }
.bom-list li.has-image .bom-item { flex: 1; }
.bom-image { flex: 0 0 100%; display: flex; justify-content: center; margin-top: 0.3rem; }
.bom-thumb { height: 8.5rem; width: auto; max-width: 100%; object-fit: contain; }

#parts { scroll-margin-top: 1rem; }
.files[hidden], .section-list[hidden], #start-btn[hidden] { display: none; }
#hand-test { gap: 0; }
#hand-test .alpha-heading { justify-content: center; margin-bottom: 0.4rem; }
.note[hidden] { display: none; }

/* ---------- face reference (alphabet vowels, download) ---------- */

.group-num { flex: 0 0 2.5rem; min-width: 2.5rem; min-height: 2.5rem; line-height: 1; }

.face-figure { position: relative; width: 100%; background: #fff; border-radius: 28px; box-shadow: 0 6px 0 #EBD9BE; overflow: hidden; }
.face-img { display: block; width: 100%; height: auto; }
.face-spots { position: absolute; inset: 0; width: 100%; height: 100%; }
.face-pulse { transform-origin: 0 0; }
.face-spot.active .face-pulse { animation: face-pulse 0.7s ease-in-out infinite alternate; }
@keyframes face-pulse { from { transform: scale(1); } to { transform: scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .face-spot.active .face-pulse { animation: none; transform: scale(1.15); } }

/* the five vowel positions on the left, the face on the right */
.vowel-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 1.6rem; align-items: stretch; }
.vowel-layout #alpha-positions { grid-template-columns: 1fr; grid-template-rows: repeat(5, 1fr); }
.vowel-layout .group { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.3rem; }
.vowel-layout .group-head { flex: 0 0 15rem; }
.vowel-layout .letter-row { margin-top: 0; }
.face-panel { align-self: start; }
@media (max-width: 1000px) {
  .vowel-layout { grid-template-columns: 1fr; }
  .vowel-layout #alpha-positions { grid-template-rows: none; }
  .face-panel { max-width: 24rem; margin: 0 auto; }
}
@media (max-width: 640px) {
  .vowel-layout .group { flex-direction: column; align-items: flex-start; }
  .vowel-layout .group-head { flex-basis: auto; }
}

/* the face reference card on the download page: same card as the 3D models, with a preview */
.face-viewer { position: relative; display: block; width: 100%; padding: 0.9rem; border: none; border-radius: 22px; background: rgba(255, 255, 255, 0.6); font: inherit; color: inherit; cursor: zoom-in; }
.face-viewer .face-figure { box-shadow: none; border-radius: 16px; pointer-events: none; }
.face-viewer:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.face-foot { padding: 0.9rem 0.4rem 0; }
.face-dialog { padding: 0; border: none; border-radius: 28px; background: #fff; max-width: min(92vw, 44rem); max-height: 96vh; overflow: hidden; box-shadow: 0 10px 0 rgba(75, 58, 44, 0.2); }
.face-dialog::backdrop { background: rgba(75, 58, 44, 0.55); }
.face-dialog .face-figure { border-radius: 0; box-shadow: none; height: 80vh; width: auto; aspect-ratio: 210 / 297; max-width: 100%; margin: 0 auto; }
.face-dialog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; padding: 0.9rem 1.3rem 1.1rem; background: #FFF1E3; }
.face-dialog-note { flex: 1 1 100%; margin: 0; font-size: 0.95rem; }
.face-dialog-note .zh, .face-dialog-note .en { display: block; }
.face-dialog .face-img { height: 100%; width: 100%; object-fit: contain; }
.face-dialog-close { position: absolute; top: 0.8rem; right: 0.8rem; width: 2.8rem; height: 2.8rem; border: none; border-radius: 50%; background: #FFD98A; box-shadow: 0 4px 0 #E0B45A; color: var(--ink); font-size: 1.8rem; font-weight: 800; line-height: 1; cursor: pointer; }
.face-card-title .zh, .face-card-title .en { display: block; font-size: 1.5rem; font-weight: 800; }
.face-card-note { margin: 0.7rem 0 1.2rem; }
.face-card-note .zh, .face-card-note .en { display: block; font-size: 1.1rem; line-height: 1.5; }
.face-card-buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.face-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* "What is in the kit": four boxes in a row (hand, arm, electronics, face sheet), all the same height */
#parts .bom-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
#parts .bom-group { display: flex; flex-direction: column; padding: 1rem 1.2rem; }
#parts .bom-title { font-size: 1.12rem; margin-bottom: 0.5rem; }
#parts .bom-list { gap: 0.4rem; }
#parts .bom-list li { font-size: 0.93rem; gap: 0.5rem; line-height: 1.35; }
#parts .bom-thumb { height: 4.6rem; }
#parts .bom-image { margin-top: 0; }

/* the face sheet box: the preview fills it, the A4 picture is fitted inside by height */
.face-viewer { flex: 1; min-height: 250px; padding: 0; }
.face-viewer .face-figure { position: absolute; top: 0.7rem; bottom: 0.7rem; left: 50%; transform: translateX(-50%); width: auto; aspect-ratio: 210 / 297; }
.face-viewer .face-img { width: 100%; height: 100%; }
@media (max-width: 1050px) {
  #parts .bom-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .face-viewer { min-height: 26rem; }
}
.face-dialog:focus { outline: none; }
.face-foot-single { justify-content: center; }

/* TEMP (portfolio screenshots): download page 3D-model cards + parts-list cards all blue.
   Delete this block to restore the original green/blue/orange/purple cards. */
.model-card.pal-1, .model-card.pal-2, .model-card.pal-3, .model-card.pal-4,
.bom-group.pal-1, .bom-group.pal-2, .bom-group.pal-3, .bom-group.pal-4 { --c: #8BC5EE; --cd: #6BA8D4; --cl: #DDEEFA; }

/* the order / email links stay hidden until js/site-config.js has an address */
a[data-order][hidden], a[data-email][hidden] { display: none; }
.files .credit-line .zh, .files .credit-line .en { display: inline; }

/* the notes under the parts list: bigger, and close together */
.files .credit-block { display: flex; flex-direction: column; gap: 0.7rem; }
.files .credit-block .credit-line { margin: 0; font-size: 1.15rem; line-height: 1.55; color: var(--text-primary); }
/* highlighted words inside a sentence */
.hl { background: linear-gradient(transparent 58%, #FFD98A 58%); color: inherit; font-weight: 800; padding: 0 0.12em; }