/* Same ink and type, different compositions for water, dialogue and keepsakes. */
#mirror-dialog{width:680px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:24px 32px;background:transparent;border:0;box-shadow:none;color:#f5f3df;font-family:var(--notebook-serif);overflow:auto}
#mirror-dialog::backdrop{background:rgba(24,28,27,.46);backdrop-filter:blur(2px);animation:mirror-backdrop-in .8s ease both}
#mirror-dialog[open]{animation:mirror-arrive .9s cubic-bezier(.2,.7,.3,1) both;text-shadow:0 1px 8px #17292280}
body:has(#mirror-dialog[open]) #object-cue,body:has(#mirror-dialog[open]) #verse,body:has(#mirror-dialog[open]) #guide{visibility:hidden}
#mirror-message{height:104px;display:flex;flex-direction:column;justify-content:center}
#mirror-message[hidden]{display:flex;visibility:hidden}
#mirror-invitation[hidden]{display:block;visibility:hidden}
#mirror-touch-label{transition:opacity .45s ease}
#mirror-touch-label[hidden]{display:block;opacity:0}
@keyframes mirror-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes mirror-backdrop-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#mirror-dialog[open],#mirror-dialog::backdrop{animation:none}#mirror-touch-label{transition:none}}
#mirror-dialog .eyebrow{color:#cedbd3;margin:0 36px 6px;font-size:13px}
#key-dialog{width:520px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 24px);box-sizing:border-box;padding:28px 32px;background:var(--notebook-paper);color:var(--notebook-ink);font:16px/1.65 var(--notebook-serif);border:1px solid #dbe1d6;border-radius:4px;overflow:auto;text-align:center}
#key-dialog::backdrop{background:#20292470;backdrop-filter:blur(2px)}
#key-dialog h2{font:400 26px/1.4 var(--notebook-serif);margin:6px 0}
#key-dialog .eyebrow{font:13px/1.5 var(--notebook-serif);margin:0 28px;color:var(--notebook-muted)}
#key-art{display:block;width:200px;height:106px;margin:auto}
#key-dialog p{margin:8px 0}
#key-form label{display:block;text-align:left;font-size:14px}
#key-feeling{box-sizing:border-box;width:100%;resize:none;border:0;border-bottom:1px solid #8b9e9780;border-radius:0;background:#fff8;color:var(--notebook-ink);padding:10px;font:17px/1.7 var(--notebook-serif)}
#key-feeling:focus-visible{outline:1px solid #778e81;outline-offset:3px}
#key-count{display:block;text-align:right;font-size:12px;color:var(--notebook-muted)}
#key-dialog .text-button{font:16px/1.5 var(--notebook-serif);color:var(--notebook-ink);margin:8px auto;min-height:44px}
#key-dialog button:disabled{opacity:.4;cursor:default}
#key-dialog button:focus-visible{outline:1px solid #778e81;outline-offset:3px}
#key-words{margin:16px 0;padding:12px 0;font-size:20px;white-space:pre-wrap;overflow-wrap:anywhere;border-block:1px solid var(--notebook-line)}
.key-actions{display:flex;gap:20px;justify-content:center}
#key-status{min-height:24px;font-size:14px}
#key-privacy{display:block;font-size:12px;line-height:1.6;color:var(--notebook-muted)}
@media(max-height:700px){#key-dialog{padding:16px 20px}#key-art{height:65px;width:122px}#key-dialog h2{font-size:23px}#key-dialog p{margin:4px 0}}
#mirror-dialog h2{font:400 28px/1.3 var(--notebook-serif);margin:0 0 6px}
#mirror-invitation{font:16px/1.6 var(--notebook-serif)}
#mirror-touch{width:min(100%,520px);margin:0 auto;min-height:0;font-family:var(--notebook-serif)}
#mirror-art{width:100%;height:auto;max-height:32dvh;object-fit:contain}
#mirror-touch-label{font:15px/1.7 var(--notebook-serif);bottom:20%}
#mirror-message{min-height:0}
#mirror-dialog .mirror-quote{font:21px/1.65 var(--notebook-serif);margin:0 0 8px}
#mirror-dialog .mirror-reassurance{font:15px/1.6 var(--notebook-serif);color:#d8e0d4;margin:0 0 10px}
#mirror-dialog #mirror-leave{font:17px/1.6 var(--notebook-serif);color:#f5f3df;border-color:#e8eed766;margin:8px auto 0}
#mirror-dialog .close{color:#f5f3df}
#mirror-dialog.revealed #mirror-touch{margin-top:0}
#pier-scene{background:linear-gradient(0deg,#163631aa,transparent 28%);padding-bottom:28px}
#pier-scene .pier-dialogue{position:absolute;top:auto;bottom:165px;left:50%;width:min(650px,calc(100% - 40px));padding:0;background:none;border:0;border-radius:0;box-shadow:none;text-align:center;pointer-events:none}
#pier-scene .pier-dialogue:after{display:none}
#pier-scene[data-mode="eat"] .pier-dialogue:has(#pier-line:empty){visibility:hidden}
#pier-scene[data-mode="eat"] #pier-eat,#pier-scene[data-mode="watch"] #pier-watch{display:none}
#pier-photo{display:none;position:absolute;bottom:64px;left:28px;margin:0}
#pier-scene[data-mode="watch"] #pier-photo{display:flex}
#sea-photos-dialog{width:700px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 24px);padding:24px;box-sizing:border-box;background:var(--notebook-paper);color:var(--notebook-ink);font:16px/1.6 var(--notebook-serif);border:0;border-radius:4px;text-align:center;overflow:auto}
#sea-photos-dialog::backdrop{background:#202a2977;backdrop-filter:blur(2px)}
#sea-photos-dialog h2{font:400 24px/1.5 var(--notebook-serif);margin:0 30px 16px}
#sea-photo-image{display:block;max-width:100%;max-height:48dvh;margin:auto;object-fit:contain}
#sea-photo-image[hidden]{display:none}
#sea-photos-dialog p{margin:8px 0}#sea-photos-dialog small{font-size:12px;color:var(--notebook-muted)}
.sea-photo-actions{display:flex;justify-content:center;align-items:center;gap:24px}
#sea-photos-dialog button{color:var(--notebook-ink);font-family:var(--notebook-serif);min-height:44px}
#sea-photos-dialog button:disabled{opacity:.35}
#pier-scene:not([data-mode="watch"]) .pier-dialogue{top:var(--pier-text-top,48%);bottom:auto;left:50%;min-height:0}
#pier-scene:not([data-mode="watch"]) #pier-choices{position:absolute;top:var(--pier-actions-top,60%);left:50%;transform:translateX(-50%);width:calc(100% - 40px);margin:0}
#pier-scene:not([data-mode="watch"]) #pier-feed-tools{position:absolute;top:var(--pier-feed-top,70%);left:50%;transform:translateX(-50%);width:calc(100% - 40px);justify-content:center;margin:0}
#pier-scene:not([data-mode="watch"]) #pier-leave{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);margin:0}
#pier-scene #pier-speaker{font:14px/1.6 var(--notebook-serif);color:#f1ebcf;text-shadow:0 1px 5px #152f2a;margin:0 0 8px}
#pier-scene #pier-line,#pier-scene[data-beat="2"] #pier-line{font:23px/1.7 var(--notebook-serif);color:#fff9e7;text-shadow:0 2px 6px #17332e,0 1px 2px #17332e}
#pier-scene #pier-next[hidden]{display:none}
#pier-scene .text-button{font:17px/1.6 var(--notebook-serif)}
#pier-scene[data-mode="dialogue"] #pier-leave{opacity:.7}
#pier-future{display:none;font:14px/1.7 var(--notebook-serif);color:#254b4c}
#pier-scene[data-mode="watch"] #pier-future{display:block;position:absolute;bottom:24px;left:28px;margin:0;color:#fff9e7;text-shadow:0 1px 4px #223f39,0 1px 2px #223f39}
#pier-scene[data-mode="watch"] .text-button{color:#284c4d!important;text-shadow:0 1px 3px #fff8df;border-color:#365b5766}
#pier-scene[data-mode="watch"] #pier-photo{color:#fffbed!important;font-size:18px;line-height:1.6;text-shadow:0 1px 3px #193b39,0 2px 9px #193b39;border-color:#fffbed99;padding:4px 0;gap:12px}
#inspect-dialog{min-height:0;max-height:calc(100dvh - 20px)}
#inspect-dialog #inspect-art{height:min(21dvh,185px);width:auto;max-width:100%;object-fit:contain;margin:8px auto}
#inspect-dialog #inspect-copy{margin-bottom:10px}
#inspect-dialog #find-guidance{margin-bottom:10px}
#inspect-dialog #find-words{margin-top:10px}
#inspect-dialog #find-decisions{margin-top:14px;gap:14px}
#inspect-dialog #leave-find{white-space:normal}
@media(max-width:600px){
  #mirror-dialog{padding:22px 14px}
  #mirror-dialog .mirror-quote{font-size:18px}
  #mirror-dialog .mirror-reassurance{font-size:14px}
  #mirror-touch-label{font-size:13px}
  #pier-scene .pier-dialogue{bottom:175px;min-height:0}
  #pier-scene #pier-line,#pier-scene[data-beat="2"] #pier-line{font-size:19px}
  #pier-scene[data-mode="watch"] #pier-future{bottom:84px;left:24px;right:auto;text-align:left;font-size:12px}
  #pier-scene[data-mode="watch"] #pier-photo{bottom:118px;left:24px}
  #pier-scene[data-mode="watch"] #pier-leave{color:#fff9e7!important;text-shadow:0 1px 4px #223f39;border-color:#f1ebcf88}
}
@media(max-height:600px){#mirror-dialog{padding-top:12px;padding-bottom:12px}#mirror-art{max-height:25dvh}#mirror-dialog .eyebrow{display:none}#mirror-dialog .mirror-quote{font-size:17px}#mirror-dialog .mirror-reassurance{font-size:13px}#pier-scene .pier-dialogue{bottom:132px}}
@media (pointer:fine){
  #sea,#sea:active,#opening{cursor:var(--coastal-cursor,auto)}
  #opening button,#opening a{cursor:pointer}
}
.prologue-player{position:fixed;inset:0;z-index:10000;background:#050909;display:grid;place-items:center;color:#faf7e8}
.prologue-player video{width:100%;height:100%;max-height:100dvh;object-fit:contain}
.prologue-player p{position:absolute;top:45%;font:18px 'Kaiti SC',serif;pointer-events:none}
.prologue-player>button{position:absolute;right:24px;top:max(24px,env(safe-area-inset-top));color:#fff9e8;min-height:44px;background:#10252299;padding:8px 18px}
.journey-guide{left:50%;right:auto;bottom:115px;transform:translateX(-50%);width:min(520px,calc(100% - 48px));max-width:none;padding:18px 24px;background:rgba(38,62,55,.76);border:1px solid #eeeedd55;border-radius:6px;backdrop-filter:blur(5px);text-align:center;color:#fffef4;text-shadow:0 1px 3px #233f39}
.journey-guide p{font-size:20px;line-height:1.6;margin-bottom:8px}
.journey-guide small{font-size:15px;line-height:1.6}
@media(max-width:600px){.journey-guide{bottom:190px;width:calc(100% - 48px)}.journey-guide p{font-size:18px}.journey-guide small{font-size:14px}}
#live-map{position:absolute;left:24px;bottom:54px;width:180px;padding:10px 12px;background:#29483ddd;border:1px solid #ecedda55;border-radius:6px;color:#fffdf0;pointer-events:none}
#live-map-art{display:block;width:100%;height:auto;aspect-ratio:6/5}
#live-map span,#live-map small{display:block;font:13px/1.5 var(--notebook-serif);text-align:center}
#live-map small{font-size:12px;color:#ead7a6}
#boost:disabled{opacity:.4}#boost[data-active="true"]{background:#f2e3b1;color:#29483d}
body:has(dialog[open]) #live-map,body:has(#pier-scene:not([hidden])) #live-map{visibility:hidden}
@media(pointer:coarse){#live-map{bottom:178px;width:138px;left:18px}.journey-guide{bottom:370px}}
@media(max-width:600px){#live-map{width:138px;padding:6px 8px}.journey-guide{padding:13px 16px;bottom:300px}}
@media(max-width:600px) and (pointer:coarse){.journey-guide{bottom:370px}}
@media(max-height:550px){#live-map{width:110px;bottom:38px;left:12px}#live-map small{display:none}.journey-guide{width:min(380px,calc(100% - 320px));bottom:60px;padding:10px 14px}.journey-guide p{font-size:16px;margin:0 0 4px}.journey-guide small{font-size:13px}}
@media(max-height:550px) and (pointer:coarse){#live-map{bottom:150px}}
#chapters #current-place{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;max-width:180px;padding:4px 8px;border:0;border-bottom:1px solid #6b8c7770;border-radius:0;background:none;color:#294c44;font:16px/1.5 var(--notebook-serif);text-shadow:0 1px 4px #fff9e7;cursor:pointer}
#current-place svg{width:17px;height:17px;flex-shrink:0}
#current-place-name{overflow-wrap:anywhere}
#current-place:focus-visible{outline:2px solid #547c70;outline-offset:3px}
@media(max-width:600px){#chapters #current-place{font-size:13px;max-width:150px;gap:4px;padding:4px}#current-place svg{width:14px;height:14px}}
#opening #game-title{font-family:'Baskerville','Palatino Linotype','Book Antiqua',Georgia,serif;font-size:104px;line-height:1.16;font-weight:400;letter-spacing:0;margin-bottom:24px;animation:fry-title-reveal 1.6s ease-out both;text-shadow:0 2px 12px #35565140}
#game-title>span{display:inline-block;animation:fry-title-breathe 9s 1.6s ease-in-out infinite}
#game-title .title-finder{display:inline-block;font-style:italic;animation:fry-title-breathe 10s 2.2s ease-in-out infinite}
#opening .intro-line{font:16px/1.9 var(--notebook-serif);margin-bottom:32px;color:#fff9e9}
#opening .title-start{font:17px/1.6 var(--notebook-serif);gap:18px;min-width:144px}
#opening .title-start svg{width:22px;height:18px}
#about-dialog{width:480px;text-align:left}
#about-dialog h2{font:italic 400 35px/1.3 Baskerville,Georgia,serif;margin-bottom:78px}
#about-dialog p:not(.eyebrow){font:15px/1.95 var(--notebook-serif);margin:0 0 16px;max-width:28em;color:#345553}
#about-dialog .text-button{font-size:14px}
@keyframes fry-title-reveal{from{opacity:0;filter:blur(5px);transform:translateY(12px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes fry-title-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:1000px){#opening #game-title{font-size:80px}}
@media(max-width:600px){#opening #game-title{font-size:53px}#opening .intro-line{font-size:14px}#about-dialog h2{font-size:30px;margin-bottom:70px}}
@media(max-width:360px){#opening #game-title{font-size:46px}}
@media(max-height:540px){#opening #game-title{font-size:52px;margin-bottom:10px}#about-dialog h2{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){#opening #game-title,#game-title>span,#game-title .title-finder{animation:none}}
#loading{position:absolute;inset:0;gap:0;overflow:hidden;background:#253f42;color:#f6f3df;text-align:center;transition:opacity .9s ease;transition-delay:0}
#loading::before{content:'';position:absolute;inset:0;pointer-events:none;background:url('assets/shore-postcard-v6.png') center 43% / cover;opacity:.18;animation:loading-coast-arrive 2s ease-out both}
#loading .loading-brand{position:absolute;top:max(36px,8%);font:28px/1.2 Baskerville,Georgia,serif;color:#e8eddf;opacity:.8}
#loading .loading-shore{position:relative;width:260px;height:138px;margin:0 0 26px}
#loading .loading-gull{position:absolute;width:120px;height:110px;left:70px;top:0;background:none}
#loading .loading-caption{position:relative;display:flex;align-items:center;justify-content:center;gap:10px}
#loading .loading-caption svg{width:19px;height:19px;stroke-width:1.3;flex:none}
#loading .loading-tide{position:absolute;left:50%;top:89px;width:170px;height:25px;border:1px solid #d7e6da;border-radius:50%;transform:translateX(-50%);opacity:0;animation:loading-tide 4.8s ease-out infinite}
#loading .tide-second{animation-delay:2.4s}
#loading #loading-text{position:relative;font:18px/1.9 var(--notebook-serif);letter-spacing:0;max-width:none;white-space:nowrap}
#loading .loading-stroke{position:relative;width:96px;height:1px;background:#d8e3d33d;margin-top:22px;overflow:hidden}
#loading .loading-stroke::after{content:'';position:absolute;inset:0;background:#e8dcab;transform-origin:left;animation:loading-wind-pass 2.8s ease-in-out infinite}
#loading #retry{position:relative;color:#fff7df;font:16px/1.6 var(--notebook-serif);margin-top:24px;min-height:44px;border-bottom:1px solid #d8e3d3}
#loading.ready{opacity:0;pointer-events:none;transition-delay:0}
#loading.ready *,#loading.ready::before{animation-play-state:paused}
@keyframes loading-coast-arrive{from{opacity:0}to{opacity:.18}}
@keyframes loading-gull-breath{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes loading-tide{0%{opacity:0;transform:translateX(-50%) scale(.45)}20%{opacity:.5}100%{opacity:0;transform:translateX(-50%) scale(1.5)}}
@keyframes loading-wind-pass{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
@media(prefers-reduced-motion:reduce){#loading{transition:none}#loading::before{opacity:.18}#loading .loading-tide{opacity:.35}#loading .tide-second{display:none}#loading .loading-stroke::after{transform:none;opacity:.5}}
#live-map{box-sizing:border-box;width:180px;height:180px;border-radius:50%;padding:22px 16px;display:flex;align-items:center;justify-content:center;background:#fffffff0;background:rgba(255,255,255,.68);border:1px solid #ffffffb3;color:#36584f;box-shadow:0 3px 18px #39574b12;backdrop-filter:blur(4px)}
#live-map[hidden]{display:none}
#live-map span,#live-map small{display:none}
#live-map-art{width:100%;height:auto;flex-shrink:0}
.journey-started .shore-footer{display:none}
.journey-guide{box-sizing:border-box;background:rgba(255,255,255,.78);border:0;border-radius:4px;color:#294c44;text-shadow:none;box-shadow:0 3px 18px #39574b10;padding:18px 26px;font-family:var(--notebook-serif)}
.journey-guide p{font:400 19px/1.7 var(--notebook-serif);margin:0 0 7px;text-wrap:balance}
.journey-guide small{font:14px/1.75 var(--notebook-serif);color:#526b61;text-wrap:balance}
.journey-guide .walking-hint{display:none}
@media(max-width:600px){#live-map{width:136px;height:136px;padding:17px 12px;left:18px}.journey-guide{padding:14px 18px}.journey-guide p{font-size:17px}.journey-guide small{font-size:13px}}
@media(max-height:550px){#live-map{width:110px;height:110px;padding:13px 9px}.journey-guide{padding:10px 14px}.journey-guide p{font-size:16px}}
@media(max-width:600px){.hud #chapters{display:flex}.hud #current-place{max-width:140px}}
#object-cue button{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;font-family:var(--notebook-serif)}
#object-cue button>span{min-width:0;line-height:1.5;text-wrap:balance}
#object-cue kbd{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-width:28px;height:28px;padding:0 7px;border-radius:4px;white-space:nowrap;word-break:keep-all;font:13px/1 var(--notebook-serif)}
#inspect-dialog #inspect-copy{white-space:pre-line}
#inspect-dialog #inspect-copy:empty{display:none}
#opening .title-chinese{font:16px/1.6 var(--notebook-serif);margin:-10px 0 22px;color:#fff9e9}
#about-dialog{width:640px}
#about-dialog p:not(.eyebrow){max-width:none}
#about-dialog h2{margin-bottom:65px}
#about-dialog .about-manifesto{font-size:18px;color:#294c44;padding:10px 0;border-block:1px solid #81998a44}
@media(max-width:600px){#opening #game-title{font-size:43px}#opening .title-chinese{font-size:14px;margin-top:-8px;margin-bottom:18px}#about-dialog h2{margin-bottom:48px}#about-dialog p:not(.eyebrow){font-size:14px;line-height:1.85}}
@media(max-width:360px){#opening #game-title{font-size:37px}}
@media(max-height:540px){#opening .title-chinese{margin:0 0 8px}#about-dialog h2{margin-bottom:28px}}
#opening .title-copy{left:50%;top:23%;width:900px;max-width:calc(100% - 40px)}
#opening #game-title{margin:0 0 42px;color:#f5f5dc;text-shadow:none;filter:drop-shadow(0 2px 7px #315d5540)}
#opening #game-title>span{background:var(--brand-gradient);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:wandermew-tint 14s ease-in-out infinite}
#opening #game-title .title-finder{color:inherit}
#opening #begin{font:italic 23px/1.4 Baskerville,Georgia,serif;color:#fff3cf;min-width:88px;min-height:48px;padding:8px 18px;border-bottom:1px solid #ebebce8c;transition:color .3s,border-color .3s}
#opening #begin:hover{color:#fff;border-color:#fff}
@keyframes wandermew-tint{0%,100%{background-position:0% 50%;transform:translateY(0)}50%{background-position:100% 50%;transform:translateY(-3px)}}
@media(max-width:600px){#opening .title-copy{top:25%}#opening #game-title{margin-bottom:32px}#opening #begin{font-size:21px}}
@media(max-height:540px){#opening .title-copy{top:20%}#opening #game-title{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){#opening #game-title>span{animation:none}}
#about-dialog .close svg{width:15px;height:15px;stroke-width:1.4}
#about-dialog .close{background:transparent;box-shadow:none;filter:none}
#live-map{width:140px;height:140px;padding:18px 12px;background:#f5f6ee75;border-color:#f5f6ee80;box-shadow:none;backdrop-filter:blur(2px)}
@media(max-width:600px){#live-map{width:108px;height:108px;padding:14px 9px}}
@media(max-height:550px){#live-map{width:96px;height:96px;padding:12px 8px}}
#wind-beacon{position:absolute;z-index:5;width:34px;height:40px;pointer-events:none;transform:translate(-50%,-100%);color:#fff8d6;filter:drop-shadow(0 0 3px #fff3ba) drop-shadow(0 0 9px #edc567)}
#wind-beacon svg{width:34px;height:40px;stroke-width:2;animation:wind-beacon-float 2.6s ease-in-out infinite}
@keyframes wind-beacon-float{0%,100%{transform:translateY(-4px);opacity:.8}50%{transform:translateY(4px);opacity:1}}
@media(prefers-reduced-motion:reduce){#wind-beacon svg{animation:none}}