:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#f5e8d5;background:#272b43;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #ffcf8d;outline-offset:5px}#game{height:100dvh;min-height:420px;position:relative;overflow:hidden;background:#655b8e;user-select:none}canvas{width:100%;height:100%;display:block;touch-action:none}.vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(#20243b88,transparent 26%,transparent 75%,#27263f9c),radial-gradient(ellipse,transparent 50%,#20203544)}.hud{position:absolute;top:30px;left:38px;right:38px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:3px;font-weight:600;text-shadow:0 2px 8px #232136}.brand-mark{font-size:38px;color:#ffd59a;font-weight:400}.brand small{display:block;font-size:8px;letter-spacing:3.5px;margin-top:7px;color:#e6cbd4}nav{display:flex;gap:9px;pointer-events:auto}button{border:1px solid #f2d9c42b;background:#302c4678;padding:11px 15px;border-radius:9px;backdrop-filter:blur(12px);font-size:12px}button:hover{background:#51455fbb;border-color:#f2d9c475}button span{font-size:10px;opacity:.6;margin-left:10px}.mission{position:absolute;left:38px;top:113px;display:flex;gap:16px;padding:19px 25px 19px 19px;border:1px solid #f6d6b735;border-radius:12px;background:linear-gradient(120deg,#302b43e6,#3b3047ba);box-shadow:0 12px 30px #24203522;pointer-events:none}.parcel-icon{border:1px solid #e9bd7950;border-radius:8px;width:48px;height:53px;display:grid;place-items:center;color:#ffcf89;font-size:32px;background:#c98d4320}.eyebrow{font-size:9px;letter-spacing:2.6px;color:#e6c298;font-weight:600}h2{font-family:Fraunces,Georgia,serif;font-size:23px;font-weight:400;line-height:1.15;margin:7px 0}p{color:#dbcbd7;font-size:13px;line-height:1.8}.mission p{font-size:11px;margin:6px 0 0;color:#c2b5cb}.wind-card{position:absolute;top:118px;right:38px;width:205px;pointer-events:none}.wind-card>div{display:flex;align-items:center;gap:14px}.wind-card b{font-size:37px;font-weight:400;color:#ffe2b0}.wind-card strong{font-size:13px;font-weight:500}.wind-bars{gap:4px!important}.wind-bars i{height:9px;width:3px;background:#e4b880;border-radius:2px}.wind-bars i:nth-child(2){height:14px}.wind-bars i:nth-child(3){height:19px;opacity:.35}.wind-bars span{font-size:10px;margin-left:8px;color:#e1ccda}.destination{position:absolute;right:35px;top:50%;display:flex;align-items:center;gap:12px;pointer-events:none;background:#30283f9c;border:1px solid #f5d8b32b;padding:12px 17px;border-radius:10px}.destination>span{font-size:25px;color:#ffd29b}.destination strong,.destination small{display:block;font-size:11px;font-weight:500}.destination small{font-size:10px;margin-top:4px;opacity:.65}.footer{position:absolute;bottom:28px;left:38px;right:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}#tripCount{font-size:10px;letter-spacing:1.5px;min-width:175px;color:#e6d2cf}#tripCount i{opacity:.4;padding:0 9px}.heat-control{display:flex;gap:14px;align-items:center;background:#2d2a40c2;border:1px solid #f9dcc536;padding:13px 20px;border-radius:12px;pointer-events:none;box-shadow:0 7px 35px #20192d30}.heat-control strong,.heat-control small{display:block}.heat-control strong{font-size:13px;font-weight:500;letter-spacing:.2px}.heat-control small{font-size:10px;color:#c6b9c9;margin-top:5px}.mouse-icon{display:block;width:20px;height:29px;border:1.5px solid #ebd6c7;border-radius:10px;position:relative}.mouse-icon:before{content:'';position:absolute;top:3px;left:8px;width:2px;height:8px;background:#ffce84}.heat-meter{height:27px;width:5px;border-radius:4px;background:#ffffff20;position:relative;overflow:hidden;margin-left:5px}.heat-meter i{position:absolute;bottom:0;width:100%;background:#ffbf70;height:20%;transition:height .1s}.toast{position:absolute;left:50%;top:25%;transform:translate(-50%,-10px);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;background:#28273fe8;border:1px solid #e8c18c88;border-radius:14px;padding:18px 28px;text-align:center;box-shadow:0 10px 45px #28223950;max-width:90%;font-family:Fraunces,Georgia,serif;font-size:20px}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{color:#f5e8d5;border:1px solid #d6b28d66;background:linear-gradient(140deg,#34334bed,#25273cf5);border-radius:22px;max-width:530px;width:calc(100% - 36px);padding:38px 45px;text-align:center;box-shadow:0 35px 100px #16162c66}dialog::backdrop{background:#1e20366b;backdrop-filter:blur(5px)}dialog h1{font-family:Fraunces,Georgia,serif;font-size:43px;line-height:1.12;font-weight:400;margin:16px 0}.dialog-ornament{font-size:31px;color:#f5c48c;margin-bottom:12px}dialog>p{font-size:13px}dialog .eyebrow{font-size:9px}.instructions{border-top:1px solid #d6b28d30;border-bottom:1px solid #d6b28d30;margin:25px 0;padding:12px 0;text-align:left}.instructions>div{display:flex;gap:17px;margin:14px 0}.instructions b{color:#c49d75;font-size:11px;font-weight:500;padding-top:2px}.instructions span{font-size:11px;color:#c3b8ce;line-height:1.6}.instructions strong{display:block;font-size:12px;font-weight:500;color:#f0dfcf;margin-bottom:2px}.primary{display:block;width:100%;background:#e6bd8b;border:1px solid #f7d3a2;color:#332d3a;font-weight:600;padding:15px;border-radius:9px}.primary:hover{background:#f7d4a1;color:#332d3a}.primary:disabled{opacity:.5;cursor:wait}.prototype-note{display:block;font-size:10px;color:#ad9db4;margin-top:17px}.close{position:absolute;right:12px;top:12px;padding:2px 10px;font-size:25px;background:transparent;border:0}.route-map{display:flex;align-items:center;justify-content:space-around;padding:28px 0}.route-map span{font-size:30px;color:#f2ca92}.route-map strong,.route-map small{display:block;font-family:'DM Sans',sans-serif;font-size:12px;color:#f5e8d5;margin-top:8px}.route-map small{font-size:9px;color:#bfb0cb}.route-map>b{font-size:27px;color:#c1afd6}.secondary{margin-top:12px;width:100%;background:transparent}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#282940;color:#e6c298;z-index:5}.loading.hidden{display:none}body.heating .mouse-icon{background:#e7aa5d66}body.heating .heat-control{border-color:#f4bf78aa}@media(max-width:750px){.hud{left:18px;right:18px;top:18px}.brand{font-size:10px;letter-spacing:1.5px}.brand small{font-size:7px;letter-spacing:1.7px}.brand-mark{font-size:27px}nav{gap:5px}nav button{font-size:10px;padding:9px}nav button span{display:none}.mission{left:18px;top:90px;padding:13px;gap:12px}.mission h2{font-size:19px}.parcel-icon{width:34px;height:43px;font-size:26px}.wind-card{top:210px;right:18px;width:160px}.wind-card .eyebrow{font-size:7px;letter-spacing:1px}.footer{bottom:18px;left:18px;right:18px;justify-content:center}#tripCount{position:absolute;bottom:80px;left:0;min-width:0;font-size:8px}.heat-control{padding:11px 14px}.heat-control small{font-size:8px}#helpButton{position:absolute;bottom:80px;right:0;font-size:10px}.destination{right:18px;padding:9px;top:58%}.destination strong{font-size:10px}dialog{padding:25px}dialog h1{font-size:34px}.instructions{margin:18px 0}.instructions>div{margin:10px 0}}@media(max-height:650px){dialog{padding:20px 30px}dialog h1{font-size:30px;margin:10px 0}.dialog-ornament{display:none}.instructions{margin:12px 0;padding:6px 0}.instructions>div{margin:6px 0}.prototype-note{margin-top:10px}.mission{top:88px}.wind-card{top:95px}.footer{bottom:15px}}

