/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * macrostructure: Photographic (painted game title) · nav: N3 Side-rail · footer: Ft2 Inline
 * theme: custom Canal Scroll · genre: atmospheric · paper/ink/mineral-green · no marketing sections */
:root{
  --title-paper:#e6ddc3;--title-sheet:#f4efdf;--title-ink:#263f3b;--title-muted:#63736a;
  --title-faint:#879081;--title-red:#a64733;--title-red-pale:#a6473310;--title-line:#50665032;
  --title-wash:#f1ebd8ed;--title-clear:#f1ebd800;--title-shadow:#33413a35;--title-veil:#35443d3b;
  --title-focus:#a64733;--title-light:#fff9e9;--title-white:#fff;--title-dim:#263f3b0c;
  --title-font:"KaiTi","STKaiti","Noto Serif SC","SimSun",serif;
  --title-body:"Noto Serif SC","STSong","SimSun",serif;--title-latin:Georgia,serif;
  --title-ease:cubic-bezier(.22,.61,.36,1);
}
html,body{overflow-x:clip}
body.on-title{background:var(--title-paper);color:var(--title-ink)}
.on-title #app{display:none}
.title-screen{position:fixed;inset:0;isolation:isolate;overflow:hidden;background:var(--title-paper);color:var(--title-ink);font-family:var(--title-body)}
.title-screen button,.title-screen input,.title-screen select{font:inherit}
.title-screen button{color:inherit}
.title-screen h1,.title-screen h2,.title-screen h3,.title-screen h4{font-style:normal;font-weight:400}
.title-screen button:focus-visible,.title-screen select:focus-visible,.title-screen input:focus-visible,.title-screen a:focus-visible{outline:2px solid var(--title-focus);outline-offset:6px}
.title-painting{position:absolute;inset:0;z-index:-2;pointer-events:none}
#title-art,#title-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#title-landscape{opacity:0;transition:opacity 1.6s var(--title-ease)}
#title-landscape[data-ready=true]{opacity:1}
.title-mobile-wash{display:none}
.title-corner{position:absolute;left:4.2%;top:5.2%;display:flex;align-items:center;gap:13px;font-size:11px;letter-spacing:.24em;color:var(--title-muted)}
.title-seal{display:block;border:1px solid var(--title-red);padding:4px 5px 4px 6px;color:var(--title-red);font-family:var(--title-font);font-size:15px;line-height:1.05;letter-spacing:0;transform:rotate(-3deg);outline:1px solid var(--title-red);outline-offset:-4px}
.title-composition{position:absolute;left:12%;top:18%;width:310px}
.title-wordmark{display:flex;align-items:center;gap:23px}
.title-wordmark h1{margin:0;font-family:var(--title-font);font-size:clamp(68px,6.5vw,108px);line-height:1.04;letter-spacing:.08em;overflow-wrap:anywhere;min-width:0;text-shadow:1px 2px 1px var(--title-dim)}
.title-wordmark h1 span{display:block;white-space:nowrap}
.title-wordmark h1 span+span{margin-left:.25em}
.title-side-note{writing-mode:vertical-rl;line-height:1.9;letter-spacing:.3em;font-size:12px;color:var(--title-muted);margin:0;padding-top:18px;white-space:nowrap}
.title-subtitle{font-size:12px;letter-spacing:.13em;line-height:1.8;margin:25px 0 33px 7px;color:var(--title-muted)}
.title-menu{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-left:0}
.title-menu button{display:flex;gap:17px;align-items:center;min-height:45px;width:250px;border:0;background:none;padding:7px 4px;text-align:left;white-space:nowrap;transition:color .18s,transform .2s var(--title-ease)}
.title-menu button>span:nth-child(2){font-family:var(--title-font);font-size:24px;letter-spacing:.18em}
.title-menu small{font-family:var(--title-latin);font-size:9px;letter-spacing:.1em;color:var(--title-faint);opacity:0;transition:opacity .18s}
.title-menu button.menu-primary{color:var(--title-red)}
.menu-marker{position:relative;width:12px;height:12px;flex:none;transform:rotate(45deg);border:1px solid var(--title-line);transition:background .18s,border-color .18s}
.menu-primary .menu-marker,.title-menu button:hover .menu-marker,.title-menu button:focus-visible .menu-marker{border-color:var(--title-red);background:var(--title-red)}
.menu-primary .menu-marker:after{content:"";position:absolute;inset:3px;border:1px solid var(--title-light)}
.title-menu button:hover,.title-menu button:focus-visible{color:var(--title-red);transform:translateX(5px)}
.title-menu button:hover small,.title-menu button:focus-visible small,.title-menu button.menu-primary small{opacity:1}
.title-menu button:active{transform:translateX(7px)}
.title-save{font-size:10px;color:var(--title-muted);margin:20px 0 0 34px;letter-spacing:.03em;line-height:1.8}
.title-poem{position:absolute;right:5.5%;top:15%;display:flex;gap:11px;flex-direction:row-reverse;font-family:var(--title-font);font-size:17px;color:var(--title-muted)}
.title-poem span{writing-mode:vertical-rl;letter-spacing:.22em;line-height:1.5}
.title-poem span+span{padding-top:25px;font-size:13px}
.title-footer{position:absolute;bottom:4.5%;left:4.2%;right:4.2%;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--title-muted);font-size:10px;letter-spacing:.15em}
.title-route{display:flex;align-items:center;gap:14px;white-space:nowrap}
.title-route>span{opacity:.4;font-size:9px}
.title-utilities{display:flex;align-items:center;gap:21px}
.title-utilities button{background:transparent;border:0;display:flex;align-items:center;gap:8px;padding:7px 0;color:var(--title-muted);font-size:11px;white-space:nowrap}
.title-utilities button:hover{color:var(--title-red)}
#title-sound>span:first-child{font-family:var(--title-latin);font-size:20px}
.title-version{font-size:9px;letter-spacing:.08em;opacity:.75}
.title-ink-hint{font-size:10px;color:var(--title-muted);letter-spacing:.07em}
html[data-title-motion=false] .title-ink-hint{visibility:hidden}
.title-message{position:fixed;left:50%;bottom:10%;transform:translateX(-50%);max-width:85vw;margin:0;padding:0;font-size:12px;line-height:1.8;color:var(--title-red);z-index:9}
.title-message:not(:empty){padding:12px 20px;background:var(--title-sheet);box-shadow:0 4px 24px var(--title-shadow)}
.title-boat{position:absolute;width:118px;height:auto;left:66%;top:77%;opacity:.85;animation:boat-drift 30s ease-in-out infinite alternate;mix-blend-mode:multiply}
.title-birds{position:absolute;left:61%;top:27%;width:64px;height:32px;opacity:.5;animation:birds-drift 38s ease-in-out infinite alternate}
.title-birds i{position:absolute;width:11px;height:5px;border-top:1px solid var(--title-ink);border-radius:60%;transform:rotate(12deg)}
.title-birds i:after{content:"";position:absolute;left:9px;top:-1px;width:10px;height:5px;border-top:1px solid var(--title-ink);border-radius:60%;transform:rotate(-25deg)}
.title-birds i:nth-child(2){left:26px;top:9px;transform:scale(.7)}
.title-birds i:nth-child(3){left:-19px;top:14px;transform:scale(.6)}
@keyframes boat-drift{from{transform:translate(0,0) rotate(-1deg)}to{transform:translate(-24px,-9px) rotate(.4deg)}}
@keyframes birds-drift{from{transform:translate(0,0)}to{transform:translate(70px,-16px)}}
.title-departure{position:fixed;inset:0;z-index:50;background:var(--title-paper);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;animation:ink-depart .5s var(--title-ease)}
.title-departure span{font-family:var(--title-font);font-size:32px;letter-spacing:.22em}
.title-departure small{font-size:11px;color:var(--title-muted);letter-spacing:.15em}
@keyframes ink-depart{from{opacity:0;clip-path:ellipse(5% 10% at 20% 50%)}to{opacity:1;clip-path:ellipse(130% 130% at 20% 50%)}}
.title-dialog{color:var(--title-ink);font-family:var(--title-body);background:var(--title-sheet) url('../../public/reference/water-ink/T_Paper.webp');border:1px solid var(--title-line);border-top:3px solid var(--title-ink);border-radius:0;width:min(620px,calc(100vw - 36px));max-height:calc(100dvh - 40px);padding:42px 44px;box-shadow:0 22px 80px var(--title-shadow);overflow-y:auto;overflow-x:clip}
.title-dialog::backdrop{background:var(--title-veil);backdrop-filter:blur(5px)}
.title-dialog h2{font-family:var(--title-font);font-size:32px;line-height:1.4;letter-spacing:.05em;margin:12px 0 20px;overflow-wrap:anywhere}
.title-overline{font-family:var(--title-latin);font-size:10px!important;line-height:1.5!important;letter-spacing:.16em;color:var(--title-muted);margin:0}
.title-dialog-close{position:absolute;top:12px;right:17px;font-size:28px!important;width:36px;height:36px;border:0;background:none;line-height:1;color:var(--title-muted)!important}
.title-dialog-note{font-size:12px!important;color:var(--title-muted);line-height:1.8!important;margin:14px 0 23px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:17px 0;border-bottom:1px solid var(--title-line)}
.setting-row b{display:block;font-weight:400;font-size:15px;margin-bottom:6px}
.setting-row small{display:block;color:var(--title-muted);font-size:10px;line-height:1.7}
.setting-row input[type=checkbox]{appearance:none;flex:none;position:relative;width:36px;height:20px;background:var(--title-line);border:1px solid var(--title-line);cursor:pointer;transition:background .2s}
.setting-row input[type=checkbox]:after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;background:var(--title-sheet);transition:transform .2s}
.setting-row input[type=checkbox]:checked{background:var(--title-ink)}
.setting-row input[type=checkbox]:checked:after{transform:translateX(16px)}
.setting-range{display:flex;align-items:center;gap:8px;flex:none;font-size:11px}
.setting-range input{width:115px;accent-color:var(--title-ink)}
.setting-range output{width:30px;text-align:right;font-family:var(--title-latin)}
.setting-row select{padding:7px 10px;background:var(--title-sheet);color:var(--title-ink);border:1px solid var(--title-line);font-size:12px;flex:none}
.title-action{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;border:1px solid var(--title-ink);padding:12px 18px;background:var(--title-ink);color:var(--title-light)!important;font-size:14px;white-space:nowrap;transition:background .18s,transform .18s}
.title-action:hover{background:var(--title-muted)}
.title-action:active{transform:translateY(1px)}
.title-text-button{display:inline-flex;gap:15px;align-items:center;background:transparent;border:0;border-bottom:1px solid var(--title-line);padding:11px 0;font-size:13px;white-space:nowrap}
.title-text-button:hover{color:var(--title-red)!important;border-color:var(--title-red)}
.title-text-button:disabled{cursor:not-allowed;opacity:.45}
.title-explore{width:min(960px,calc(100vw - 36px))}
.explore-layout{display:grid;grid-template-columns:185px minmax(0,1fr);gap:40px;margin-top:27px}
.explore-cities{display:flex;flex-direction:column}
.explore-cities button{display:flex;gap:22px;align-items:center;background:transparent;border:0;border-bottom:1px solid var(--title-line);min-height:65px;padding:12px 10px;white-space:nowrap}
.explore-cities button>span:nth-child(2){font-family:var(--title-font);font-size:24px;letter-spacing:.12em}
.explore-cities button>span:last-child{margin-left:auto;opacity:0}
.explore-cities button small{font-family:var(--title-latin);font-size:11px;color:var(--title-muted)}
.explore-cities button[aria-pressed=true]{color:var(--title-red);background:var(--title-red-pale)}
.explore-cities button[aria-pressed=true]>span:last-child{opacity:1}
.explore-detail{position:relative;border-left:1px solid var(--title-line);padding:7px 0 0 34px;min-width:0}
.explore-number{position:absolute;right:0;top:-22px;font-family:var(--title-latin);font-size:100px;line-height:1;color:var(--title-dim);pointer-events:none}
.explore-detail h3{font-family:var(--title-font);font-size:42px;margin:13px 0 10px;letter-spacing:.14em}
.explore-detail>p:not(.title-overline){font-size:13px;color:var(--title-muted);line-height:1.8}
.explore-activity{border-top:1px solid var(--title-line);margin:24px 0;padding-top:18px}
.explore-activity>span{font-size:10px;color:var(--title-muted);letter-spacing:.2em}
.explore-activity h4{font-family:var(--title-font);font-size:24px;margin:10px 0}
.explore-activity p{font-size:12px;line-height:1.8;margin:0 0 10px}
.explore-activity small{font-size:10px;color:var(--title-muted)}
.explore-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:25px}
.title-confirm p:not(.title-overline){font-size:14px;line-height:1.9}
.credits-copy{border-top:1px solid var(--title-line);padding-top:10px;margin-bottom:24px}
.credits-copy p{font-size:13px;line-height:1.9;margin:15px 0}
.credits-copy b{font-weight:400;color:var(--title-red)}
.credits-copy a{color:var(--title-muted);font-size:11px;text-underline-offset:4px}
.game-home-button{pointer-events:auto;text-decoration:none;font-size:12px;white-space:nowrap;padding:9px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.game-mode-badge{font-size:11px;color:var(--accent)}
html[data-title-motion=false] .title-boat,html[data-title-motion=false] .title-birds{animation:none}
@media(min-width:1800px){.title-composition{top:20%;left:14%}.title-subtitle{margin-bottom:43px}.title-menu button{min-height:51px}}
@media(max-height:760px) and (min-width:701px){.title-composition{top:14%}.title-wordmark h1{font-size:76px}.title-subtitle{margin:17px 0 20px}.title-menu button{min-height:38px}.title-menu button>span:nth-child(2){font-size:22px}.title-save{margin-top:12px}}
@media(max-width:1000px){.title-poem{display:none}.title-composition{left:9%}.title-wordmark h1{font-size:78px}.title-route{gap:9px}.title-utilities{gap:14px}}
@media(max-width:1000px){.title-ink-hint{display:none}}
@media(max-width:700px){
  #title-art{object-position:56% 50%}.title-mobile-wash{display:block;position:absolute;inset:0;background:linear-gradient(90deg,var(--title-wash),var(--title-clear) 110%)}
  .title-corner{top:4%;left:7%;font-size:9px}.title-composition{left:12%;top:16%;width:76%}.title-wordmark h1{font-size:clamp(64px,17vw,86px)}
  .title-subtitle{font-size:11px;margin:20px 0 27px 4px}.title-menu button{min-height:44px;width:240px}.title-menu button>span:nth-child(2){font-size:23px}
  .title-footer{left:7%;right:7%;bottom:3%;align-items:flex-start;flex-direction:column;gap:13px}.title-route{font-size:9px;gap:10px}.title-utilities{width:100%;justify-content:space-between}
  .title-save{font-size:9px;margin-top:16px}.title-boat{left:69%;top:78%;width:90px}.title-birds{display:none}
  .title-dialog{padding:33px 23px;width:calc(100vw - 28px)}.title-dialog h2{font-size:27px;margin-top:16px}.setting-row{gap:12px}.setting-row small{max-width:175px}
  .setting-range{gap:5px}.setting-range input{width:80px}.title-explore{padding-inline:20px}.explore-layout{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:18px}
  .explore-cities{flex-direction:row;justify-content:space-between;gap:4px}.explore-cities button{flex:1;flex-direction:column;gap:5px;padding:9px 2px;min-height:65px;border-bottom:1px solid var(--title-line)}
  .explore-cities button>span:nth-child(2){font-size:19px;letter-spacing:.05em}.explore-cities button>span:last-child{display:none}.explore-cities button small{font-size:9px}
  .explore-detail{border-left:0;border-top:1px solid var(--title-line);padding:20px 0 0}.explore-detail h3{font-size:36px}.explore-number{font-size:80px;top:15px}.explore-activity{margin:18px 0;padding-top:15px}.explore-actions{gap:18px;margin-top:20px}
}
@media(max-height:700px){.title-composition{top:13%}.title-wordmark h1{font-size:62px}.title-subtitle{margin:13px 0 15px}.title-menu button{min-height:37px}.title-menu button>span:nth-child(2){font-size:21px}.title-save{margin-top:10px}.title-route{display:none}}
@media(max-height:490px){.title-composition{top:19%;left:10%;display:grid;grid-template-columns:180px minmax(0,1fr);column-gap:45px;width:70%}.title-wordmark{grid-column:1;grid-row:1}.title-wordmark h1{font-size:60px}.title-side-note{display:none}.title-subtitle{grid-column:1;grid-row:2;font-size:10px}.title-menu{grid-column:2;grid-row:1/4}.title-save{grid-column:1;margin:0;font-size:9px}.title-corner{top:5%;font-size:9px}.title-footer{flex-direction:row;bottom:3%;font-size:9px}.title-utilities{width:auto}}
@media(prefers-reduced-motion:reduce){.title-screen *{animation:none!important;transition:none!important}#title-landscape{display:none}}