.pg-shell{position:fixed;inset:0;z-index:1100;background:#e8ecd9;color:#3a5e45;font:14px HanweiVietnamese,'Segoe UI',sans-serif;overflow:hidden}.pg-shell[hidden]{display:none}.pg-shell *{box-sizing:border-box}.pg-world{position:relative;width:100%;height:100%;overflow:hidden}.pg-land{position:absolute;inset:0;background:url('assets/town/arrival-forecourt.webp') center/cover}.pg-top{position:absolute;top:15px;left:20px;right:20px;z-index:12;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.pg-top>div:first-child{background:#fffaf0ec;padding:11px 18px;border:1px solid #d1dbbf;border-radius:16px}.pg-top small{font-size:8px;color:#8b9b78;letter-spacing:.08em}.pg-top h1{font-size:16px;line-height:1.5;margin:4px 0}.pg-top>div:last-child{display:flex;gap:10px;align-items:center}.pg-top a,.pg-top button{background:#fffaf0eb;border:1px solid #c4d2ae;border-radius:12px;padding:10px 14px;font:11px HanweiVietnamese,sans-serif;color:#718d5c;text-decoration:none}.pg-preserved{font-size:9px;color:#718b60;background:#fffaf0da;padding:10px;border-radius:11px;max-width:180px}.pg-narrator{position:absolute;z-index:7;right:20px;top:110px;width:min(500px,43vw);padding:14px 22px;background:#fffaf0e9;border:1px solid #d3dcc3;border-radius:16px;color:#5c784e;font-size:12px;line-height:1.9;text-align:center;box-shadow:0 3px 0 #7b92501a}.pg-bus{position:absolute;left:10%;top:36%;width:clamp(340px,38vw,550px);transform:translateY(-80%);z-index:3;pointer-events:none}.pg-bus svg{display:block;width:100%;filter:drop-shadow(0 7px 3px #394e362b)}.pg-bus.pg-arriving{animation:pg-bus-arrive 2.7s cubic-bezier(.18,.65,.2,1) both}.pg-bus.pg-departing{animation:pg-bus-depart 2.2s ease-in both}.pg-arriving .bus-wheel,.pg-departing .bus-wheel{animation:bus-tire-roll .65s linear infinite}.pg-noisy .bus-suspension{animation:pg-motor .15s ease-in-out infinite alternate}.pg-player,.pg-goat{position:absolute;z-index:5;transform:translate(-50%,-100%);pointer-events:none}.pg-player{width:112px;height:160px}.pg-player>svg{width:100%;height:100%;overflow:visible}.pg-goat{width:136px;height:156px}.pg-confused{position:absolute;top:-18px;right:1px;display:grid;place-items:center;background:#fff9e9;border:1px solid #bccca9;border-radius:50%;height:30px;width:30px;color:#8c9b78;font-size:20px}.pg-dust-four{position:absolute;left:77%;top:56%;font:italic 50px Georgia,serif;transform:rotate(-9deg);color:#a49c7a;text-shadow:1px 2px #f5e3bb;opacity:.8;z-index:4}.pg-device{position:absolute;left:20px;bottom:24px;width:150px;z-index:12;background:#fffaf0ec;border:1px solid #c8d4b5;padding:13px;border-radius:15px;display:grid;gap:6px}.pg-device small{font-size:8px;color:#8a9d74;letter-spacing:.04em}.pg-device>b{font-size:22px;font-weight:500;color:#6d8c53}.pg-device>span,.pg-device>em{font-size:9px;font-style:normal;color:#91a17b}.pg-battery{height:5px;background:#e0e6d2;border-radius:5px;overflow:hidden}.pg-battery i{display:block;height:100%;background:#9ab57f}.pg-device.low{border-color:#d4bb8e}.pg-device.low>b,.pg-device.low>em{color:#af8758}.pg-device.low .pg-battery i{background:#c0a170}.pg-dialogue{position:absolute;z-index:20;left:50%;bottom:24px;transform:translateX(-50%);width:min(810px,calc(100% - 380px));max-height:39%;overflow:auto;background:#fffaf0f5;border:1px solid #c5d3b2;border-radius:20px;padding:20px 24px;scrollbar-width:thin}.pg-speaker{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#81996a}.pg-speaker>b{font-size:10px;letter-spacing:.06em;font-weight:500}.pg-shell button{font:11px HanweiVietnamese,sans-serif;color:#5d7d4b;background:#edf2df;border:1px solid #c6d4b4;border-radius:11px;padding:9px 13px;cursor:pointer}.pg-shell button:disabled{opacity:.5;cursor:default}.pg-shell button:focus-visible,.pg-shell a:focus-visible,.pg-shell summary:focus-visible{outline:3px solid #91a873;outline-offset:3px}.pg-speaker button{font-size:8px;padding:5px 10px}.pg-cn{font:21px/1.8 'Microsoft YaHei','Noto Sans SC',sans-serif;margin:12px 0;background:#eff3e1;border:1px solid #dce5cd;border-radius:12px;padding:11px 15px;color:#3e6344}.pg-translation{display:flex;align-items:baseline;gap:12px;font-size:12px;line-height:1.85;color:#5f7d50;border-left:2px solid #a3b98b;padding-left:10px;margin:13px 0}.pg-translation small{font-size:8px;white-space:nowrap;color:#9aaa89}.pg-translation.misheard{background:#f3e8d2;border-color:#c7ac77;color:#9d7b49;padding:8px 10px;border-radius:0 9px 9px 0}.pg-inner-thought{font-size:15px;line-height:1.9;color:#6f8a5d;padding:4px 0}.pg-dialogue footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:13px}.pg-dialogue footer>span{font-size:9px;color:#a0ad8d;margin-right:auto}.pg-dialogue .pg-next{background:#436b4f;color:#fffcf0;border-color:#436b4f;padding:11px 18px}.pg-dialogue .pg-back{padding:7px 11px;background:transparent}.pg-help{position:absolute;bottom:24px;right:20px;width:145px;font-size:9px;line-height:1.8;z-index:25;color:#799166;background:#fffaf0e3;border:1px solid #cfdbbf;border-radius:13px;padding:11px}.pg-help summary{cursor:pointer}.pg-help p{font-size:10px}.pg-status{position:absolute;top:83px;left:50%;transform:translateX(-50%);font-size:10px;color:#75905f;background:#fff9e8e6;border-radius:9px;padding:0 10px;z-index:30}.pg-status:empty{display:none}
@keyframes pg-bus-arrive{from{left:-65%}to{left:10%}}@keyframes pg-bus-depart{from{left:10%}to{left:135%}}@keyframes pg-motor{from{transform:translateY(0)}to{transform:translateY(2px)}}
@media(max-width:1099px){.pg-dialogue{width:calc(100% - 260px);max-height:37%}.pg-narrator{top:110px;width:min(450px,43vw);font-size:11px}.pg-device{width:120px;left:12px;bottom:25px}.pg-help{right:12px;width:110px}.pg-top{left:12px;right:12px}.pg-player{width:100px;height:143px}.pg-goat{width:122px;height:140px}}
@media(max-width:699px){.pg-top{top:12px;gap:8px}.pg-top>div:first-child{padding:9px 13px;max-width:245px}.pg-top h1{font-size:14px}.pg-top small{font-size:7px}.pg-top a,.pg-top button{font-size:8px;padding:8px;white-space:nowrap}.pg-top>div:last-child{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.pg-preserved{font-size:7px;max-width:110px;padding:6px}.pg-narrator{top:105px;left:12px;right:12px;padding:12px 15px;font-size:10px;width:calc(100% - 24px);line-height:1.9}.pg-bus{left:4%;width:300px;top:42%}.pg-bus.pg-arriving{animation-name:pg-bus-arrive-mobile}.pg-bus.pg-departing{animation-name:pg-bus-depart-mobile}.pg-player{width:87px;height:126px}.pg-goat{width:94px;height:110px}.pg-dialogue{bottom:90px;width:calc(100% - 24px);padding:15px 17px;border-radius:17px;max-height:34%}.pg-cn{font-size:18px;line-height:1.8;padding:10px 12px;margin:10px 0}.pg-translation{display:block;font-size:11px;margin:10px 0}.pg-translation small{display:block;font-size:7px;margin-bottom:3px}.pg-inner-thought{font-size:13px;line-height:1.9}.pg-dialogue .pg-next{font-size:10px;padding:10px 12px;max-width:90%;text-align:left}.pg-device{bottom:14px;left:12px;width:calc(100% - 24px);grid-template-columns:1fr auto;gap:4px 10px;padding:10px 14px;border-radius:14px}.pg-device>b{grid-column:2;grid-row:1/3;font-size:20px}.pg-device .pg-battery{grid-column:1}.pg-device>span{font-size:8px}.pg-device>em{grid-column:2;font-size:7px}.pg-device small{font-size:7px}.pg-help{bottom:auto;top:205px;right:12px;width:136px;font-size:8px;padding:8px}.pg-help p{font-size:9px}.pg-dust-four{left:76%;top:56%;font-size:35px}}
@keyframes pg-bus-arrive-mobile{from{left:-95%}to{left:4%}}@keyframes pg-bus-depart-mobile{from{left:4%}to{left:140%}}@media(prefers-reduced-motion:reduce){.pg-shell *{animation:none!important;transition:none!important}}

.g-name-error{font:12px/1.8 HanweiVietnamese,sans-serif;color:#9b6348}.g-name-error:empty{display:none}.pg-personal-name{display:inline-block;font-family:HanweiVietnamese,sans-serif;font-size:.85em;background:#dfe9ce;border-radius:8px;padding:0 8px;margin-right:6px}.pg-device>em{display:none}

.pg-learning-note{font-size:11px;line-height:1.9;color:#607c50;border-top:1px dashed #cfdbc0;padding-top:10px;margin:10px 0 0}.pg-dialogue{max-height:44%}@media(max-width:699px){.pg-learning-note{font-size:9px}.pg-dialogue{max-height:40%}}

.fs-syllables{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;background:#edf2df;padding:24px;border-radius:16px;margin:20px 0}.fs-syllables>span{font-size:30px;text-align:center}.fs-small{display:block;font-size:10px;color:#698257;margin-top:7px}.fs-tone-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}.fs-tone-grid button b{display:block;font-size:24px}.fs-tone-grid button small{display:block;font-size:10px;margin-top:7px}.fs-status,.fs-feedback{font-size:12px;line-height:1.8;color:#6a824f}

.device-quiet .sr-device-head>b,.device-quiet .sr-battery{display:none!important}

.pg-practice{margin:10px 0;border:1px solid #d3dfc3;border-radius:12px;padding:8px 12px}.pg-practice legend{font-size:13px;color:#37583e}.pg-practice button{font-size:17px;margin:3px 6px 3px 0}.pg-practice-done,.pg-reply-feedback{color:#456c47;font-size:13px}.pg-reply-feedback:empty{display:none}.pg-pinyin-card{position:absolute;left:22%;top:34%;display:grid;text-align:center;gap:3px;background:#fff6df;color:#36553e;padding:10px 17px;border:1px solid #c9ae83;border-radius:9px;transform:rotate(-4deg)}.pg-pinyin-card small{font-size:8px}.pg-pinyin-card b{font-size:23px}@media(max-width:699px){.pg-dialogue:has(.pg-practice){max-height:48%}.pg-pinyin-card{left:4%;top:33%}}