.delivery-status{position:absolute;left:50%;top:23%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:14px 20px;border:1px solid #f6ce9180;border-radius:14px;background:#29273fe8;box-shadow:0 10px 35px #211b3640;pointer-events:none}.delivery-status[hidden]{display:none}.delivery-status strong,.delivery-status small{display:block;white-space:nowrap}.delivery-status strong{font-size:14px;color:#ffdeb0}.delivery-status small{font-size:10px;margin-top:5px;color:#cbbbd0}#deliveryProgress{width:48px;height:48px;position:relative;flex-shrink:0}#deliveryProgress svg{width:48px;height:48px;transform:rotate(-90deg)}#deliveryProgress circle{fill:none;stroke-width:3;stroke:#ffcf8c;stroke-linecap:round}#deliveryProgress .wheel-track{stroke:#ffe1b230}#deliveryWheel{stroke-dasharray:100;stroke-dashoffset:100}#deliveryCountdown{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#ffdeb0}@media(max-width:750px){.delivery-status{top:35%;padding:12px;gap:10px}}
.wind-card .current-layers{display:flex;flex-direction:column;gap:3px;margin-top:14px;padding:8px;border:1px solid #f4d5b326;border-radius:8px;background:#302c4680}.current-layers .current-layer{display:flex;align-items:center;gap:8px;width:100%;padding:4px 6px;border-radius:4px;font-size:9px;color:#c5b7d0;opacity:.65}.current-layer.active{color:#ffdeb0;opacity:1;background:#ffcf8c20}.current-layer .layer-arrow{font-size:15px;width:20px}.current-layer small{margin-left:auto;font-size:8px}@media(max-width:750px){.wind-card .current-layers{margin-top:8px;padding:5px}.current-layers .current-layer{font-size:8px;padding:2px 4px}}
#routeDialog{max-width:960px;width:calc(100% - 36px);max-height:92dvh;overflow:auto;padding:30px 35px}.route-parcel{margin:0;color:#efcb9c;font-size:12px}.neighborhood-map{margin:4px 0;background:radial-gradient(ellipse,#77608e30,transparent 70%);border-bottom:1px solid #d6b28d25}.neighborhood-map svg{display:block;width:100%;height:auto;max-height:290px}.neighbor-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:left}.neighbor-card{border:1px solid #d6b28d24;border-radius:9px;padding:13px 10px;background:#ffffff03}.neighbor-card strong{display:block;font-size:11px;line-height:1.5;color:#f2dfca}.neighbor-card small{display:block;font-size:9px;color:#baaeca;margin-top:6px}.neighbor-card>span{display:block;font-size:8px;color:#a2c3b0;margin-top:9px}.neighbor-card.destination-card{border-color:#f0c68d88;background:#e9bc7a10}.neighbor-card.destination-card>span{color:#f2c68b}.route-help{font-size:11px;max-width:650px;margin:18px auto}.mission{max-width:420px}.mission h2{font-size:21px;line-height:1.25}.mission p{line-height:1.5}.mission #parcelNote{font-size:9px;color:#b4a4bc;display:block;margin-top:8px}@media(max-width:750px){#routeDialog{padding:25px 18px}.neighbor-list{grid-template-columns:repeat(2,1fr)}.neighbor-card:last-child{grid-column:1/-1}.neighborhood-map{overflow-x:auto}.neighborhood-map svg{min-width:570px}.mission{max-width:calc(100% - 36px)}.mission h2{font-size:18px}}
.save-status{display:block;font-size:10px;color:#b8cbb9;margin:0 0 18px}.sky-moments{position:absolute;bottom:70px;left:0;font-size:9px;letter-spacing:1.4px;color:#efd097;pointer-events:none}@media(max-width:750px){.sky-moments{bottom:105px;font-size:8px}}
/* Keep long presses and double taps in the game, including mobile Safari. */
html,body,#game,#game *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#game{touch-action:none;overscroll-behavior:none}
#game canvas{-webkit-user-drag:none;touch-action:none}
#game dialog{touch-action:pan-y pinch-zoom}
#game button{touch-action:manipulation}
.footer{pointer-events:none}.footer button{pointer-events:auto}
#journalDialog{max-width:950px;max-height:91dvh;width:calc(100% - 32px);overflow:auto;padding:30px}.journal-heading{font-size:23px;text-align:left;margin:25px 0 14px}.journal-residents{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;text-align:left}.journal-resident{padding:15px 12px;border:1px solid #d4bca02c;background:#ffffff04;border-radius:11px}.journal-resident.improved{border-color:#d8be7e88;background:#d8be7e0b}.journal-resident h3{font-family:Georgia,serif;font-size:22px;font-weight:400;margin:0 0 5px}.journal-resident small{display:block;color:#b9aac6;font-size:9px;line-height:1.7}.journal-resident p{font-size:10px;margin:8px 0}.relationship-label{display:block;color:#e8b8c5;font-size:10px;font-weight:400;margin-top:14px}.improvement-note{font-size:11px;color:#f1d4a4;margin:12px 0 5px;line-height:1.5}.journal-resident progress{display:block;width:100%;height:5px;accent-color:#dfbc87;border:0;border-radius:3px;overflow:hidden;background:#ffffff14}.journal-resident progress::-webkit-progress-bar{background:#ffffff14}.journal-resident progress::-webkit-progress-value{background:#dfbc87}.journal-note{color:#b8abc5;font-size:11px;text-align:left;line-height:1.8}.journal-history{list-style:none;padding:0;text-align:left;max-height:310px;overflow:auto;margin:10px 0 24px}.journal-history li{padding:13px 14px;border-bottom:1px solid #d4bca023}.journal-history strong,.journal-history small{display:block}.journal-history strong{font-size:12px;font-weight:500;color:#efdfcb}.journal-history small{font-size:10px;color:#b5a8c3;margin-top:5px;line-height:1.5}.journal-history .journal-milestone{background:#d8be7e0c;border-radius:7px}.journal-milestone strong{color:#e9c78d}#journalTotals{font-size:12px;color:#d4b48e}.hud nav{flex-wrap:wrap;justify-content:flex-end}@media(max-width:750px){.hud .brand{max-width:110px;font-size:8px;letter-spacing:1px}.hud .brand small{letter-spacing:1px;font-size:6px}.hud nav{max-width:225px}.hud nav button{padding:8px 7px;font-size:9px}#journalDialog{padding:25px 18px}.journal-residents{grid-template-columns:repeat(2,1fr)}.journal-resident:last-child{grid-column:1/-1}.journal-resident h3{font-size:20px}.journal-history{max-height:260px}}
/* One quiet flight strip replaces the scattered status panels. */
.flight-strip{position:absolute;top:95px;left:28px;width:min(550px,calc(100% - 56px));display:grid;grid-template-columns:minmax(0,1fr) 105px;grid-template-rows:auto auto;align-items:center;gap:0 10px;padding:12px 15px;border:1px solid #ead0b52b;border-radius:12px;background:linear-gradient(110deg,#302b43d4,#38304aba);box-shadow:0 8px 28px #24203518;pointer-events:none}
.flight-strip .mission{position:static;grid-column:1;grid-row:1/3;max-width:none;padding:0;gap:10px;border:0;background:none;box-shadow:none;min-width:0}
.flight-strip .mission>div:last-child{min-width:0}
.flight-strip .mission .eyebrow,.flight-strip .mission #parcelNote{display:none}
.flight-strip .mission h2{font-size:19px;margin:0 0 5px;line-height:1.2}
.flight-strip .mission p{font-size:10px;line-height:1.4;margin:0;opacity:.8}
.flight-strip .parcel-icon{width:30px;height:37px;font-size:23px;flex-shrink:0;border:0;background:none}
.flight-strip .wind-card{position:static;grid-column:2;grid-row:1;width:auto;text-align:right;align-self:end}
.flight-strip .wind-card>.eyebrow,.flight-strip .wind-bars{display:none}
.flight-strip .wind-card>div:first-of-type{justify-content:flex-end;gap:6px}
.flight-strip .wind-card b{font-size:23px;line-height:1}
.flight-strip .wind-card strong{font-size:10px;font-weight:400;white-space:nowrap}
.flight-strip .destination{position:static;grid-column:2;grid-row:2;border:0;background:none;padding:4px 0 0;gap:5px;justify-content:flex-end;align-self:start}
.flight-strip .destination>span{font-size:14px;line-height:1}
.flight-strip .destination strong{display:none}
.flight-strip .destination small{font-size:9px;line-height:1.3;margin:0;opacity:.75;text-align:right}
.flight-strip .wind-card .current-layers{position:absolute;right:0;top:calc(100% + 7px);width:185px;margin:0;background:#302c46de;backdrop-filter:blur(12px);pointer-events:none}
.wind-card .current-layers[hidden]{display:none!important}
#skyMoments,#tripCount{font-size:8px;opacity:.7}
.heat-control{padding:10px 14px;gap:10px}.heat-control strong{font-size:11px}.heat-control small{font-size:9px}
@media(max-width:750px){.flight-strip{top:76px;left:14px;width:calc(100% - 28px);grid-template-columns:minmax(0,1fr) 91px;gap:0 6px;padding:10px 11px;border-radius:10px}.flight-strip .mission{gap:5px}.flight-strip .mission h2{font-size:16px}.flight-strip .mission p{font-size:9px}.flight-strip .parcel-icon{width:23px;font-size:20px}.flight-strip .wind-card strong{font-size:9px}.flight-strip .wind-card b{font-size:21px}.flight-strip .destination small{font-size:8px}.flight-strip .wind-card .current-layers{width:166px}.heat-control small{display:none}.heat-control{padding:9px 13px;border-radius:9px}.mouse-icon{width:16px;height:23px}.mouse-icon:before{left:6px;height:6px}#skyMoments,#tripCount{display:none}.toast{font-size:16px;padding:12px 16px;top:25%;width:max-content;max-width:calc(100% - 40px)}.footer #helpButton{bottom:55px;font-size:9px;padding:7px 9px}.heat-meter{height:21px}}

/* Brief messages stay at the edge of the scene, clear of the balloon. */
.toast{top:auto;bottom:100px;max-width:420px;width:max-content;font-size:15px;padding:12px 18px;transform:translate(-50%,6px)}.toast.visible{transform:translate(-50%,0)}
.delivery-status{top:172px;left:28px;transform:none;padding:9px 13px;gap:10px}.delivery-status strong{font-size:12px}.delivery-status small{font-size:9px}#deliveryProgress,#deliveryProgress svg{width:38px;height:38px}
@media(max-width:750px){.toast{bottom:80px;font-size:13px;max-width:calc(100% - 40px);padding:10px 13px}.delivery-status{top:165px;left:14px;padding:8px 10px}.delivery-status small{display:none}}
#pauseDialog{max-height:90dvh;overflow:auto}@media(max-width:750px){.footer #helpButton{display:none}}

.resident-letter{margin:16px 0;padding:17px 20px;border-left:2px solid #e0bd87;background:#e0bd8709;border-radius:0 10px 10px 0;color:#ead9c7;font-family:Georgia,serif;font-size:16px;line-height:1.75;text-align:left}.resident-personality{color:#c9bacf;line-height:1.7}.journal-history details{margin-top:10px;color:#d0bfd5;font-size:12px;line-height:1.7}.journal-history summary{cursor:pointer;color:#e4c391;padding:7px 0}.journal-history details p{margin:8px 0}.journal-history:has(details[open]){max-height:none}@media(max-width:750px){.resident-letter{font-size:15px;padding:14px 16px}}
.store-entrance{position:absolute;z-index:4;transform:translate(-50%,-100%);border:1px solid #e8c78a99;background:#302b46df;color:#ffe1a8;min-width:54px;min-height:48px;border-radius:24px;font-size:23px;padding:5px 12px;box-shadow:0 0 20px #e6b47733}.store-entrance small{display:block;font-size:10px;white-space:nowrap}.dock-actions{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);z-index:5;white-space:nowrap}.dock-actions button{background:#322d48ec;border:1px solid #e3bf8b88;color:#ffe4bb;border-radius:16px;padding:13px 20px;min-height:46px;box-shadow:0 5px 24px #211e3b44}#shopDialog{width:min(1100px,calc(100% - 28px));max-width:1100px;max-height:94dvh;padding:0;overflow:auto;text-align:left;background:linear-gradient(145deg,#39304a,#24273c);border:1px solid #d4bca04d;border-radius:20px}#shopDialog .close{position:sticky;float:right;top:10px;right:12px;z-index:5;margin:10px 12px -44px 0;background:#29263cdd;min-width:44px;min-height:44px}.shop-art{position:relative;width:100%;height:360px;overflow:hidden;background:radial-gradient(ellipse at 38% 55%,#b7834a22,transparent 70%)}.shop-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 48%;pointer-events:none}#shopDialog[open] .shop-exterior{animation:open-store 1.4s ease .15s both}@keyframes open-store{from{opacity:1}to{opacity:0}}.shop-content{padding:0 32px 28px}.shop-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.shop-heading h1{font-size:31px;margin:10px 0 16px}.shop-heading>strong{font-size:15px;color:#e7c58f;white-space:nowrap;border:1px solid #dab67e44;padding:9px 13px;border-radius:20px}.shop-conversation{display:flex;align-items:center;gap:18px;min-height:118px;padding:12px 16px;border-radius:12px;background:#ead7aa08;border:1px solid #d4bca024}.otto-portrait{flex:0 0 58px;height:120px;background:url('art/twilight-harbor/residents.png') left center / auto 128px no-repeat}.shop-conversation strong{font-family:Georgia,serif;font-size:19px;color:#f0d6ae}.shop-conversation strong small{font-family:inherit;font-size:11px;color:#e4b5c4;margin-left:10px}.shop-conversation p{margin:8px 0;color:#d5c6d7;font-size:13px;line-height:1.7;min-height:44px}.shop-content #shopChat{display:inline-block;width:auto;padding:12px 18px;margin:12px 0}.shop-help{font-size:11px;color:#bfaec8;line-height:1.8}.shop-good{display:grid;grid-template-columns:1fr 100px 100px;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #dec6a41c}.shop-good strong{font-size:13px;color:#ebdac4;font-weight:400}.shop-good small{display:block;font-size:10px;color:#b4a6bf;margin-top:5px}.shop-good button{min-height:44px;padding:9px 10px;border:1px solid #d8b47c55;border-radius:9px;background:#ffffff05;color:#e9c99b;font-size:12px}.shop-good button:disabled{opacity:.32;cursor:default}.shop-good button:not(:disabled):hover{background:#e6b5751c}#leaveShop{display:block;margin:22px auto 0}@media(max-width:750px){.shop-art{height:250px}.shop-art img{width:135%;max-width:none;left:-17.5%}.shop-content{padding:0 18px 22px}.shop-heading{flex-wrap:wrap;gap:0;margin-bottom:12px}.shop-heading h1{font-size:26px}.shop-heading>strong{font-size:12px}.shop-conversation{gap:10px;padding:10px}.shop-conversation p{font-size:12px}.shop-conversation strong small{display:block;margin:5px 0}.shop-good{grid-template-columns:1fr 72px 72px;gap:6px}.shop-good button{font-size:11px}.dock-actions{bottom:110px}.shop-content .journal-heading{font-size:21px}.shop-conversation .otto-portrait{flex-basis:50px}}@media(prefers-reduced-motion:reduce){#shopDialog[open] .shop-exterior{animation:none;opacity:0}}
/* Trading stays in the flight scene. The building reveal is drawn on the world canvas. */
#shopDialog[open]{position:absolute;inset:150px 18px auto auto;margin:0;width:340px;max-width:calc(100% - 36px);max-height:calc(100dvh - 250px);padding:0;border-radius:15px;background:#2d2945ed;box-shadow:0 10px 35px #17182745;overflow:auto;z-index:8}#shopDialog.panel-left[open]{left:18px;right:auto}#shopDialog .shop-content{padding:16px}#shopDialog .shop-heading{display:block}#shopDialog .shop-heading h1{font-size:21px;margin:8px 0 12px}#shopDialog .shop-heading>strong{display:inline-block;font-size:12px;padding:6px 10px}#shopDialog .shop-conversation{min-height:0;padding:8px;gap:9px;margin-top:12px}#shopDialog .otto-portrait{flex-basis:36px;height:76px;background-size:auto 82px}#shopDialog .shop-conversation strong{font-size:16px}#shopDialog .shop-conversation strong small{display:block;margin:5px 0;font-size:10px}#shopDialog .shop-conversation p{font-size:11px;line-height:1.6;min-height:0}#shopDialog .journal-heading{font-size:18px;margin:16px 0 8px}#shopDialog .shop-good{grid-template-columns:1fr 66px 66px;gap:5px;padding:8px 0}#shopDialog .shop-good strong{font-size:11px}#shopDialog .shop-good button{padding:7px 4px;font-size:10px}#shopDialog .shop-help{font-size:10px}#shopDialog #shopChat{margin:8px 0;padding:9px 12px;font-size:11px}#shopDialog #leaveShop{margin-top:12px}#shopDialog .close{top:4px;right:4px;margin:4px 4px -44px 0}#shopDialog::backdrop{background:transparent;backdrop-filter:none}@media(max-width:750px){#shopDialog[open],#shopDialog.panel-left[open]{inset:auto 10px 16px 10px;width:auto;max-width:none;max-height:32dvh;border-radius:14px}#shopDialog .shop-heading{display:flex}#shopDialog .shop-heading h1{font-size:18px}#shopDialog .shop-conversation{margin-top:6px}#shopDialog .shop-content{padding:12px 14px}.dock-actions{bottom:100px}}
.legal-brand{position:absolute;left:14px;bottom:5px;right:14px;display:flex;justify-content:center;gap:12px;align-items:center;font-size:8px;color:#f1dfd2c0;z-index:6}.legal-brand a{color:inherit;text-decoration:none}.legal-brand a:hover{text-decoration:underline}.official-site-message{max-width:620px;margin:15vh auto;padding:32px;text-align:center;line-height:1.8}.official-site-message a{color:#f5c989}#shareDialog{max-height:90dvh;overflow:auto}#shareMessage{width:100%;padding:12px;resize:vertical;border:1px solid #d9ba8244;background:#1e2034;color:#f2dfc9;border-radius:8px;font:13px/1.7 sans-serif;user-select:text!important;-webkit-user-select:text!important;-webkit-touch-callout:default!important;touch-action:auto}#shareDialog .share-notice{font-size:10px;color:#b9abc4;line-height:1.7}#journalShare{margin:12px auto;display:block}@media(max-width:750px){.legal-brand{font-size:6px;gap:7px;bottom:4px}}
.legal-brand{font-size:9px}@media(max-width:750px){.legal-brand{font-size:8px;gap:6px}}
/* Physical goods replace the price-list rows. The people and counter remain in the island scene. */
#shopDialog .shop-conversation{display:block;min-height:0}#shopDialog .shop-conversation p{font-family:Georgia,serif;font-size:12px}#shopPortrait[hidden]{display:none}#shopDialog .shop-heading h1{font-size:19px}#shopDialog .journal-heading{font-size:16px;margin-top:14px}.countertop-tray,.satchel-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:11px 8px;border-radius:12px;border:1px solid #c5976544}.countertop-tray{background:repeating-linear-gradient(0deg,#8a5e3b12 0px,#8a5e3b12 23px,#d0a06b18 24px),linear-gradient(140deg,#77523966,#41302a66);box-shadow:inset 0 2px 0 #e1b77b33,inset 0 -5px 0 #281f2744}.satchel-tray{background:#80694e20;border:1px dashed #c7a37455}.counter-item{position:relative;min-width:0;padding:5px 2px 7px;border:1px solid transparent;border-radius:9px;background:#231f3222;color:#efdbc3;transition:background .15s,border-color .15s}.counter-item:hover,.counter-item.selected{background:#ffe2a51a;border-color:#e2bd7bb0}.counter-item.selected:after{content:'✦';position:absolute;right:4px;top:3px;font-size:12px;color:#ffe3aa}.goods-picture{display:block;width:62px;height:65px;max-width:100%;margin:0 auto 3px;background-image:url('art/twilight-harbor/trade-goods.png');background-size:500% 300%;background-repeat:no-repeat;image-rendering:auto;pointer-events:none}.counter-item strong{display:block;font-size:10px;line-height:1.35;font-weight:400}.counter-item small{display:block;font-size:9px;color:#d0b995;margin-top:4px;line-height:1.4}.counter-selection{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:12px;padding:10px 0;border-block:1px solid #d4bc9b24;font-size:12px;color:#f0d6ab}.counter-selection button{border:1px solid #e5bf7f88;border-radius:10px;background:#caa56924;padding:11px 15px;min-height:44px;white-space:nowrap;font-size:12px}.counter-selection button:disabled{opacity:.35;cursor:default}#shopDialog .shop-help{font-size:9px}#shopDialog #leaveShop{font-size:12px;min-height:44px;margin-top:12px}#shopDialog #shopChat{font-size:10px;margin:7px 0 0}#shopDialog .shop-content{padding-top:13px}@media(max-width:750px){#shopDialog[open],#shopDialog.panel-left[open]{max-height:35dvh}#shopDialog .shop-content{padding:11px 14px}.goods-picture{width:58px;height:59px}.countertop-tray,.satchel-tray{padding:8px;gap:6px}.counter-selection{position:sticky;bottom:0;z-index:2;background:#2d2945;padding:9px 0}.counter-item strong{font-size:11px}}
@media(max-width:750px){#shopDialog .shop-heading h1{display:none}#shopDialog .shop-conversation p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px}#shopDialog .shop-content>.eyebrow{margin:0 0 7px}#shopDialog .shop-conversation strong small{font-size:9px}}

.time-of-day{position:absolute;top:48px;right:0;font-size:10px;color:#ecd0ae;white-space:nowrap}@media(max-width:750px){.time-of-day{top:39px;font-size:9px}}

/* A quiet brass delivery compass sits apart from the wind indicator on the balloon. */
.flight-strip{width:min(420px,calc(100% - 160px));grid-template-columns:minmax(0,1fr)}
.flight-strip .wind-card{position:absolute;right:0;top:100%;width:0;height:0}
.flight-strip .wind-card>div:first-of-type{display:none}
#destination.delivery-compass{position:absolute;inset:94px 28px auto auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:1px;width:104px;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;backdrop-filter:none;pointer-events:auto;text-align:center;z-index:3;touch-action:manipulation}
.delivery-compass:hover .compass-face{filter:drop-shadow(0 2px 8px #f6c68150)}
.compass-face{display:block;width:88px;height:88px;filter:drop-shadow(0 3px 7px #17182c66)}
#destination .compass-readout{display:block;max-width:104px;text-shadow:0 1px 4px #202036}
#destination .compass-readout strong{display:block;font-size:11px;font-weight:500;color:#ffe1a9;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#destinationArrow{display:block;font-size:10px;color:#f1dbc3;line-height:1.4}
#destinationDistance{display:block;font-size:9px;color:#d0c1d5;opacity:.85;margin:0;line-height:1.4}
.delivery-compass.dock-near .compass-face{filter:drop-shadow(0 0 7px #b2ddb877)}
.delivery-compass.dock-near #destinationArrow{color:#c1e1bf}
@media(max-width:750px){.flight-strip{width:min(420px,calc(100% - 118px));grid-template-columns:minmax(0,1fr)}#destination.delivery-compass{inset:76px 12px auto auto;width:82px;gap:0}.compass-face{width:68px;height:68px}#destination .compass-readout{max-width:82px}#destination .compass-readout strong{font-size:10px}#destinationArrow{font-size:9px}#destinationDistance{font-size:8px}.flight-strip .wind-card .current-layers{right:0;top:10px}}
@media(max-height:500px){#destination.delivery-compass{top:73px}.compass-face{width:58px;height:58px}.flight-strip{top:76px}}
.delivery-compass span{opacity:1;margin-left:0}
/* Atelier fitting room: a compact visual catalog with a separate, free preview. */
#cosmeticStudio[hidden],#ordinaryTrade[hidden]{display:none}
#balloonPreview{display:block;width:100%;height:240px;object-fit:contain;background:#292b4055;border-radius:14px;margin:8px auto}
.cosmetic-categories{display:flex;gap:6px;overflow-x:auto;padding:6px 0 12px}
.cosmetic-categories button{flex:0 0 auto;font-size:11px;padding:9px}
.cosmetic-categories button[aria-pressed=true],.cosmetic-choice[aria-pressed=true]{border-color:#f3cf91;background:#816b5966}
.cosmetic-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:250px;overflow-y:auto;padding:3px}
.cosmetic-choice{display:grid;grid-template-columns:30px 1fr;text-align:left;gap:2px 8px;padding:9px;min-height:62px}
.cosmetic-choice strong{font-size:12px}.cosmetic-choice small{grid-column:2;font-size:10px;color:#d9c7af}
.cosmetic-swatch{grid-row:span 2;width:28px;height:32px;border-radius:8px;border:1px solid #f1d5a86b;text-align:center;line-height:30px;color:#fff0c9;font-size:21px}
@media(max-width:600px){#balloonPreview{height:180px}.cosmetic-choices{max-height:210px}.cosmetic-categories button{font-size:10px}}

#shopDialog.atelier-dialog[open]{width:410px}#shopDialog.atelier-dialog .shop-conversation p{font-size:11px}
@media(max-width:750px){#shopDialog.atelier-dialog[open]{width:auto;max-height:57dvh}#shopDialog.atelier-dialog #balloonPreview{height:130px}.cosmetic-choices{max-height:155px}}

#shopDialog.atelier-dialog[open]{width:460px;max-height:calc(100dvh - 180px)}
#shopDialog.atelier-dialog .shop-heading h1{display:none}
#shopDialog.atelier-dialog .shop-heading{position:absolute;right:65px;top:8px}
#shopDialog.atelier-dialog .shop-heading>strong{font-size:11px;padding:5px 8px}
#shopDialog.atelier-dialog .shop-conversation{margin-top:14px;padding:7px 9px}
#shopDialog.atelier-dialog .shop-conversation p{margin:5px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px}
#shopDialog.atelier-dialog #shopChat{margin:4px 0;padding:5px 8px;min-height:32px}
#shopDialog.atelier-dialog .shop-content>.shop-help{display:none}
#shopDialog.atelier-dialog #cosmeticStudio:not([hidden]){display:grid;grid-template-columns:125px minmax(0,1fr);gap:6px}
#shopDialog.atelier-dialog #balloonPreview{grid-column:1;grid-row:2;width:125px;height:180px;margin:0}
#shopDialog.atelier-dialog #cosmeticStudio>.shop-help{grid-column:1/-1;font-size:9px;order:4;margin:0}
#shopDialog.atelier-dialog .cosmetic-categories{grid-column:1/-1;grid-row:1;padding:2px 0 5px}
#shopDialog.atelier-dialog .cosmetic-choices{grid-column:2;grid-row:2;max-height:180px;gap:4px}
#shopDialog.atelier-dialog .cosmetic-choice{grid-template-columns:20px 1fr;padding:6px;gap:2px 5px;min-height:52px}
#shopDialog.atelier-dialog .cosmetic-swatch{width:19px;height:27px;border-radius:5px;font-size:15px;line-height:25px}
#shopDialog.atelier-dialog .cosmetic-choice strong{font-size:10px}
#shopDialog.atelier-dialog .counter-selection{grid-column:1/-1;grid-row:3;margin:0;padding:6px 0}
#shopDialog.atelier-dialog #resetPreview{grid-column:1/-1;order:5;padding:5px;min-height:32px;font-size:10px}
#shopDialog.atelier-dialog #leaveShop{margin-top:6px}
@media(max-width:750px){#shopDialog.atelier-dialog[open]{width:auto;max-height:65dvh}#shopDialog.atelier-dialog #cosmeticStudio:not([hidden]){grid-template-columns:95px minmax(0,1fr)}#shopDialog.atelier-dialog #balloonPreview{width:95px;height:150px}#shopDialog.atelier-dialog .cosmetic-choices{max-height:150px}#shopDialog.atelier-dialog .shop-conversation strong{font-size:12px}#shopDialog.atelier-dialog .shop-conversation strong small{display:inline;margin-left:7px}#shopDialog.atelier-dialog .cosmetic-categories button{padding:7px;min-height:32px}}

#shopDialog.atelier-dialog .cosmetic-swatch{margin:0;opacity:1}#shopDialog.atelier-dialog .cosmetic-choice strong{grid-column:2;overflow-wrap:anywhere}

/* Harbor stationery: illustrated paper, ink, and aged brass. */
#game dialog,#game #shopDialog[open]{color:#51444c;background:radial-gradient(ellipse at 25% 0,#fff8e9cc,transparent 60%),repeating-linear-gradient(94deg,#a67e4710 0 1px,transparent 1px 5px),linear-gradient(140deg,#f8ecd3,#ead4b2);border:1px solid #b59063;border-radius:20px;box-shadow:0 25px 100px #111c3459,inset 0 0 0 5px #f9efdb,inset 0 0 0 6px #bd98674d;scrollbar-color:#b79366 #e9d6b7;color-scheme:light}
#game dialog::backdrop{background:#1d294d77;backdrop-filter:blur(7px) saturate(.8)}
#game dialog h1,#game dialog h2,#game dialog h3{color:#4f4350;font-family:Georgia,'Times New Roman',serif;letter-spacing:-.025em;font-weight:400}
#game dialog p,#game dialog small{color:#76635e}
#game dialog .eyebrow{color:#987246;letter-spacing:2.4px}
#game dialog button{color:#5c4a47;border:1px solid #b28a5a66;background:#fffbf233;box-shadow:inset 0 1px #fff7e8;backdrop-filter:none;border-radius:10px;transition:background .16s,box-shadow .16s}
#game dialog button:hover{background:#fff7e9a8;border-color:#a97f47}
#game dialog button:focus-visible{outline:2px solid #367b83;outline-offset:3px}
#game dialog button.primary{background:linear-gradient(#638d89,#3f706f);color:#fff3d9;border-color:#355f62;box-shadow:inset 0 1px #b9d1b375,0 3px 0 #2f5156,0 5px 12px #46626029;font-family:Georgia,serif;font-size:17px;letter-spacing:.3px}
#game dialog button.primary:hover{background:linear-gradient(#719c95,#4e807b)}
#game dialog .close{background:#f3e4ca;border-color:#bd98674d;color:#7e6652;box-shadow:0 2px 6px #66513e1a}
#game dialog .dialog-ornament{color:#ad814e;text-shadow:0 2px #fff8eb}
#game dialog .save-status{color:#577c6b;font-size:10px}
#game dialog .instructions{border-color:#b28b6044;background:#fff9ec44;border-radius:12px;padding:12px}
#game dialog .instructions b{color:#8d6a43;border-color:#b8946966;background:#f5e5c9}
#game dialog .instructions strong{color:#625154}
#game dialog .resident-letter{background:#fff7e85e;color:#71605c;border-color:#c7a678;border-left:3px solid #b88d54;box-shadow:0 3px 8px #9770440c;font-family:Georgia,serif}
#game dialog .route-parcel,#game dialog .relationship-label{color:#4f7b76}
#game dialog .neighborhood-map{background:radial-gradient(ellipse at top,#5d6985,#303c59);border:1px solid #a17b50;border-radius:14px;box-shadow:inset 0 0 25px #16233f55;margin:18px 0}
#game dialog .neighbor-card,#game dialog .journal-resident{background:#fff9ea66;border-color:#c5a47c66;box-shadow:0 2px 4px #9170460a}
#game dialog .neighbor-card strong,#game dialog .journal-history strong{color:#55454b}
#game dialog .neighbor-card>span,#game dialog .journal-resident strong{color:#4e7e72}
#game dialog .neighbor-card.destination-card{border-color:#7f9b86;background:#d8e3cb66}
#game dialog .journal-resident.improved{background:#e7e5c477;border-color:#a9ae7899}
#game dialog .journal-heading,#game dialog .improvement-note{color:#8f6b43}
#game dialog .journal-history li{border-color:#c4a58144}
#game dialog progress{accent-color:#668a77}
#game dialog .shop-conversation{background:#fff6e54d;border-color:#bd996340;box-shadow:inset 0 1px #fffaf2}
#game dialog .shop-conversation strong{color:#65514c}
#game dialog .shop-heading>strong{background:#f1dfb8;color:#7d603c;border-color:#be9a6466}
#game dialog .countertop-tray{background:repeating-linear-gradient(0deg,#d0ab7a22 0 23px,#ad85592e 24px),#debd8f55;border-color:#b18d5d55}
#game dialog .satchel-tray{background:#eadcc75e;border-color:#b18d5d66}
#game dialog .counter-item,#game dialog .cosmetic-choice{color:#604d4e;background:#fff8e947;border-color:#c4a17a40}
#game dialog .counter-item strong,#game dialog .cosmetic-choice strong{color:#604d4e}
#game dialog .counter-item small,#game dialog .cosmetic-choice small{color:#89705b}
#game dialog .counter-item.selected,#game dialog .cosmetic-choice[aria-pressed=true],#game dialog .cosmetic-categories button[aria-pressed=true]{background:#dce7d0;border-color:#77998b;box-shadow:inset 0 0 0 1px #c2d4b7}
#game dialog .counter-selection{background:#efdebf;border-color:#bd9b704d;color:#6d5548;border-radius:8px;padding-inline:7px}
#game dialog .counter-selection button{background:#58817a;color:#fff2d6;border-color:#42685f}
#game dialog .shop-help,#game dialog .journal-note{color:#88715f}
#game dialog textarea{background:#fff9e9;color:#584953;border-color:#ba976c;border-radius:10px}
#game #pauseDialog{width:min(490px,calc(100% - 32px));padding:24px 32px 22px;max-height:94dvh;overflow:auto}
#game #pauseDialog h1{font-size:35px;line-height:1.15;margin:10px 0}
#game #pauseDialog>p:not(.eyebrow){font-size:12px;margin:8px 0}
.menu-vignette{position:relative;width:190px;height:90px;margin:0 auto 16px;overflow:hidden;border-radius:95px 95px 28px 28px;border:1px solid #b8966566;background:linear-gradient(#545c8755,#eec99244),url('art/twilight-harbor/twilight-sky.png') center 42% / cover;box-shadow:0 3px 12px #a27f4322,inset 0 0 0 3px #fff4da44}
.menu-vignette .menu-island{position:absolute;width:174px;left:-35px;bottom:-18px}
.menu-vignette .menu-balloon{position:absolute;height:85px;right:21px;top:0;filter:drop-shadow(0 3px 4px #3a314944)}
#game #pauseDialog .eyebrow{font-size:9px;margin:0}
#game #pauseDialog #resumeButton{margin:8px 0 14px;min-height:46px;width:100%}
.pause-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#game #pauseDialog .pause-actions button{margin:0;padding:10px 7px;font-size:11px;min-height:42px}
.pause-settings{border:1px solid #bd98674d;border-radius:12px;margin:20px 0 10px;padding:11px 12px 5px;text-align:left}
.pause-settings legend{font-family:Georgia,serif;color:#96754d;font-size:12px;padding:0 9px;text-align:center;font-style:italic}
#game #pauseDialog .pause-settings button{display:block;position:relative;width:100%;border:0;border-bottom:1px solid #b8946a26;background:transparent;border-radius:0;box-shadow:none;font-size:11px;text-align:left;padding:9px 45px 9px 2px;margin:0;min-height:36px}
#game #pauseDialog .pause-settings button:last-child{border-bottom:0}
#game #pauseDialog .pause-settings button::after{content:'';position:absolute;right:3px;top:11px;width:27px;height:14px;border-radius:8px;background:radial-gradient(circle at 7px 7px,#fff5df 0 4px,transparent 5px),#baa98d;box-shadow:inset 0 1px 2px #6c584a33}
#game #pauseDialog .pause-settings button[aria-pressed=true]::after{background:radial-gradient(circle at 20px 7px,#fff5df 0 4px,transparent 5px),#648c7a}
#game #pauseDialog .quiet-link{border:0;background:none;box-shadow:none;font-size:10px;text-decoration:underline;text-underline-offset:4px;color:#94765f;margin:7px 0 15px;padding:8px}
.menu-signoff{display:block;font-size:8px;letter-spacing:1.7px;color:#ad8c5d}
@media(max-width:600px){#game #pauseDialog{padding:20px 24px}#game #pauseDialog h1{font-size:29px}.menu-vignette{height:76px;width:165px;margin-bottom:13px}.menu-vignette .menu-balloon{height:74px}.pause-settings{margin-top:15px}#game dialog h1{font-size:30px}#game dialog .journal-heading{font-size:20px}}
@media(prefers-reduced-motion:reduce){#game dialog button{transition:none}}

.trade-buttons{display:flex;gap:6px;flex-shrink:0}.trade-buttons button{padding:9px 10px;font-size:11px}#giftAction[hidden],#atelierSatchelButton[hidden]{display:none}
#game dialog #giftAction{background:#b2777d;color:#fff2e1;border-color:#986469}
#game dialog .collection-goods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 20px;max-height:290px;overflow-y:auto}
.collection-item{padding:9px 5px;text-align:center;border:1px solid #bd9b7066;background:#fff7e74d;border-radius:10px}.collection-item strong{display:block;font-size:10px;font-weight:400;color:#66514d}.collection-item small{display:block;font-size:9px;margin-top:5px}.collection-item .goods-picture{width:60px;height:60px;margin:0 auto 6px}
#game #atelierSatchelButton{font-size:10px;padding:7px 10px;min-height:34px;margin:4px 0 8px}
@media(max-width:600px){#game dialog .collection-goods{grid-template-columns:repeat(3,minmax(0,1fr))}.trade-buttons{flex-direction:column;gap:4px}.trade-buttons button{min-height:40px}.counter-selection{align-items:center}#game #pauseDialog .pause-settings button{min-height:42px}}

.journal-tabs{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:16px 0 20px}
#game dialog .journal-tabs button{padding:9px 12px;font-size:11px;min-height:42px}
#game dialog .journal-tabs button[aria-selected=true]{background:#5a8077;color:#fff2d9;border-color:#456b64;box-shadow:inset 0 1px #c2d6b34d}
#game dialog [role=tabpanel][hidden]{display:none}
.field-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 24px}
.field-card{padding:12px 9px;border:1px solid #bc9c714d;background:#fff7e84d;border-radius:12px;text-align:center}
.field-card img,.field-card .field-sketch,.unknown-sketch{width:100%;height:95px;object-fit:contain;display:block;margin:0 auto 8px;touch-action:auto}
.field-card strong{display:block;color:#62524d;font-family:Georgia,serif;font-size:14px;font-weight:400;line-height:1.3}
.field-card small{display:block;font-size:10px;line-height:1.6;margin-top:7px}
.field-card.undiscovered{border-style:dashed;background:#e8d7bc44}.unknown-sketch{font-size:48px;line-height:95px;color:#b29574}
@media(max-width:600px){.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.field-card{padding:9px 7px}.field-card strong{font-size:13px}.field-card small{font-size:9px}.field-card img,.field-card .field-sketch,.unknown-sketch{height:80px}.journal-tabs{gap:4px}#game dialog .journal-tabs button{padding:8px 9px;font-size:10px}}

/* Stable contrast through every lighting phase, using quiet ink-colored plates. */
.hud .brand{background:#24293eeb;border:1px solid #dfc08a38;border-radius:12px;padding:7px 10px;color:#fff0d2;text-shadow:none}
.hud .brand small{color:#ead5ba}
.hud nav button{background:#24293ef2;color:#fff0d2;border-color:#d3b78666;text-shadow:none}
.hud nav button:hover{background:#41445b}
.time-of-day{background:#24293ef2;color:#fff0d2;border:1px solid #d3b78644;border-radius:6px;padding:3px 6px;top:44px}
#destination .compass-readout{background:#24293ef2;border:1px solid #d3b78666;border-radius:8px;padding:5px 7px;margin-top:3px;text-shadow:none;color:#fff0d2}
#destination .compass-readout strong,#destinationArrow,#destinationDistance{color:#fff0d2;opacity:1}
#skyMoments,#tripCount{background:#24293ef2;color:#fff0d2;border:1px solid #d3b78644;border-radius:6px;padding:5px 7px;text-shadow:none}
.legal-brand{background:#24293ef2;color:#fff0d2;padding:3px 8px;border-radius:5px;width:max-content;max-width:calc(100% - 16px);left:50%;right:auto;transform:translateX(-50%);bottom:3px;font-size:9px}
#game dialog small,#game dialog p,#game dialog .journal-note,#game dialog .shop-help,#game dialog .cosmetic-choice small,#game dialog .counter-item small{color:#6b554b}
#game dialog .eyebrow{color:#795a35}
#game dialog button:disabled{opacity:1;color:#72614f;background:#e6d8bc;border-color:#bca27c;cursor:default;box-shadow:none}
#game dialog .cosmetic-choice[aria-pressed=true] strong,#game dialog .counter-item.selected strong{color:#334d43}
#game dialog .field-card small{color:#6b554b}
@media(max-width:750px){.hud .brand{padding:5px 7px;gap:7px}.time-of-day{top:37px;font-size:9px}.legal-brand{font-size:8px;gap:5px;padding:3px 5px}#destination .compass-readout{padding:4px 5px}#destinationDistance{font-size:9px}}

#game dialog .save-status{color:#3f6356}#game dialog .relationship-label,#game dialog .journal-resident strong{color:#365d57}#game dialog .shop-heading>strong,#game dialog .improvement-note,#game dialog .journal-heading{color:#705337}

#game dialog button.primary{background:linear-gradient(#446f6c,#305653)}#game dialog button.primary:hover{background:linear-gradient(#48736e,#345d57)}#game dialog .counter-selection button{background:#3d6861;color:#fff2d6}#game dialog #giftAction{background:#88515f;color:#fff2e1}#game dialog .journal-tabs button[aria-selected=true]{background:#3f675f;color:#fff2d9}#game dialog button:disabled{color:#62513f;background:#e6d8bc}


.story-counter,.story-chapter{background:#f5e7ce;border:1px solid #bda17b;border-radius:12px;padding:14px;margin:12px 0;color:#493c35}.story-counter h2,.story-chapter h3{font-family:Georgia,serif;margin:0 0 8px}.story-counter p,.story-chapter p{font-size:14px;line-height:1.55}.story-counter button{width:100%}.journal-tabs{flex-wrap:wrap}

.story-picker{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.story-picker button{flex:1;min-width:120px;background:#f5e7ce;color:#493c35;border:1px solid #bda17b;padding:12px;border-radius:10px}.story-picker button[aria-pressed="true"]{background:#3f675f;color:#fff2dc}

#storyAction[hidden],#storyCounter[hidden]{display:none}#shopDialog.story-dialog #shopSpeech{display:block;-webkit-line-clamp:unset;overflow:visible}@media(max-width:750px){#shopDialog.story-dialog[open],#shopDialog.story-dialog.panel-left[open]{max-height:55dvh}#shopDialog.story-dialog #shopSpeech{font-size:13px;line-height:1.6}}

#returnDelivery[hidden],#routeReturnDelivery[hidden]{display:none}.story-guide-stop{display:flex;align-items:center;gap:12px;text-align:left;border-bottom:1px solid #bda17b;padding:8px 0}.story-guide-stop p{flex:1}#game dialog .story-guide-button,#game dialog .story-picker button[aria-pressed="true"]{background:#3f675f;color:#fff2dc}.story-guide-button{min-height:44px;flex-shrink:0}@media(max-width:480px){.story-guide-stop{align-items:stretch;flex-direction:column;gap:4px}.story-guide-stop p{margin:6px 0}}

@media(pointer:coarse){button{backdrop-filter:none}}
.trade-details{min-width:0;flex:1}.trade-quantity{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px}.trade-quantity select{min-width:72px;min-height:44px;border:1px solid #a78c68;border-radius:8px;background:#fff4df;color:#453b32;font:16px Georgia,serif;padding:7px 10px}#tradeSelection{display:block;line-height:1.5}
.resident-hopes{margin:16px 0;border:1px solid #bda17b;border-radius:12px;background:#f5e7ce;padding:14px;color:#493c35}.resident-hopes summary{cursor:pointer;font:18px Georgia,serif;min-height:30px}.resident-hope{padding:12px 0;border-top:1px solid #cbb796}.resident-hope h3{margin:4px 0}.resident-hope small{color:#486157}.resident-hope p{line-height:1.5}.resident-hope .story-guide-stop{justify-content:space-between}.resident-hope:last-child{padding-bottom:0}
#game #pauseDialog .pause-settings #frameRateButton::after{content:'↔';background:none;box-shadow:none;color:#536e65;text-align:center;font-size:19px;line-height:14px}

.home-dialog{position:fixed;inset:auto 20px 90px auto;width:min(420px,calc(100vw - 32px));max-height:55dvh;overflow:auto;margin:0;padding:22px;background:#302c43f5;text-align:left}.home-dialog h1{font-size:28px}.home-dialog .satchel-tray{grid-template-columns:repeat(3,minmax(0,1fr))}.home-dialog .counter-item{min-width:0}.home-dialog .goods-picture{max-width:100%}@media(max-width:600px){.home-dialog{inset:auto 16px 80px;max-height:40dvh;padding:16px}.home-dialog h1{font-size:23px}}

.compass-readout .home-compass-key{color:#b2e5ff;background:#20334de8;border-radius:4px;padding:2px 4px;margin-top:3px}

.crafting-book{margin:16px 0;padding:12px;border:1px solid #8f795c66;border-radius:12px;background:#e8d6b74d}.crafting-book summary{cursor:pointer;font-weight:bold;padding:8px 0}.craft-recipe{padding:14px 0;border-top:1px solid #8f795c55}.craft-recipe h3{margin:6px 0}.craft-recipe small{display:block;line-height:1.6}.craft-recipe .goods-picture{width:75px;height:75px}.craft-recipe>button{margin-top:10px;width:100%;min-height:44px}

.harbor-board{margin:16px 0}.harbor-board summary{font-size:20px;cursor:pointer;padding:12px 0}.request-card{padding:14px;margin:12px 0;border:1px solid #b3956c66;border-radius:12px;background:#dec59b22}.request-card h3{margin:0 0 8px}.request-card small{display:block;margin-bottom:10px}.request-card button{min-height:44px;margin:4px 6px 0 0}.request-card p{line-height:1.5}

/* Menus share a reserved scene area across desktop, portrait and landscape. */
#game dialog[open],#game #shopDialog[open],#game #shopDialog.panel-left[open],#game #shopDialog.story-dialog[open],#game #homeDialog[open]{box-sizing:border-box;position:fixed;inset:82px 16px 16px auto;margin:0;width:min(440px,42vw);max-width:none;max-height:calc(100dvh - 98px);height:fit-content;overflow:auto;overscroll-behavior:contain;padding:20px;text-align:left}
#game dialog::backdrop{background:#1c233619;backdrop-filter:none}
#game.panel-open .flight-strip,#game.panel-open .destination,#game.panel-open .footer,#game.panel-open .dock-actions{visibility:hidden}
#game dialog .close{position:sticky;top:0;float:right;z-index:5;width:44px;height:44px;background:#eeddbf;color:#59464a}
#game dialog h1{font-size:28px}#game dialog .field-grid,#game dialog .journal-residents{grid-template-columns:repeat(2,minmax(0,1fr))}
#game dialog .journal-tabs{display:flex;flex-wrap:wrap}#game dialog .neighbor-list{grid-template-columns:1fr}
@media(max-width:600px){
 #game dialog[open],#game #shopDialog[open],#game #shopDialog.panel-left[open],#game #shopDialog.story-dialog[open],#game #homeDialog[open]{inset:auto 12px max(18px,env(safe-area-inset-bottom)) 12px;width:calc(100vw - 24px);max-height:48dvh;padding:16px}
 #game dialog h1{font-size:24px}#game dialog p{font-size:14px}#game dialog .journal-tabs button{min-height:44px}
 #game.panel-open .hud nav{visibility:hidden}#game.panel-open .time-of-day{visibility:hidden}
}
@media(max-height:500px) and (min-width:601px){#game dialog[open],#game #shopDialog[open],#game #shopDialog.panel-left[open],#game #shopDialog.story-dialog[open],#game #homeDialog[open]{top:12px;max-height:calc(100dvh - 24px)}#game.panel-open .hud nav{visibility:hidden}}

#game dialog .panel-closebar{position:sticky;top:-20px;z-index:6;display:flex;justify-content:flex-end;background:#efdfc2;padding:4px 0;margin-bottom:8px}#game dialog .panel-closebar .close{position:static;float:none;flex-shrink:0}@media(max-width:600px){#game dialog .panel-closebar{top:-16px}}
/* Fishing uses the same reserved scene area as the counter. */
#fishingDialog{border-color:#d1ad77;background:linear-gradient(145deg,#3b3854,#282d45)}
#fishingDialog h1{font-size:clamp(1.4rem,3vw,2rem);margin:8px 0}
#fishingStatus{min-height:3em;color:#fff0d8;font-size:1rem;line-height:1.5}
#fishingAction{min-height:58px;touch-action:none;user-select:none;-webkit-user-select:none}
#fishingAction.fish-bite{background:#f7d78f;box-shadow:0 0 0 3px #fcdfac66;color:#302b3c}
#fishingDialog summary{min-height:44px;cursor:pointer;color:#59412e}
#fishClues p{color:#493b36;line-height:1.5}
#fishingDialog .shop-help{color:#ddcfdf}
@media(max-width:600px){#game #fishingDialog[open]{max-height:48dvh}#fishingDialog .eyebrow{margin-top:0}#fishingDialog .shop-help{font-size:12px;margin:8px 0}}
/* Author display rules must not expose unavailable actions at other shops. */
#game [hidden]{display:none!important}
/* Approved fishing concept: scene above live brass timing controls. */
#game #fishingDialog[open]{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) calc(var(--tackle-height,28dvh) + env(safe-area-inset-bottom));background:#161b32;color:#fff0ca;z-index:30}
#fishingDialog::backdrop{background:#14172b!important;backdrop-filter:none!important}
#fishingDialog .fishing-scene{position:relative;min-height:0;overflow:hidden;background:#252941}
#fishingCanvas{width:100%;height:100%;display:block}
#game #fishingDialog #closeFishing{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));min-height:44px;padding:8px 14px;border:2px solid #d2a75c;background:#221e2bea;color:#ffe5b4;box-shadow:inset 0 0 0 2px #5e4434,0 3px 10px #0008;font-size:18px;z-index:2}
#closeFishing span{font-size:12px;opacity:1;margin-left:6px}
#fishLoading{position:absolute;inset:0;display:grid;place-items:center;color:#ffe6bc;background:#25283fe8;font:18px Georgia}
#fishingDialog .fishing-tackle{position:relative;min-height:0;padding:12px max(8%,24px) 8px;display:grid;grid-template-rows:auto 26px minmax(48px,1fr) auto auto;gap:6px;align-items:center;justify-items:center;border-top:5px ridge #bb914c;background:repeating-linear-gradient(0deg,#24121200 0 20px,#1c0f0f55 21px 22px,#d5974511 23px 25px),repeating-linear-gradient(174deg,#a0692911 0 1px,transparent 2px 9px),linear-gradient(100deg,#41261f,#573421 45%,#2b1e23);box-shadow:inset 0 2px #f7d28c,inset 0 6px #482b26,inset 0 -3px #bd8e4c}
#game #fishingDialog #fishingStatus{grid-row:2;margin:0;min-height:0;font:clamp(16px,2vw,23px)/1.15 Georgia,serif;color:#fff1c7;text-shadow:0 2px 2px #000;letter-spacing:.2px;text-align:center}
#fishingMeter{grid-row:1;position:relative;width:100%;height:42px;padding:5px;border:3px ridge #e3b668;border-radius:12px;background:linear-gradient(#97703a,#f4d494 45%,#805725);box-shadow:0 3px 0 #1f1416,inset 0 0 0 2px #50331e,0 0 0 1px #f8dba3}
#fishingMeter:before,#fishingMeter:after{content:'◆';position:absolute;z-index:3;top:6px;color:#f2cb84;font-size:16px;text-shadow:0 1px #543220;left:-10px}#fishingMeter:after{left:auto;right:-10px}
.fishing-track{position:relative;height:100%;border-radius:5px;background:linear-gradient(#0a1523,#132237 60%,#091320);box-shadow:inset 0 3px 6px #000b;isolation:isolate}
#fishingFill{position:absolute;inset:0;transform-origin:left;background:linear-gradient(#ffec8a,#e8a628 40%,#ffc846 75%,#b96b15);box-shadow:0 0 14px #f9c35c99;border-radius:3px}
#fishingGreen{position:absolute;top:0;bottom:0;left:72%;width:12%;border:2px solid #b8ffab;background:repeating-linear-gradient(120deg,#fff2 0 2px,transparent 2px 7px),linear-gradient(#65f279,#22ba52);box-shadow:0 0 12px #6df18d88;z-index:1}
#fishingNeedle{position:absolute;top:-7px;bottom:-7px;width:3px;background:#ffed9d;box-shadow:0 0 9px #ffcc57;color:#ffe7a1;font-size:14px;line-height:9px;transform:translateX(-50%);z-index:2;text-shadow:0 0 6px #ffbc38}
#game #fishingDialog #fishingAction{grid-row:3;width:min(400px,65%);height:100%;max-height:74px;min-height:48px;margin:0;padding:7px 20px;border:5px ridge #e9b45c;border-radius:15px;background:radial-gradient(ellipse at 50% 0,#ffd67366,transparent 75%),repeating-linear-gradient(95deg,#a6601912 0 1px,transparent 2px 5px),linear-gradient(#f4bd59,#c88126 60%,#e9a53c);box-shadow:inset 0 0 0 2px #603617,inset 0 0 0 4px #f8cd7a,0 0 0 2px #44261c,0 5px 0 #251719,0 7px 14px #0008;color:#402414;font:700 clamp(22px,3vw,36px)/1 Georgia,serif;text-shadow:0 1px #ffe0a6;letter-spacing:1px;touch-action:manipulation;transition:filter .12s}
#game #fishingDialog #fishingAction:hover{filter:brightness(1.12)}#game #fishingDialog #fishingAction:active{filter:brightness(.92)}#game #fishingDialog #fishingAction:disabled{opacity:.65;cursor:default}
#game #fishingDialog button:focus-visible{outline:3px solid #fff0bb;outline-offset:4px}
#game #fishingDialog #fishingCollection{grid-row:4;margin:0;color:#ead6bc;font-size:11px;line-height:1.2;text-align:center}
#game #fishingDialog .fishing-legal{grid-row:5;margin:0;font:8px/1.2 sans-serif;color:#d8c9c5;text-align:center}#fishingDialog .fishing-legal a{color:inherit}
.tackle-corner{position:absolute;top:9px;color:#dfb46d;font:40px Georgia;line-height:1;text-shadow:0 2px #25140e}.tackle-corner.left{left:16px}.tackle-corner.right{right:16px}
#game.fishing-open>.hud,#game.fishing-open>.legal-brand,#game.fishing-open>#toast{visibility:hidden}
@media(max-width:600px) and (orientation:portrait){#fishingDialog .fishing-tackle{padding:12px 25px max(8px,env(safe-area-inset-bottom));grid-template-rows:auto 42px minmax(58px,1fr) auto auto;gap:7px;border:3px ridge #c39b55;background:radial-gradient(ellipse at 20% 80%,#41345a80,transparent 65%),linear-gradient(#151a34,#1c2347);box-shadow:inset 0 0 0 3px #11172d,inset 0 0 0 4px #d5ac6b}#game #fishingDialog #fishingStatus{grid-row:1;font-size:19px}#fishingMeter{grid-row:2;height:38px}#game #fishingDialog #fishingAction{width:88%;font-size:30px}#game #fishingDialog #fishingCollection{font-size:10px}.tackle-corner{font-size:25px;top:9px}.tackle-corner.left{left:7px}.tackle-corner.right{right:7px}#closeFishing span{display:none}#game #fishingDialog #closeFishing{right:10px;top:max(10px,env(safe-area-inset-top));padding:8px 12px}}
@media(max-height:500px){#fishingDialog .fishing-tackle{padding:8px 7% 5px;grid-template-columns:1fr 180px;grid-template-rows:21px 32px 17px 10px;gap:5px 22px}#game #fishingDialog #fishingStatus{grid-row:1;grid-column:1;font-size:16px}#fishingMeter{grid-row:2;grid-column:1;height:30px}#game #fishingDialog #fishingAction{grid-row:1/3;grid-column:2;width:100%;font-size:22px;min-height:48px}#game #fishingDialog #fishingCollection{grid-row:3;grid-column:1/3;font-size:10px}#game #fishingDialog .fishing-legal{grid-row:4;grid-column:1/3;font-size:7px}}
@media(max-height:500px){#game #fishingDialog #fishingAction{font-size:19px;letter-spacing:.3px;white-space:nowrap;padding:7px 10px}}

/* Compact harbor menus: brass trim, quiet paper, persistent navigation. */
#game dialog:not(#fishingDialog){border:1px solid #b49a67;border-radius:16px;background:linear-gradient(135deg,#fff3d9,#e9d7b7);box-shadow:inset 0 0 0 4px #f6e9cc,inset 0 0 0 5px #bba17388,0 14px 45px #111b3280;color:#433d34;background-image:linear-gradient(135deg,#fff3d9,#e9d7b7)}
#game dialog:not(#fishingDialog)::before,#game dialog:not(#fishingDialog)::after{display:none}
#game dialog:not(#fishingDialog) h1{font-size:22px;margin:6px 0 10px}#game dialog:not(#fishingDialog) p{line-height:1.45;margin:8px 0}
#game dialog:not(#fishingDialog) .eyebrow{font-size:10px;letter-spacing:1.5px;margin:0 46px 6px 0;color:#655331}
#game dialog:not(#fishingDialog) button{min-height:40px;border-radius:9px;backdrop-filter:none}
#game dialog .panel-closebar{float:right;position:relative;top:0;padding:0;margin:0 0 4px 8px;background:transparent;min-height:0}
#game dialog .panel-closebar .close{width:38px;height:38px;min-height:38px;border:1px solid #baa17a;background:#ead8b8}
#game dialog .journal-tabs,#game .shop-tabs{gap:4px;padding:5px;background:#344d4c;border:1px solid #9f8c63;border-radius:11px;margin:10px 0}
#game dialog .journal-tabs button,#game .shop-tabs button{flex:1;padding:7px 5px;color:#f5e8ca;background:transparent;border:0;font-size:12px;white-space:nowrap}
#game dialog .journal-tabs button[aria-selected=true],#game .shop-tabs button[aria-pressed=true]{background:#f6e6c5;color:#344c49;box-shadow:0 1px 5px #0003}
#game.panel-open .hud{z-index:20}#game.panel-open .hud nav{visibility:visible}#game.panel-open .hud nav button{pointer-events:auto}
#game #shopDialog[open],#game #shopDialog.panel-left[open],#game #shopDialog.story-dialog[open]{padding:14px;width:min(420px,42vw)}
#game #shopDialog .shop-content{padding:0;background:none;border:0}
#game #shopDialog .shop-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}
#game #shopDialog .shop-heading h1{font-size:20px;margin:2px 0}#game #shopBalance{font-size:12px;padding:5px 8px;white-space:nowrap}
#game #shopDialog .countertop-tray,#game #shopDialog .satchel-tray{padding:6px;gap:5px;max-height:240px;overflow:auto;background:#c0a17420;border:1px solid #a78e6355;box-shadow:none}
#game #shopDialog .counter-item{padding:4px 3px;background:#fff5db66;border:1px solid #c8ad7d66;color:#423b31;min-height:105px}
#game #shopDialog .counter-item.selected{border-color:#52796d;background:#dce6cd}
#game #shopDialog .goods-picture{height:58px;width:58px;margin:0 auto 3px}
#game #shopDialog .counter-item strong{font-size:11px;line-height:1.2}#game #shopDialog .counter-item small{font-size:10px;line-height:1.2;margin:3px 0 0;color:#69593e}
#game #shopDialog .counter-selection{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:8px;background:#e7d6b5;border:1px solid #b79a6b;border-radius:9px;position:sticky;bottom:0}
#game #shopDialog .trade-details{flex:1;min-width:130px;font-size:11px;line-height:1.35}#game #shopDialog .trade-quantity{margin:4px 0 0;font-size:11px}#game #shopDialog .trade-buttons{margin-left:auto}
#game #shopDialog .counter-selection button{padding:7px 10px;min-height:40px;font-size:11px}
#game #shopDialog .counter-tip{display:none}#game #shopDialog #leaveShop{min-height:40px;padding:8px;margin-top:8px;font-size:12px}
#game #shopDialog .shop-conversation{padding:8px;background:#fff6e366;border:1px solid #b69a6c66;border-radius:9px;margin:0 0 6px}
#game #shopDialog .shop-conversation p{font-size:13px;line-height:1.4;margin:5px 0;display:block;overflow:visible}
#game #shopDialog #shopChat{margin:6px 0;width:100%}#game #shopDialog .story-counter{padding:8px;margin:6px 0}
#game #shopDialog .story-counter h2{font-size:17px}#game #shopDialog .request-card{padding:8px;margin:6px 0}
#game #shopDialog #startFishing[hidden],#game dialog [hidden]{display:none!important}
#game dialog .craft-recipe{display:grid;grid-template-columns:58px minmax(0,1fr);gap:5px 9px;padding:10px 0}
#game dialog .craft-recipe>.goods-picture{width:58px;height:58px;grid-row:1/3}#game dialog .craft-recipe h3{font-size:16px;margin:3px 0}#game dialog .craft-recipe>p{font-size:11px;margin:0}#game dialog .craft-recipe>p:not(.shop-help){display:none}
#game dialog .craft-recipe>.ingredient-sources,#game dialog .craft-recipe>label,#game dialog .craft-recipe>button{grid-column:1/-1}
.ingredient-source{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:3px 8px;padding:7px 0;border-top:1px solid #b7a17a66;font-size:12px}.ingredient-source .goods-picture{width:34px;height:34px;margin:0;grid-row:span 2}.ingredient-source button{grid-column:2;font-size:11px;text-align:left;padding:6px 8px;min-height:40px}
#game dialog .crafting-book{padding:8px;margin:8px 0}#game dialog .journal-heading{font-size:18px;margin:12px 0 8px}#game dialog .resident-letter{padding:10px;margin:8px 0;font-size:13px}
@media(max-width:600px){
 #game.panel-open .hud{top:8px;left:10px;right:10px}#game.panel-open .hud .brand{display:none}#game.panel-open .hud nav{margin-left:auto;gap:4px}#game.panel-open .hud nav button{min-height:38px;padding:7px 9px;font-size:11px}
 #game #shopDialog[open],#game #shopDialog.panel-left[open],#game #shopDialog.story-dialog[open]{inset:auto 8px max(16px,env(safe-area-inset-bottom)) 8px;width:calc(100vw - 16px);max-height:48dvh;padding:10px}
 #game #shopDialog .shop-heading h1{display:none}#game #shopDialog .shop-heading{position:absolute;right:58px;top:10px}#game #shopDialog .eyebrow{margin:5px 115px 8px 0;min-height:25px;line-height:1.3}
 #game .shop-tabs{margin:6px 0;padding:3px}#game #shopDialog .goods-picture{width:48px;height:48px}#game #shopDialog .counter-item{min-height:88px}#game #shopDialog .countertop-tray,#game #shopDialog .satchel-tray{max-height:135px}
 #game #shopDialog .shop-help{font-size:10px;margin:4px 0}#game #shopDialog #leaveShop{margin-top:6px}
 #game dialog .journal-tabs{flex-wrap:nowrap;overflow-x:auto}#game dialog .journal-tabs button{font-size:10px;min-height:40px}
}
@media(max-height:500px) and (min-width:601px){#game dialog[open],#game #shopDialog[open],#game #shopDialog.panel-left[open],#game #shopDialog.story-dialog[open]{top:58px;max-height:calc(100dvh - 70px)}#game #shopDialog .countertop-tray,#game #shopDialog .satchel-tray{max-height:110px}#game #shopDialog .goods-picture{height:38px;width:38px}#game #shopDialog .counter-item{min-height:76px}}
#game #shopDialog .panel-closebar{position:absolute;top:10px;right:10px;margin:0;float:none}#game #shopDialog .shop-content>.eyebrow{padding-right:40px}
@media(max-width:600px){#game.panel-open .hud nav{width:auto;max-width:none;flex-wrap:nowrap}#game #shopDialog .panel-closebar{top:9px;right:9px}#game #shopDialog .shop-content>.eyebrow{padding-right:0;margin-right:115px}}
.route-details{border-top:1px solid #b29a7155;margin:5px 0}.route-details summary{cursor:pointer;padding:8px 0;font-size:12px}#game #routeDialog .route-parcel,#game #routeDialog #routeGuidance{font-size:12px}#game #routeDialog .neighborhood-map{margin:8px 0}#game #routeDialog #guideHome{margin:4px 0;padding:7px}#game #routeDialog #closeRouteBottom{margin-top:8px;padding:8px}
@media(max-width:600px){#game #shopDialog .shop-content>.eyebrow{min-height:39px}#game #routeDialog h1{font-size:19px}#game #routeDialog .eyebrow{display:none}}

#game #shopDialog #shopBalance { margin-right: 58px; }
@media(max-width:700px){#game #shopDialog #shopBalance{margin-right:0}}
@media(min-width:701px) and (max-height:500px){
 #game #shopDialog{top:90px;max-height:calc(100dvh - 100px);padding:8px}
 #game #shopDialog .shop-heading h1{display:none}
 #game #shopDialog .shop-heading{position:absolute;right:52px;top:10px}
 #game #shopDialog #shopBalance{margin:0}
 #game #shopDialog .shop-content>.eyebrow{min-height:34px;margin:0}
 #game #shopDialog .shop-tabs{margin:0 0 5px}
 #game #shopDialog .shop-tabs button{min-height:30px;padding:5px}
 #game #shopDialog .goods-grid{margin:0;max-height:90px}
 #game #shopDialog .good-card{min-height:76px;padding:4px}
 #game #shopDialog .trade-selection{padding:6px;margin:5px 0}
 #game #shopDialog #leaveShop{padding:6px;min-height:32px;margin:3px 0 0}
}
.recipe-shortcut{position:fixed;left:16px;top:112px;z-index:22;max-width:240px;padding:9px 12px;background:#fff0cd;color:#403943;border:1px solid #c4a46d;border-radius:12px;font-size:12px;box-shadow:0 3px 12px #25213344}
.recipe-shortcut[hidden]{display:none!important}
#game .recipe-pin{grid-column:1/-1;justify-self:start;padding:6px 12px;min-height:32px;background:#365d59;color:#fff4da}
#game .shopping-cart{border:1px solid #b7a079;border-radius:10px;padding:8px;margin:7px 0;background:#ede0bf}
#game .shopping-cart summary{font-size:13px;cursor:pointer}
#cartItems{max-height:100px;overflow:auto}#cartItems>div{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
#game #cartItems button,#game #clearCart,#game #checkoutCart{min-height:32px;padding:6px 10px;font-size:12px;margin:3px 0}
#game #cartStatus:empty{display:none}#game #cartStatus{font-size:12px;margin:5px 0}
@media(max-width:700px){.recipe-shortcut{top:55px;left:10px;max-width:210px;font-size:11px;padding:7px 10px}#game #shopDialog:has(#shoppingCart:not([hidden])){max-height:55dvh}#cartItems{max-height:65px}}
#game #checkoutCart,#game #clearCart{display:inline-block;width:auto;margin:4px 6px 0 0}
#game #cartItems button{width:auto;flex:none}
@media(max-width:700px){#game #shopDialog:has(#shoppingCart:not([hidden])){max-height:58dvh}#game .shopping-cart{padding:6px}#game #cartStatus{margin:3px 0;font-size:11px}}
.hud nav .recipe-shortcut{position:static;max-width:none;box-shadow:none;background:#f4dfb0;color:#403943;border-color:#c4a46d}
.reward-notice{position:absolute;left:20px;bottom:100px;z-index:25;width:270px;max-width:calc(100% - 40px);padding:10px 13px;border:1px solid #d6b573;border-radius:12px;background:#292c43f5;color:#fff3d9;box-shadow:0 4px 18px #17192955;pointer-events:none;font-size:12px;line-height:1.4}
.reward-notice[hidden]{display:none!important}.reward-notice>strong{display:block;color:#f3cf89;font-size:13px;margin-bottom:3px}#rewardAmounts{font-weight:600}#rewardFriendship{font-size:11px;color:#e2d9ce;margin-top:3px}#rewardProgress{display:block;width:100%;height:5px;margin:4px 0 0;accent-color:#91c2b0;border:0;border-radius:5px;overflow:hidden}#rewardProgress::-webkit-progress-bar{background:#515268}#rewardProgress::-webkit-progress-value{background:#91c2b0}#rewardUnlocks{margin-top:5px;color:#f5d38b;font-size:11px}.reward-notice [hidden]{display:none!important}#game.reward-visible #toast{visibility:hidden}
@media(max-width:600px){.reward-notice{top:58px;bottom:auto;left:10px;width:250px;max-width:calc(100% - 20px);padding:8px 11px;font-size:11px}#game.reward-visible .mission{visibility:hidden}}
@media(min-width:601px) and (max-height:500px){.reward-notice{left:12px;top:100px;bottom:auto;width:230px}}
.hud .brand-home{display:block;width:fit-content;margin-top:5px;font-size:10px;line-height:1.4;letter-spacing:.4px;color:#f1d29a;text-decoration:none;pointer-events:auto;touch-action:manipulation}.hud .brand-home:hover{text-decoration:underline}.hud .brand-home:focus-visible{outline:2px solid #ffcf8d;outline-offset:3px;border-radius:2px}@media(max-width:750px){.hud .brand-home{font-size:8px;letter-spacing:0;margin-top:3px}}
#game .delivery-offer{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:10px;margin:7px 0;background:#faf0d9;border:1px solid #cab58d;border-radius:10px;text-align:left;color:#494249}
#game .delivery-offer strong{font-family:Georgia,serif;font-size:15px;font-weight:400;align-self:end}#game .delivery-offer small{grid-column:1;font-size:11px;line-height:1.4;color:#66594c}#game .delivery-offer button{grid-column:2;grid-row:1/3;align-self:center;padding:8px;min-height:40px;font-size:11px;background:#365d59;color:#fff3d9}#game .delivery-freedom{font-size:11px;color:#66594c;margin:5px 0}#game #deliveryOfferStatus{font-size:12px;line-height:1.5;margin:6px 0}
@media(max-width:700px){#game #shopDialog .shop-tabs button{padding:7px 5px;font-size:11px}#game .delivery-offer{padding:8px;margin:5px 0}#game .delivery-offer strong{font-size:14px}#game #deliveryOfferStatus{font-size:11px}}
@media(min-width:701px) and (max-height:500px){
 #game #shopDialog[open],#game #shopDialog.story-dialog[open],#game #shopDialog.panel-left[open]{top:90px;max-height:calc(100dvh - 100px)}
 #game #deliveryOffers{max-height:116px;overflow:auto;padding-right:3px}
 #game .delivery-offer{padding:6px;margin:4px 0}#game .delivery-offer strong{font-size:13px}#game #deliveryOfferStatus{font-size:11px;margin:4px 0}
}
#game .delivery-offer .delivery-tags{grid-column:1/-1;color:#34605a;font-size:10px;line-height:1.4;padding-top:2px}
@media(max-width:700px){#game .delivery-offer .delivery-tags{font-size:10px}#game #shopDialog:has(#deliveryOffersPane:not([hidden])){max-height:55dvh}}
/* Messages and dock actions share a stack so wrapped text cannot collide with buttons. */
.flight-messages{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);width:calc(100% - 40px);max-width:420px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:5;pointer-events:none}
.flight-messages .toast{position:static;inset:auto;width:100%;max-width:100%;margin:0;transform:translateY(6px)}
.flight-messages .toast.visible{transform:translateY(0)}
.flight-messages .dock-actions{position:static;inset:auto;transform:none;display:flex;gap:8px;justify-content:center;max-width:100%;pointer-events:auto}
.flight-messages .dock-actions:not(:has(button:not([hidden]))){display:none}
#game.fishing-open .flight-messages{visibility:hidden}
@media(max-width:750px){.flight-messages{bottom:100px}}
@media(max-height:500px){#game{min-height:0}.flight-messages{bottom:100px;max-width:380px}.flight-messages .toast{font-size:12px;padding:9px 12px}}
@media(orientation:landscape) and (max-height:500px){
 .flight-messages{left:12px;right:12px;bottom:90px;transform:none;width:auto;max-width:none;flex-direction:row;justify-content:space-between;align-items:center;gap:16px}
 .flight-messages .toast{width:auto;max-width:42%}
 .flight-messages .dock-actions{max-width:40%;margin-left:auto}
}

.recipe-order{padding:8px 10px;margin:8px 0;border:1px solid #b59861;border-radius:10px;background:#f1dfb8;color:#463b36}.recipe-order p{margin:0 0 6px;font-size:13px}.recipe-order button,.request-card button{min-height:40px}.request-card small{display:block;margin:5px 0}