@font-face{font-family:book;src:url('assets/serif.ttf')}*{box-sizing:border-box}body{margin:0;background:#233e37 url('assets/world-cartoon-v06.png') center/cover fixed;color:#4c2d19;font-family:book,serif}button,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #287d80;outline-offset:2px}button:disabled{opacity:.5;cursor:default}#game{width:min(100%,600px);height:100dvh;min-height:640px;margin:auto;position:relative;background:url('assets/book-background.png') center/100% 100%;box-shadow:0 0 90px #14261e}header{position:absolute;top:2.5%;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;color:#fff}header button,nav button,.pagehead button{border:2px solid #603f27;background:#f8edcf;border-radius:16px;padding:9px 12px}#lead{position:absolute;top:10%;left:18%;width:64%;height:8%;overflow:auto}#lead small{color:#287d80;font-size:12px}#goal{display:block;border:0;background:none;padding:0;text-align:left;font-size:16px;font-weight:bold}#clue{font-size:12px;margin:2px 0;line-height:1.5}#book{position:absolute;top:21%;left:5%;right:5%;height:45%;display:flex;gap:10%}.page{width:45%;min-width:0;display:flex;flex-direction:column}.pagehead{height:13%;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:4px}.pagehead button{padding:0 11px;font-size:25px}.grid{overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:8px 4px;flex:1;padding:8px 2px;scrollbar-width:thin;scrollbar-color:#ad8c59 transparent}.card{border:1px solid transparent;background:transparent;border-radius:12px;min-width:0;min-height:100px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:5px 2px;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.card svg,.card img{width:100%;height:54px;flex-shrink:0;filter:drop-shadow(0 2px 1px #6e4a2333)}.card:hover{background:#e9d3a3}.card.selected{background:#b9ddd1;border-color:#287d80}.card.group{background:#eddbafaa;border-color:#c2a57b}.card small{color:#287d80;font-size:10px}.empty{grid-column:1/-1;line-height:1.8;font-size:13px;padding:8px}#feedback{position:absolute;top:73%;left:10%;width:80%;height:11%;overflow:auto;padding:10px 14px;border-radius:16px;background:#39200eb8;color:#fff4dc;font-size:14px;line-height:1.6}nav{position:absolute;bottom:3%;left:5%;right:5%;display:flex;justify-content:space-between;gap:5px}nav button{font-size:13px;padding:11px 6px}dialog{background:#f8edcf;border:2px solid #795434;border-radius:22px;color:#4c2d19;width:min(94vw,560px);max-height:90dvh;padding:20px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#14291fcc;backdrop-filter:blur(3px)}.dialoghead{display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;top:-20px;background:#f8edcf;padding:8px 0;z-index:1}.dialoghead h2{font-size:23px;margin:0}.dialoghead button{background:none;border:0;font-size:32px}.row{display:block;text-align:left;border:1px solid #bc965f;border-radius:14px;background:#efe0bb;width:100%;padding:12px 14px;margin:10px 0;line-height:1.7}.row small{display:block;color:#6c7358;font-size:13px}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tabs button,.action{border:1px solid #a58654;background:#e6d3a7;border-radius:10px;padding:8px 12px}.tabs button.active,.action.primary{background:#287d80;color:#fff}.ghost{opacity:.45;filter:grayscale(1)}.entry{display:flex;gap:12px;align-items:center}.entry svg,.entry img{width:48px;height:55px;flex-shrink:0}.mapart{background:url('assets/journey-cartoon-v06.png') center/cover;border-radius:15px;padding:15px}.mapart button{background:#f8edcfeb}.detailicon{width:100%;height:150px;margin:8px auto;display:block}.muted{color:#837052;font-size:13px;line-height:1.7}#discovery{position:absolute;z-index:5;left:28%;top:35%;width:44%;padding:18px;background:#f8edcf;border:3px double #b58b4f;border-radius:24px;text-align:center;box-shadow:0 8px 35px #69482066;pointer-events:none;animation:reveal .5s ease-out}#discovery svg,#discovery img{width:95px;height:95px;display:block;margin:auto}#discovery b{display:block}@keyframes reveal{from{opacity:0;transform:scale(.6) rotate(-6deg)}to{opacity:1;transform:scale(1)}}@media(max-width:400px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pagehead{font-size:11px}nav button{font-size:12px}#clue{font-size:11px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* Viewport owns the stage; scrollable panels retain touch/wheel without visible tracks. */
html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none}
*{scrollbar-width:none!important;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
#game{min-height:0;height:100dvh;overflow:hidden}
.page,.grid{min-height:0}
@media(max-height:700px){#game{width:min(100%,430px)}.card{min-height:78px}.card svg,.card img{height:42px}.pagehead{font-size:11px}.pagehead button{font-size:20px;padding:0 8px}#goal{font-size:13px}#clue{font-size:11px}nav button{padding:8px 5px;font-size:12px}#feedback{font-size:12px;padding:6px 10px}}
@media(max-height:480px){#game{width:min(100%,360px)}.card{min-height:62px}.card svg,.card img{height:32px}#lead{top:9%;height:10%}header button{padding:3px 8px}nav button{font-size:11px;padding:6px 3px}}

img{object-fit:contain}
header button{color:#4c2d19}
#lead{height:10%}
#lead small{display:block;line-height:1.2}
#goal{line-height:1.3}
#clue{line-height:1.35}
@media(max-height:480px){#lead{top:8%;height:12.5%}#lead small{font-size:9px}#goal{font-size:11px}#clue{font-size:9px;line-height:1.2;margin:1px 0}}

#travelDock{position:absolute;top:67%;left:8%;width:84%;height:9%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 12px;background:#f8edcfee;border:1px solid #b58b4f;border-radius:12px;box-shadow:0 3px 10px #39200e35}#travelDock[hidden]{display:none}#travelDock small,#travelDock strong{display:block}#travelDock small{font-size:11px;color:#6c7358}#travelDock strong{font-size:15px}#depart,#travelContinue{background:#287d80;color:#fff4dc;border:2px solid #c39b58;border-radius:12px;padding:10px 14px;font-size:14px}#travelDock.ready{border:2px solid #b78a35;box-shadow:0 0 16px #ecc26775}#travelDock.ready #depart{background:#a04929}#feedback{top:78%;height:8%;padding:5px 12px;font-size:12px}#travelScene{width:min(92vw,560px);text-align:center;overflow:hidden;padding:25px;background:#f8edcf}#travelScene small{color:#287d80}#travelScene h2{margin:8px 0 18px}#travelCaption{font-size:14px;line-height:1.7;min-height:3.4em} .travelLandscape{height:180px;position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(#f8edcf22,#f8edcf66),url('assets/journey-cartoon-v06.png') center/cover}.travelRoad{position:absolute;left:10%;right:10%;bottom:25%;border-bottom:4px dashed #f8edcf;filter:drop-shadow(0 1px 2px #4c2d19)}#traveler{position:absolute;width:72px;height:100px;object-fit:contain;bottom:20%;left:5%;filter:drop-shadow(0 3px 2px #4c2d1966);animation:travelWalk 2.4s ease-in-out forwards}#travelScene.arrived #traveler{animation:none;left:78%}#travelScene.arrived h2{color:#287d80}@keyframes travelWalk{0%{left:5%;transform:translateY(0) rotate(-4deg)}25%{transform:translateY(-8px) rotate(4deg)}50%{transform:translateY(0) rotate(-4deg)}75%{transform:translateY(-8px) rotate(4deg)}100%{left:78%;transform:translateY(0)}}@media(max-height:480px){#travelDock{padding:1px 8px}#travelDock small{font-size:9px}#travelDock strong{font-size:11px}#depart{padding:4px 8px;font-size:11px}#feedback{font-size:10px;line-height:1.2}#travelScene{padding:12px}.travelLandscape{height:100px}#travelScene h2{font-size:20px;margin:4px}#travelCaption{font-size:12px;margin:6px;min-height:0}}@media(prefers-reduced-motion:reduce){#traveler{animation:none;left:78%}}

header{gap:6px}header #count{font-size:13px;white-space:nowrap}header button{padding:9px 10px}#achievements{border-color:#b58b4f;background:#fff0c8;font-size:13px;white-space:nowrap}
.achievementRow{display:flex;gap:14px;align-items:center}.achievementRow>span:last-child{flex:1;min-width:0}.seal{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:3px double #b7a485;color:#958b7b;border-radius:10px;transform:rotate(-6deg);font-size:22px}.seal.earned{color:#a0492c;border-color:#a0492c;background:#ecd4a7}.masterSeal.earned{color:#8d620a;border-color:#b98a22;background:#f4dfa0}progress{display:block;width:100%;height:7px;margin-top:7px;accent-color:#287d80}
.posterGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.posterCard{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid #bc965f;background:#efe0bb;border-radius:14px;text-align:left;min-width:0}.posterCard img,.posterCover{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px}.posterCard small{font-size:11px;color:#71624b}.posterCover{display:grid;place-items:center;background:radial-gradient(ellipse,#f8edcf,#d5bc88);border:4px double #b9a079;color:#7a6444;font-size:24px;writing-mode:vertical-rl;letter-spacing:8px}.posterCard b{font-size:14px}
#achievementToast{position:absolute;left:10%;right:10%;bottom:12%;z-index:6;border:2px solid #b58b4f;border-radius:14px;background:#f8edcf;color:#8d4327;padding:12px;font-size:13px;box-shadow:0 3px 18px #39200e55;animation:reveal .3s ease-out}#achievementToast[hidden]{display:none}
#posterDialog{width:min(96vw,760px);padding:12px 18px;max-height:96dvh;overflow:auto}#posterDialog .dialoghead{position:static;padding:0}#posterTitle{font-size:18px}#posterStamp,#posterCaption{text-align:center;font-size:12px;margin:6px 0;color:#856235}#posterViewport{height:65dvh;overflow:auto;border-radius:12px;background:#e1cba3}#posterImage{display:block;width:100%;height:100%;object-fit:contain}#posterViewport.zoomed #posterImage{height:auto;max-width:none;width:160%;object-fit:contain}.posterControls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}.posterControls button,.posterControls a{display:inline-block;color:#4c2d19;text-decoration:none;border:1px solid #a58654;background:#e6d3a7;border-radius:9px;font:inherit;font-size:12px;padding:8px 10px}#posterDownload{background:#287d80;color:#fff}
@media(max-width:400px){header button{padding:8px 6px;font-size:12px}header #count{font-size:11px}#achievements{font-size:11px}.posterCard b{font-size:12px}}
@media(max-height:480px){header button{padding:3px 6px;font-size:10px}#achievements,header #count{font-size:10px}#posterDialog{padding:8px 12px}#posterViewport{height:50dvh}#posterTitle{font-size:14px}.posterControls{margin-top:4px}#posterCaption{display:none}}

.row.danger{border-color:#a0492c;color:#8d3424;background:#f3d8bf}
#posterViewport.zoomed{cursor:grab;touch-action:none;overscroll-behavior:contain;user-select:none}
#posterViewport.zoomed #posterImage{width:200%;max-width:none;pointer-events:none;flex-shrink:0}
#posterViewport.dragging{cursor:grabbing}