/* Shared pixel materials, used in the hall, stories and learning panels. */
:root{--px-ink:#354332;--px-line:#4d563e;--px-paper:#f5e6ba;--px-edge:#bda56d;--px-green:#627d58;--px-shadow:#263a2d}body.lobby-mode{background:#405c45}.town-panorama{background-image:url('assets/pixel-harbour-lobby-v3.png');image-rendering:pixelated}.anime-edge{border:4px solid #304d3b55;background:linear-gradient(#244b5355,transparent 24%,transparent 72%,#17382d99)}.traveler-touch{left:65%;top:45%;width:18%;height:39%;display:grid;place-items:end center}.traveler-touch canvas{width:auto;height:100%;max-height:300px;image-rendering:pixelated;filter:drop-shadow(0 7px 0 #19392e33)}.traveler-line{left:74%;top:40%;background:#f9edc8;border:3px solid #596245;border-radius:0;box-shadow:3px 3px 0 #273e3280;color:#3a4e39;white-space:normal;width:220px;line-height:1.7}.traveler-line:after{border-top-color:#596245}.anime-profile{background:linear-gradient(90deg,#294936ef,#29493677,transparent);border-color:#d2c18c}.profile-emblem{clip-path:none;border:3px solid #e7d49e;box-shadow:3px 3px 0 #233e2c;background:#8ca47c;color:#f8ecc8;font-size:29px}.anime-resources>span{clip-path:none;border:2px solid #d0bf8c;background:#2c4a3be6;box-shadow:2px 2px 0 #23392d}.anime-resources em{color:#e0e5c5}.anime-dock svg,.anime-events svg,.anime-left svg{filter:drop-shadow(2px 3px 0 #20392d);shape-rendering:crispEdges}.anime-dock span,.anime-events span,.anime-left span{font-family:'Microsoft YaHei',sans-serif;font-size:16px;text-shadow:2px 2px #2d4435,-1px -1px #2d4435}.town-location{filter:drop-shadow(2px 3px 0 #203d32aa)}.town-location span{clip-path:none;background:#304b37e8;border:2px solid #e2cf99;border-bottom:4px solid #172f24;color:#f8e9c0;font:700 19px 'Microsoft YaHei',sans-serif;writing-mode:vertical-rl;padding:10px 6px;letter-spacing:2px}.town-location small{background:#344f3cdd;color:#f1e7c8}.anime-mission{background:linear-gradient(90deg,#294332ee,#294332b0,transparent);border-color:#dbc58c}.anime-mission>b{font-family:'Microsoft YaHei',sans-serif;font-weight:700;font-size:23px}.anime-adventure{clip-path:none;transform:none;border:3px solid #4e533b;border-radius:0;background:linear-gradient(#f0d79b 0 7%,#dfc186 7% 91%,#bc9a5f 91%);box-shadow:inset 0 0 0 2px #fff0c2,4px 4px 0 #263c2e;color:#3e4d36}.anime-adventure b{font-family:'Microsoft YaHei',sans-serif;font-size:26px}.loc-library{left:15%;top:41%}.loc-prep{left:32%;top:35%}.loc-story{left:58%;top:49%}
body.lobby-mode dialog,body.parchment dialog,body.quest-mode dialog,dialog#panel{border:4px solid var(--px-line);border-radius:0;background:var(--px-paper);color:var(--px-ink);box-shadow:0 0 0 3px #d6c18c,0 0 0 7px #3d4e38,8px 12px 0 #1e35294d,0 25px 80px #10271dcc;padding:30px;max-height:calc(100svh - 48px);scrollbar-color:#899867 #e4d3a5;scrollbar-width:thin}dialog#panel::backdrop{background:#142c25b8;backdrop-filter:blur(3px)}#panel .close{position:sticky;top:0;float:right;z-index:10;min-width:40px;min-height:40px;padding:2px;border:2px solid #61704b;background:#e7d5a0;color:#435439;border-radius:0;box-shadow:2px 2px 0 #b6a371;font-size:25px;line-height:1}#panelBody{clear:both}#panelBody h2{font:700 25px/1.5 'Microsoft YaHei',sans-serif;color:#3e5137;letter-spacing:1px;margin:12px 0 20px}#panelBody h3{font-size:18px;color:#4f6240}#panelBody p,#panelBody li{color:#566049;font-size:14px;line-height:1.9}#panelBody .qeyebrow,#panelBody .course-topline,#panelBody .eyebrow{font-size:10px;letter-spacing:2px;color:#7b8255;border-bottom:2px dashed #c4b784;padding-bottom:12px}#panelBody .qdialogue{position:relative;display:grid;grid-template-columns:84px 1fr;gap:18px;align-items:start;padding:24px 20px 18px;margin:24px 0;background:#fff1ca;border:3px solid #70805a;border-radius:0;box-shadow:4px 4px 0 #ccbc88;min-height:135px}#panelBody .qavatar{width:80px;height:86px;flex-shrink:0;border:3px solid #6e7f55;border-radius:0;background-color:#b0bf8c!important;image-rendering:pixelated;box-shadow:inset 0 0 0 2px #e0d5a4,3px 3px 0 #beae76;background-size:cover}#panelBody .qtasklabel{display:inline-block;padding:6px 14px;background:#5d7853;color:#fff0c8;font-size:13px;border:2px solid #415a3b;box-shadow:2px 2px 0 #c4b27e;letter-spacing:2px}#panelBody .qdialogue p{font-size:15px;line-height:1.9;color:#394e36;margin-bottom:8px}.pixel-reveal{display:block;margin:5px 0 0 auto;font-size:11px;background:transparent;color:#5c7149;border:0;border-bottom:1px dashed #899a6b;padding:6px;min-height:32px;cursor:pointer}.pixel-typing{min-height:2em}#panelBody button:not(.close):not(.pixel-reveal),#dialogue button{border-radius:0;transition:background .12s,box-shadow .12s,transform .08s}#panelBody .qbtn,#panelBody .wood-btn,#panelBody .primary,#dialogue .primary{background:#6b8457;color:#fff1cc;border:2px solid #42583b;box-shadow:3px 3px 0 #b2a16f,inset 0 0 0 1px #9fb27b;text-shadow:none;font:700 14px/1.5 'Microsoft YaHei',sans-serif;padding:12px 18px;letter-spacing:1px;min-height:46px}#panelBody .qbtn.alt,#panelBody .secondary,#dialogue .secondary{background:#e4d5a7;color:#4a5c3f;border:2px solid #899466;box-shadow:3px 3px 0 #beae7e;min-height:44px;padding:10px 14px}#panelBody button:active:not(:disabled),#dialogue button:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}#panelBody button:focus-visible,#dialogue button:focus-visible{outline:3px solid #426d62;outline-offset:3px}#panelBody button:disabled{opacity:.55;cursor:default}#panelBody input,#panelBody textarea,#dialogue textarea{background:#fff7dc;color:#3e503b;border:2px solid #9b9f72;border-radius:0;font:16px/1.6 'Microsoft YaHei',sans-serif;padding:10px;box-shadow:inset 2px 2px 0 #dfd3a6}#panelBody .qword{background:#f9efce;border:2px solid #a6a87a;box-shadow:3px 3px 0 #d1c292;min-height:128px;padding:15px;text-align:left}#panelBody .qword strong{color:#405a3d;font-size:18px}#panelBody .qword.done{border-color:#60865b;background:#e5ebc3}#panelBody .qresult,#panelBody .qreview-item,#panelBody .hall-history,#panelBody .qpatterns>div{border-radius:0;border:2px solid #b3ad7d;background:#f9edc7;padding:16px;line-height:1.8}#panelBody .qresult.error{border-left:5px solid #b77655;background:#f5e3c2}#panelBody .qpassage{background:#fff5d9;border:2px solid #b8ad7b;padding:20px;color:#46523d;line-height:1.95;font-size:15px}.phone-reading-tabs button.active{background:#718559!important;color:#fff2cf!important}#panelBody [aria-pressed=true],#panelBody button.selected{background:#71865b!important;color:#fff1cc!important;border-color:#456142!important}#panelBody .qstars{padding:12px;background:#e8dbac;border:2px solid #bfaf7a;display:inline-flex}#panelBody .qstars .lit{color:#c78d30;text-shadow:1px 2px #836333}
#dialogue{background:#f6e7ba;border:4px solid #576747;border-radius:0;box-shadow:0 0 0 2px #d5c08a,5px 5px 0 #1f392b88;padding:24px;color:#3c5038}#dialogue .speaker{color:#fff0c8;background:#657c54;border:2px solid #435c3b;padding:7px 14px;width:fit-content;margin-bottom:17px;gap:12px}#dialogue .portrait{width:56px;height:56px;border:2px solid #e1d2a0;border-radius:0;background-color:#a5b984;background-size:cover;image-rendering:pixelated;color:#fff0c6}#dialogue .pill{border-radius:0;background:#d9dfb3;color:#4e6546;border:1px solid #879868}#dialogue .narration,#dialogue .en{color:#40533b;line-height:1.9}#dialogue .zh{color:#6d7352}#dialogue .choice{background:#fff0c9;color:#40543b;border:2px solid #a5a778;box-shadow:3px 3px 0 #ccbc88;border-radius:0;padding:14px;min-height:50px;text-align:left;line-height:1.7}#dialogue .choice b{color:#6b8253}#dialogue .choice:hover{background:#e8ebc2;border-color:#74895b}#dialogue .choice.pixel-picked{background:#d9e4b4;border-color:#587c4d}#dialogue .feedback{border:2px solid #b28460;background:#f0dfbd;color:#755c3c;border-radius:0;padding:16px;margin-top:18px}#dialogue .feedback.good{border-color:#6d8b58;background:#e2e9bd;color:#415e38}#dialogue .note{border-radius:0;background:#ffefc7;color:#4a5a40;border:2px dashed #a5a576}
@media(orientation:portrait) and (max-width:760px){.traveler-touch{top:43%;height:35%}.traveler-line{top:35%;width:185px;font-size:11px}.anime-dock span,.anime-events span,.anime-left span{font-size:13px}.anime-mission>b{font-size:21px}.anime-adventure b{font-size:22px}.town-location span{font-size:18px}#panelBody .qdialogue{grid-template-columns:58px 1fr;gap:12px;padding:17px 12px}#panelBody .qavatar{width:56px;height:62px}#panelBody .qtasklabel{font-size:12px;padding:5px 8px}}
@media(max-width:760px){dialog#panel,body.quest-mode dialog,body.lobby-mode dialog{width:calc(100% - 24px);padding:16px;max-height:calc(100svh - 32px)}#panelBody h2{font-size:22px}#panelBody p{font-size:14px}#panelBody .qdialogue p{font-size:14px}#panelBody .action-row,#panelBody .hall-action-row{gap:12px}#panelBody .qbtn,#panelBody .wood-btn{font-size:13px;min-height:46px}#dialogue{padding:17px;border-width:3px}#dialogue .speaker{font-size:14px}#dialogue .portrait{width:45px;height:45px}#dialogue .choice{font-size:14px}#panelBody .qpassage{padding:14px;font-size:15px}}
@media(max-height:600px) and (orientation:landscape){.traveler-touch{top:42%;height:40%}.traveler-line{top:33%;width:180px;font-size:10px;padding:6px 10px}.anime-dock span,.anime-events span,.anime-left span{font-size:14px}.anime-adventure b{font-size:23px}.town-location span{font-size:15px}.loc-story{top:44%}.anime-profile b{font-size:14px}}
.profile-emblem{background-size:cover;image-rendering:pixelated}.traveler-touch canvas{animation:pixel-idle 3.6s ease-in-out infinite}@keyframes pixel-idle{50%{transform:translateY(-2px)}}@media(prefers-reduced-motion:reduce){.traveler-touch canvas{animation:none}}
.traveler-touch{left:59%}.traveler-line{left:68%}.traveler-touch canvas{max-width:100%;height:auto;max-height:100%}