:root{color-scheme:dark;font-family:system-ui,-apple-system,"Microsoft JhengHei",sans-serif;color:#f4f7ec;background:#101c32}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 35%,#283c58,#101a2c 75%);min-height:100vh}
a{color:inherit}
header{display:flex;justify-content:space-between;gap:14px;padding:20px 5%;border-bottom:1px solid #ffffff24}
header a{text-decoration:none;min-height:44px;display:flex;align-items:center}
main{max-width:1080px;margin:auto;padding:22px 24px}
.eyebrow{color:#cedd9c;letter-spacing:.14em;font-size:12px;margin:0}
h1{font-size:clamp(25px,4vw,40px);margin:10px 0}
.intro{color:#d3deea;margin:8px 0}
.event-panel{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;margin:14px 0;background:#0c1e2d;border:1px solid #6e8b8b;border-radius:12px}
.event-label{font-size:12px;color:#ffe3a7;letter-spacing:.08em}
.event-panel p{margin:7px 0 0;line-height:1.5}
.event-controls{display:flex;gap:6px;flex-shrink:0}
.event-controls button{width:44px;height:44px;background:#243e50;color:#e5edc9;border:1px solid #8da29a;border-radius:50%;font-size:21px;cursor:pointer;flex-shrink:0}
.event-controls button[aria-pressed=true]{background:#dce8ac;color:#142837}
.event-controls button:focus-visible,#harbor-primary:focus-visible{outline:3px solid #fff2b2;outline-offset:4px}
#harbor-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:10px;padding:12px 22px;text-decoration:none;background:#e1ecae;color:#172a31;font-weight:750}
#visit-count{margin:12px 0 2px;color:#e2ecb9;font-size:14px}
.visit-note{font-size:12px;color:#bfccd0;margin:0 0 4px}
#return-notice{margin:8px 0;color:#effbad;background:#283e4e;border-radius:10px;padding:10px}
#game{height:300px;width:100%;touch-action:pan-y;border-radius:24px;overflow:hidden}
canvas{display:block}
#loading{font-size:13px;color:#d7e6c0;margin:4px 0 12px}
.destinations{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.destinations a{display:flex;flex-direction:column;gap:7px;text-decoration:none;background:#233b52;border:1px solid #a4b8be80;border-radius:16px;padding:18px;min-height:84px}
.destinations span{font-weight:700;font-size:18px}
.destinations small{color:#e3eadc;line-height:1.5}
.destinations a:hover,.destinations a:focus-visible{background:#36536a;outline:3px solid #e6f7a2;outline-offset:3px}
.footnote,footer{font-size:12px;color:#b8c8d4;line-height:1.7}
footer{text-align:center;padding:18px}
.play-share{margin:18px auto;padding:16px;border:1px solid #839d9f;border-radius:14px;background:#183146;color:#f1f5e9}
.share-actions{display:flex;gap:10px;flex-wrap:wrap}
.play-share button{min-height:44px;padding:10px 16px;border:1px solid #a9c4b5;border-radius:9px;background:#294b58;color:#fff;font:inherit;cursor:pointer}
.play-share button:disabled{opacity:.5;cursor:default}
.play-share summary{min-height:44px;cursor:pointer;padding:12px 0}
.play-share textarea{resize:vertical;overflow-wrap:anywhere;word-break:break-all;line-height:1.5;display:block;width:100%;min-width:0;min-height:44px;margin-top:8px;padding:10px;color:#fff;background:#101f31;border:1px solid #afc2bf;border-radius:7px;font:inherit}
.play-share p{font-size:13px;line-height:1.6;margin:8px 0;overflow-wrap:anywhere}
.play-share :focus-visible{outline:3px solid #e7f4a4;outline-offset:3px}
.play-share [data-play-share-status]:empty{display:none}
@media(max-width:619px){
 header{padding:8px 18px;font-size:13px}
 main{padding:10px 16px 14px}
 h1{margin:8px 0;font-size:25px}
 .intro{font-size:13px}
 .event-panel{padding:9px 10px;margin:9px 0}
 .event-panel p{font-size:13px;margin-top:4px}
 .event-label{font-size:11px}
 .event-controls{gap:3px}
 #harbor-primary{min-height:44px;font-size:14px;padding:10px 16px}
 #visit-count{margin-top:9px;font-size:13px}
 .visit-note{font-size:11px}
 #return-notice{font-size:13px}
 #game{height:160px}
 #loading{margin-bottom:7px;font-size:12px}
 .destinations{grid-template-columns:1fr;gap:5px}
 .destinations a{padding:7px 12px;min-height:56px;gap:3px}
 .destinations span{font-size:15px}
 .destinations small{font-size:11px}
 .footnote{margin:10px 0}
 .play-share{margin-top:14px;padding:12px}
 footer{padding:10px}
}
@media(max-width:360px){body:has(#return-notice:not([hidden])) #game{height:100px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.my-gardens{margin:16px 0;padding:12px 16px;border:1px solid #8ca49b;border-radius:12px}.my-gardens summary{min-height:44px;padding:10px 0;cursor:pointer}.my-gardens ul{list-style:none;padding:0}.my-gardens a{display:flex;align-items:center;min-height:44px;overflow-wrap:anywhere}.my-gardens p{font-size:13px;line-height:1.6}

/* v24: compact invitation/help only at 320px; preserve the map and three native entries. */
@media(max-width:360px){.harbor-choices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:start;margin:5px 0}.harbor-choices .intro{margin:0;font-size:12px}.harbor-choices #journey-help{margin:0;padding:0 6px}.harbor-choices #journey-help summary{font-size:11px}.harbor-choices #journey-help summary:before{margin-right:4px}.harbor-choices:has(details[open]){grid-template-columns:1fr}}
@media(min-width:620px){.harbor-choices{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px;align-items:start;margin:8px 0}.harbor-choices .intro{margin:0}.harbor-choices #journey-help{margin:0}.harbor-choices:has(details[open]){grid-template-columns:1fr}}