#topbar{flex-wrap:wrap;row-gap:4px}
#topbar .coin,#topbar .badges,#topbar .tk-cr-chip{flex-shrink:0}
#topbar .coin{white-space:nowrap}
#cq-journey{flex:1 1 50%;min-width:0;min-height:32px;padding:5px 8px;border:1px solid #a8976e;background:#f5ead0;color:#4a4635;font:12px/1.5 'Noto Sans SC',sans-serif;text-align:left;cursor:pointer;white-space:normal;touch-action:manipulation}
#cq-journey:hover{background:#fff3d3}
#cq-escort-stop{flex:0 0 auto;min-height:32px;padding:5px 12px;border:1px solid #a8976e;background:#63503c;color:#fff1ce;cursor:pointer;touch-action:manipulation}
#cq-journey[hidden],#cq-escort-stop[hidden]{display:none}
#cq-prologue{position:fixed;inset:0;z-index:30000;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:#152e35;color:#fff3d2;font-family:'Noto Sans SC',sans-serif;isolation:isolate}
.cq-prologue-scene{position:absolute;z-index:-2;inset:-2%;background:url('../assets/chem-quest/title/landscape.png') 53% 50%/cover no-repeat;image-rendering:pixelated;animation:cq-story-pan 28s ease-in-out infinite alternate;transition:filter 1.6s ease,background-position 1.6s ease}
#cq-prologue[data-page="1"] .cq-prologue-scene{filter:brightness(.62) saturate(.85);background-position:75% 50%}
#cq-prologue[data-page="2"] .cq-prologue-scene{filter:brightness(.85);background-position:35% 50%}
#cq-prologue[data-page="3"] .cq-prologue-scene{background-position:85% 50%}
#cq-prologue:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#112c3330 10%,transparent 36%,#122a35b8 68%,#11212def)}
.cq-prologue-page{width:min(680px,100%);box-sizing:border-box;padding:25px 34px max(26px,env(safe-area-inset-bottom));margin:0 0 3vh;text-shadow:0 2px #193440}
.cq-prologue-place{font-size:12px;letter-spacing:.25em;color:#f2ca7a;margin:0 0 12px}
.cq-prologue-page h1{font-size:clamp(24px,4.5vw,38px);line-height:1.4;margin:0 0 20px;letter-spacing:.12em;font-weight:700}
.cq-prologue-copy{white-space:pre-line;font-size:clamp(15px,2vw,18px);line-height:2;min-height:7em;margin:0 0 20px;max-width:36em}
.cq-prologue-page footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cq-prologue-progress{font-size:12px;letter-spacing:.15em;color:#e5c67e}
#cq-prologue button{font:inherit;cursor:pointer;touch-action:manipulation;min-height:44px}
.cq-prologue-next{border:2px solid #d6af69;background:#f0d496;color:#3b3f32;padding:10px 20px;box-shadow:3px 3px #20333a;text-shadow:none;font-weight:700!important}
.cq-prologue-next:hover{background:#ffe5af}
.cq-prologue-skip{position:absolute;top:max(16px,env(safe-area-inset-top));right:20px;padding:8px 14px;border:1px solid #eee0b180;background:#1b3a47c9;color:#f5e5c3;font-size:12px!important}
#cq-prologue button:focus-visible{outline:3px solid #fff4cb;outline-offset:4px}
.cq-prologue-motes{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cq-prologue-motes i{position:absolute;width:3px;height:3px;background:#fff2a7;box-shadow:0 0 6px #ffdc73;animation:cq-story-mote 7s ease-in-out infinite;left:15%;top:56%}
.cq-prologue-motes i:nth-child(2){left:71%;top:40%;animation-delay:-3s}
.cq-prologue-motes i:nth-child(3){left:46%;top:52%;animation-delay:-6s}
.cq-prologue-motes i:nth-child(4){left:86%;top:63%;animation-delay:-1s}
.cq-prologue-motes i:nth-child(5){left:27%;top:30%;animation-delay:-4s}
@keyframes cq-story-pan{to{transform:translate(-.8%,.5%) scale(1.025)}}
@keyframes cq-story-mote{0%,100%{opacity:.1;transform:translate(0,0)}50%{opacity:.85;transform:translate(9px,-12px)}}
@media(max-width:480px){#topbar{padding:5px 8px;gap:3px 7px}#cq-journey{font-size:11px;min-height:32px}#topbar .area-name{font-size:12px}.cq-prologue-page{padding:22px 24px max(24px,env(safe-area-inset-bottom));margin-bottom:3vh}.cq-prologue-copy{line-height:1.9;min-height:10em}.cq-prologue-next{padding:10px 12px;font-size:14px!important}}
@media(max-height:480px){.cq-prologue-page{margin:0;padding:18px 28px;width:min(760px,100%)}.cq-prologue-place{margin-bottom:5px}.cq-prologue-page h1{font-size:23px;margin-bottom:8px}.cq-prologue-copy{font-size:14px;line-height:1.7;min-height:0;margin-bottom:12px}.cq-prologue-skip{top:8px;right:10px}.cq-prologue-next{padding:6px 14px}}
@media(prefers-reduced-motion:reduce){.cq-prologue-scene,.cq-prologue-motes i{animation:none;transition:none}}



#device #dialog{height:auto;max-height:72%;padding:10px 12px;background:#fff2d6;border:3px solid #705737;box-shadow:inset 0 0 0 2px #fffaf0,0 -3px 0 #bd945b,3px 3px 0 #263c3bb0;animation:cq-dialog-open 120ms ease-out}
#device #dialog .whorow{display:flex;margin:0 0 6px;min-height:28px;gap:8px}
#device #dialog #dlg-face{width:32px;height:32px;border-color:#bc995b;background:#e9d7ad}
#device #dialog .who{font-size:13px;color:#66412e;letter-spacing:.06em}
#device #dialog .msg{flex:1 1 auto;font-size:15px;line-height:1.65;min-height:50px;max-height:7em;color:#343c37}
#device #dialog .choices{flex:0 1 auto;max-height:148px;min-height:44px;gap:5px;margin-top:8px}
#device #dialog button.tbtn{font-family:inherit;text-align:left;min-height:44px;box-sizing:border-box;flex-shrink:0;touch-action:manipulation}
#device #dialog .tbtn{padding:9px 11px;font-size:14px;border-color:#b39562;background:#fffaf0;color:#414537}
#device #dialog button.tbtn:focus-visible{outline:3px solid #368584;outline-offset:-4px;background:#e1f0df}
@keyframes cq-dialog-open{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:360px),(max-height:480px){#device #dialog{padding:7px 9px}#device #dialog #dlg-face{width:26px;height:26px}#device #dialog .msg{font-size:14px;line-height:1.6;min-height:45px}#device #dialog .whorow{margin-bottom:4px}#device #dialog .choices{margin-top:5px}}
@media(orientation:landscape){#device #dialog .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));max-height:94px}#device #dialog{max-height:67%}}
@media(prefers-reduced-motion:reduce){#device #dialog{animation:none}}
#device #p-act{text-shadow:none}
