/* UI修改.docx: supplied parchment frame and painted tea accessories. */
#endingScreen h1{font-size:clamp(38px,4.5vw,68px);letter-spacing:7px;white-space:nowrap}
#endingScreen #enterCityButton{
  position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;
  width:min(660px,80vw);min-height:134px;margin:10px 0 25px;padding:16px 54px;gap:9px;
  border:0;border-radius:0;box-shadow:none;background:url('assets/ui/tea-paper/city-entry-frame.png') center/100% 100% no-repeat;
  color:#4b3824;filter:drop-shadow(0 7px 13px #14241d36);transition:filter .18s,transform .18s;
}
#endingScreen #enterCityButton small{color:#543e28;font-size:11px;line-height:1.4;letter-spacing:4px}
#endingScreen #enterCityButton strong{color:#4b3824;font:31px/1.35 var(--serif);letter-spacing:3px}
#endingScreen #enterCityButton:hover{filter:brightness(1.035) drop-shadow(0 9px 15px #14241d42);transform:translateY(-1px)}
#endingScreen #enterCityButton:active{transform:translateY(1px)}
#endingScreen #enterCityButton:focus-visible{outline:2px solid #efdab0;outline-offset:5px}
#endingScreen .ending-actions{gap:34px}

/* Move title and navigation together only throughout the tea chapter. */
#chapterRoot[data-tea-chapter=true] .chapter-topbar{padding-top:20px}

#chapterLesson{
  width:min(1180px,calc(100% - 160px));min-height:130px;bottom:24px;
  padding:0 70px 2px 144px;border:18px solid transparent;
  border-image:url('assets/ui/tea-paper/lesson-frame.png') 28 fill / 18px / 0 stretch;
  border-radius:0;background:none;box-shadow:none;backdrop-filter:none;
  color:#51432f;filter:drop-shadow(0 6px 12px #2a241d3d);
}
.tea-lesson-art{position:absolute;display:block;background: center/contain no-repeat;pointer-events:none;user-select:none}
/* Match the supplied layout: pot overlaps the left rim, cup crosses the lower-right corner.
   Absolute offsets include the panel's 18px border; side gutters keep both PNGs in view. */
.tea-lesson-pot{width:212px;height:154px;left:-92px;top:-38px;background-image:url('assets/ui/tea-paper/tea-pot.png')}
.tea-lesson-cup{width:96px;height:80px;right:-72px;bottom:-27px;background-image:url('assets/ui/tea-paper/tea-cup.png')}
#chapterLesson .lesson-head{position:relative;display:grid;grid-template-columns:minmax(88px,max-content) minmax(0,1fr) auto auto auto;gap:13px;min-height:52px}
#chapterLesson #lessonNumber{min-width:0;padding-right:16px;border-color:#9d855e55}
#chapterLesson #lessonNumber small{font-size:10px;letter-spacing:2px;color:#816846;margin-bottom:5px}
#chapterLesson #lessonNumber strong{font-size:23px;color:#665137;letter-spacing:3px}
#chapterLesson #lessonStatus{font-size:16px;line-height:1.6;letter-spacing:.4px;color:#453d2e;text-shadow:none;overflow-wrap:anywhere}
#chapterLesson .lesson-head button{
  min-width:52px;min-height:36px;margin:0;padding:6px 10px;
  border:1px solid #a28b63;border-radius:3px;background:#faf3e3a6;color:#5b4b33;font-size:13px;
  box-shadow:0 2px 3px #82705212;transition:background .15s,box-shadow .15s;
}
#chapterLesson .lesson-head button:hover:not(:disabled){background:#e5d8bc;color:#3e3728;box-shadow:0 2px 5px #82705229}
#chapterLesson #lessonSkip{min-width:116px;background:#526d61;border-color:#405b50;color:#fff5df}
#chapterLesson #lessonSkip:hover:not(:disabled){background:#405b50;color:#fff9eb}
#chapterLesson .lesson-head button:focus-visible{outline:2px solid #526d61;outline-offset:3px}
#chapterLesson .lesson-progress{height:3px;margin:9px 0 8px;background:#ab946532}
#chapterLesson .lesson-progress>i{background:linear-gradient(90deg,#577c6b,#b49a60);box-shadow:none}
#chapterLesson .lesson-foot{gap:15px;color:#69583e;font-size:11px;letter-spacing:.3px}
#chapterLesson .lesson-foot>span{color:#69583e;letter-spacing:2px}
@media(max-width:1450px){
  #chapterLesson{padding-right:62px}
  #chapterLesson .lesson-head{gap:11px;grid-template-columns:minmax(82px,max-content) minmax(0,1fr) auto auto auto}
  #chapterLesson #lessonStatus{font-size:15px}
}
@media(max-height:800px){
  #endingScreen #enterCityButton{min-height:116px;padding-top:13px;padding-bottom:13px;gap:7px;margin-bottom:22px}
  #endingScreen #enterCityButton strong{font-size:29px}
  #chapterLesson{bottom:20px}
}
@media(prefers-reduced-motion:reduce){#endingScreen #enterCityButton{transition:none}}