@font-face{font-family:"Home Calligraphy";src:url("/assets/game/ui/ui/fonts/home-calligraphy.woff2") format("woff2");font-weight:400;font-display:swap}
/* The welcome scroll is independent of the in-world HUD. */
#start{position:fixed;inset:0;z-index:10;transform:none;width:100%;height:100dvh;max-height:none;box-sizing:border-box;overflow:auto;padding:64px 24px 32px;text-align:center;font-size:15px;background:#d8cbb0 url('/assets/game/ui/ui/home-landscape.webp') center/cover no-repeat;isolation:isolate;scrollbar-color:#978568 #e6dac1}
#start[hidden]{display:none}
#start::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 390px 410px at 110px 100px,#eee2caed 0%,#eee2cab8 42%,#eee2ca00 100%),linear-gradient(180deg,#eadcc566,transparent 150px);z-index:-1}
#start *{box-sizing:border-box}
#start button{font:inherit;letter-spacing:.025em;margin:0;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
#start button:focus-visible,#start input:focus-visible{outline:2px solid #96362a;outline-offset:4px}
#start button:disabled{cursor:wait;opacity:.55}
#start .home-brand{position:absolute;z-index:1;top:26px;left:38px;text-align:left;color:#1e211e}
#start .home-brand>div{font-family:"Home Calligraphy","Kaiti SC",serif;font-weight:400;font-size:clamp(58px,6vw,94px);line-height:1.1;letter-spacing:-.08em}
#start .home-brand>div>span{display:inline-block;vertical-align:top;writing-mode:vertical-rl;font:12px/1.1 serif;letter-spacing:0;color:var(--red);border:2px solid var(--red);margin:8px 0 0 14px;padding:3px}
#start .home-brand>p{font-size:11px;letter-spacing:.4em;margin:10px 0 0 6px}
#start .home-nav{position:absolute;z-index:2;right:35px;top:17px;display:flex;align-items:center}
#start .home-nav button{display:flex;gap:10px;align-items:center;border:0;border-right:1px solid #6e63586b;padding:8px 22px;background:transparent;font-size:14px;position:relative}
#start .home-nav button:last-child{border-right:0}
#start .home-nav button.active::after{content:"";position:absolute;bottom:-3px;left:18px;right:18px;height:1px;background:#655c48}
#start .home-nav button:hover{background:#f5ecd655;color:#9c3528}
#start .home-nav img{width:19px;height:19px}
#start .home-scroll{position:relative;width:min(100%,560px);margin:0 auto;padding:27px 43px 23px;filter:drop-shadow(0 5px 12px #34281338);isolation:isolate;display:flex;flex-direction:column}
#start .home-scroll::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#fbf2dc9c,#f6ead0a6),url('/assets/game/ui/ui/xuan-paper.webp') center/540px;mask:url("/assets/game/ui/ui/home-paper-edge.svg") 0 0/100% 100% no-repeat}
#start .home-seal{display:inline-flex;align-items:center;justify-content:center;color:#a83b2b;border:1.5px solid #a83b2b;font-size:13px;line-height:1.1;padding:2px;writing-mode:vertical-rl;font-family:"Songti SC",serif}
#start .home-heading>.home-seal{background:#a83b2b;color:#f6e5c8;border:3px double #f6e5c8;width:26px;height:30px;margin-bottom:12px}
#start h2{font-family:"Home Calligraphy","Kaiti SC",serif;font-size:70px;font-weight:400;letter-spacing:.07em;line-height:1.2;margin:0 0 7px;color:#20221d}
#start .home-rule{display:flex;align-items:center;gap:6px;margin:15px 0 22px;color:#847a64;font-size:11px}
#start .home-rule::before,#start .home-rule::after{content:"";height:1px;background:#95897280;flex:1}
#start .home-form{max-width:380px;margin:auto;text-align:left}
#start .home-name{display:flex;align-items:center;border:1px solid #9a8c72;border-radius:3px;background:#fffaf130;box-shadow:inset 0 1px 3px #5d492810}
#start .home-name:focus-within{border-color:#756247;box-shadow:inset 0 0 0 1px #756247;background:#fffaf150}
#start #name{font:15px Georgia,"Songti SC",serif;min-width:0;width:100%;text-align:left;border:0;padding:10px 12px;background:transparent;user-select:text}
#start #name:focus-visible{outline:none}
#start #random-name{border:0;background:none;font-size:25px;line-height:1;padding:7px 12px;letter-spacing:0;min-width:44px;min-height:44px}
#start #random-name:focus-visible{outline:1px solid #756247;outline-offset:-5px;border-radius:3px}
#start #play{display:block;width:90%;min-height:56px;margin:0 auto 8px;padding:13px 22px;background:transparent;color:#fff3db;border:0;font-size:21px;letter-spacing:.045em;position:relative;isolation:isolate;}
#start #play::before{content:"";position:absolute;inset:0;z-index:-1;background:#ad3c2b;mask:url("/assets/game/ui/ui/home-brush.svg") center/100% 100% no-repeat}
#start #play:hover:not(:disabled)::before{background:#902c22}
#start #play:focus-visible{clip-path:none;outline-offset:3px}
#start #last{font-size:12px;text-align:center;color:#8d392b;line-height:1.5;margin:6px 0;letter-spacing:0}
#start #last:empty{display:none}
#start #legacy{margin-top:18px;font-size:13px}
#start .wanderer-card{display:flex;gap:17px;align-items:center;background:#ac8e5520;border-radius:4px;padding:8px 12px;margin-bottom:14px}
#start .wanderer-portrait{flex:none;width:76px;height:82px;background:url('/assets/game/characters/wanderer-idle.webp') left top/304px 249px no-repeat}
#start .wanderer-card strong{font-size:19px;font-weight:600;overflow-wrap:anywhere}
#start .resting-badge{display:inline-block;color:#a44430;border:1px solid #ad6c4d87;padding:0 7px;line-height:1.5;margin-left:12px}
#start .wanderer-card p{margin:4px 0 0}
#start .wanderer-card small{font-size:12px;color:#625744;line-height:1.5;display:block}
#start .home-path{border:0;padding:0;margin:12px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;min-width:0}
#start .home-path legend{font-size:12px;margin-bottom:6px;padding:0;width:100%}
#start .home-path legend>span{float:right;color:#776954;font-size:11px}
#start button[data-pick]{font-size:13px;padding:9px 11px;border:1px solid #ad96725c;border-radius:4px;background:#b9986020;letter-spacing:0;margin:0;min-height:44px;box-shadow:0 2px 2px #6650290d;text-align:left}
#start button[data-pick].on{border-color:#ad3c2b;background:#b9462920;box-shadow:inset 0 0 0 1px #ad3c2b55}
#start button[data-pick] small{display:block;color:#6d604c;font-size:11px;line-height:1.4;margin-top:4px}
#start button[data-pick]:disabled{cursor:not-allowed}
#start #legacy .row{margin:10px 0;gap:8px}
#start #legacy .row .k{width:100%;font-size:11px;color:#74664f;opacity:1}
/* 群 the Discord invite: the badge people expect, bottom left, in Discord's own blurple — the one thing on the page that is not ink */
#start #discord{position:fixed;left:20px;bottom:20px;z-index:12;display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:24px;background:#5865f2;color:#fff;text-decoration:none;font-size:14px;letter-spacing:.02em;box-shadow:0 4px 14px #1b1f3a3d}
#start #discord:hover{background:#4752c4}
#start #discord svg{width:22px;height:22px;flex:none}
@media(max-width:800px){#start #discord{left:12px;bottom:8px;padding:8px 13px;font-size:12px;gap:7px}#start #discord svg{width:18px;height:18px}}
#start .home-page{text-align:left;line-height:1.7;padding:0 5px 25px}
#start .home-page[hidden]{display:none}
#start .home-page h3{font-size:24px;font-weight:400;margin:0 0 20px}
#start .home-page p,#start .home-page dd{font-size:14px;color:#655b49}
#start .home-page dt{font-size:15px;color:#933c2c;margin-top:15px}
#start .home-page dd{margin:3px 0 0}
#start #home-levels{font-size:14px;color:#655b49;margin-bottom:20px}#start #home-levels div{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid #a13c2b22}#start #home-levels span:first-child{width:22px;color:#933c2c}#start #home-levels span:nth-child(2){min-width:0;overflow-wrap:anywhere}#start #home-levels span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
#start .home-back{border:0;border-bottom:1px solid #a13c2b66;color:#983929;padding:10px 0;background:transparent;font-size:14px}
#start .home-eyebrow{font-size:10px;letter-spacing:.15em;color:#9e3e2c}
#start .home-setting{display:flex;justify-content:space-between;font-size:14px}
#start .home-code{margin:8px 0}#start .home-code input{font:13px ui-monospace,Menlo,monospace;min-width:0;width:100%;text-align:left;border:0;padding:10px 12px;background:transparent;user-select:text}
#start .home-code button{border:0;border-left:1px solid #9a8c72;background:none;font-size:14px;padding:10px 14px;min-height:44px}
#start .home-code input[type=password]{font:14px inherit;letter-spacing:.12em}
#start .home-code:has(button:first-child) button{flex:1;border-left:0;border-radius:3px}#start .home-code button:first-child+button{border-left:1px solid #9a8c72;border-radius:0 3px 3px 0}
#start #login{color:#983929}
#start .home-link{border:0;border-bottom:1px solid #a13c2b66;color:#983929;background:transparent;font-size:inherit;padding:0;min-height:0}
#start #login-why{color:#983929}
#start #account-head{font-size:14px;margin:18px 0 0;color:#5d4c33}
#start #home-volume{width:100%;accent-color:#a43b2c;padding:0;margin:15px 0;height:30px}
#built{z-index:11;bottom:20px;right:28px;font-weight:400;padding:8px 15px}
@media(min-width:1400px){#start{padding-top:70px}#start .home-scroll{padding-top:32px}#start .home-heading>.home-seal{margin-bottom:17px}#start .home-rule{margin-top:20px;margin-bottom:25px}}
@media(max-width:1100px){#start .home-brand{left:22px;top:24px}#start .home-brand>div{font-size:52px}#start .home-brand>p{font-size:8px;letter-spacing:.2em}#start .home-nav{right:12px}#start .home-nav button{padding:8px 12px;font-size:13px}}
@media(max-width:800px){#start .home-brand{display:none}#start .home-nav{right:0;left:0;justify-content:center}#start{padding:73px 16px 60px;background-position:62% center}#start .home-scroll{padding:26px 30px}#built{position:fixed;font-size:10px;bottom:8px;right:12px}}
@media(max-width:480px){#start{padding:65px 10px 48px}#start .home-scroll{padding:24px 22px}#start h2{font-size:59px}#start .home-nav button{font-size:12px;padding:9px 11px;gap:6px;min-height:44px}#start .home-nav img{width:16px;height:16px}#start #play{font-size:19px}#start .wanderer-card{gap:10px;padding:8px}#start .wanderer-card strong{font-size:17px}#start .resting-badge{font-size:11px;margin-left:7px}}
@media(prefers-reduced-motion:reduce){#start button{transition:none}}

/* Three milestones, each retaining its own pair of choices. */
#start .home-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#start .home-path{display:flex;flex-direction:column;gap:8px;margin:10px 0 0}
#start .home-path legend{font-size:11px;margin-bottom:7px}
#start .home-path legend>span{display:none}
#start .home-path button{width:100%;text-align:center;font-size:12px;padding:9px 4px}
#start .home-path button small{display:none}
#start .home-brand{text-shadow:0 0 12px #eddfbf,0 0 30px #eddfbf}
#start .home-heading{line-height:1.25}
#start .home-heading h2{margin:0 0 5px}
#start .home-heading>.home-seal{margin-bottom:9px}
#start .home-rule{margin-top:14px;margin-bottom:20px}
@media(min-width:1400px){#start .home-scroll{padding-top:24px}#start .home-heading>.home-seal{margin-bottom:10px}}
@media(max-width:480px){#start .home-paths{grid-template-columns:1fr;gap:6px}#start .home-path{display:grid;grid-template-columns:1fr 1fr}#start .home-path button small{display:block;text-align:left}#start .home-path legend>span{display:inline}}
@media(min-width:801px){
  #start .home-heading h2{font-size:64px;line-height:1.1}
  #start .home-rule{margin:12px 0 16px}
  #start .home-scroll{padding-top:22px}
  #start .home-heading>.home-seal{margin-bottom:6px}
  #start .wanderer-portrait{height:70px;width:64px;background-size:256px 210px}
  #start .wanderer-card{margin-bottom:8px}
  #start .home-path button{min-height:40px;padding:7px 4px}
}
@media(pointer:coarse) and (min-width:481px){#start .home-path button small{display:block}}

/* Keep the composition compact; paper grows only when actual life choices need it. */
#start .home-scroll{width:min(100%,540px);padding:22px 42px 25px}
#start .home-heading h2{font-size:74px;line-height:1;margin:6px 0 9px;font-weight:400;letter-spacing:.02em}
#start .home-brand>div{font-size:clamp(64px,6.5vw,100px);letter-spacing:-.06em}
#start .home-heading>.home-seal{width:23px;height:27px;margin-bottom:0}
#start .home-rule{margin:17px 0 19px}
#start .home-form{max-width:370px}
#start #play{font-weight:400;font-size:21px;min-height:53px}
@media(min-width:801px) and (max-height:850px){
 #start{padding-top:56px;padding-bottom:14px}
 #start .home-scroll{padding-top:18px;padding-bottom:20px}
 #start .home-heading h2{font-size:64px;margin:3px 0 6px}
 #start .home-heading>.home-seal{height:23px}
 #start .home-rule{margin:12px 0 14px}
 #start #legacy{margin-top:12px}
}
@media(max-width:800px){#start .home-scroll{padding:23px 28px}#start .home-heading h2{font-size:68px}}
@media(max-width:480px){#start .home-scroll{padding:22px}#start .home-heading h2{font-size:62px}#start .home-brand{display:none}}
@media(min-width:801px) and (max-height:850px){
 #start:has(.wanderer-card) .home-heading h2{font-size:54px;margin:0 0 3px}
 #start:has(.wanderer-card) .home-heading>.home-seal{height:19px;font-size:10px}
 #start:has(.wanderer-card) .home-rule{margin:8px 0 10px}
 #start:has(.wanderer-card) .home-scroll{padding-top:15px;padding-bottom:16px}
 #start:has(.wanderer-card) #legacy{margin-top:7px}
 #start:has(.wanderer-card) .wanderer-card{padding-block:5px;margin-bottom:4px}
 #start:has(.wanderer-card) .wanderer-portrait{height:60px;width:55px;background-size:220px 180px}
 #start:has(.wanderer-card) .home-path{margin-top:5px;gap:6px}
 #start:has(.wanderer-card) .home-section-title{margin-bottom:6px}
}

/* The two-second read: what this is, then the name box. Everything else lives behind the nav. */
#start{display:flex;flex-direction:column}
#start .home-scroll{margin:auto}
#start .home-pitch{font-size:19px;line-height:1.4;margin:4px 0 6px;color:#2b2a26;text-wrap:balance}
#start .home-sub{font-size:12px;letter-spacing:.08em;color:#7a6c55}
#start #play{margin-top:14px}
#start .home-section-title{display:flex;gap:12px;align-items:center;margin:0 0 10px;font-size:15px;font-weight:400;white-space:nowrap}
#start .home-section-title::before,#start .home-section-title::after{content:"";height:1px;background:#94877080;flex:1}
@media(max-width:480px){#start .home-pitch{font-size:17px}}