/* Ink-painting skin: front. Loaded after every other stylesheet; overrides live here. */

/* ── Home ─────────────────────────────────────────────── */
/* About had Guide's mountain; give it the temple so the five destinations read apart. */
#start .home-nav [data-home="about"] img{content:url('/assets/game/ui/icons/temple.svg')}
#start .home-nav img{opacity:.82}
#start .home-nav button.active{color:#1f1e1c}
#start .home-nav button.active::after{height:2px;background:#ad3c2b;left:22px;right:22px;border-radius:2px}
/* The credit chip: a quiet ink label on paper, not a second cinnabar call to action. */
#built{background:#f4ead6d9;color:#3a352c;border:1px solid #8f806654;font-weight:400;letter-spacing:.04em;box-shadow:0 2px 6px #3428131f}
#built:hover{background:#f8f0de;color:#9c3528}
/* Phones: five destinations fit the width instead of running off both edges. */
@media(max-width:480px){
 #start .home-nav{gap:0;padding:4px 6px 0;justify-content:space-between;left:0;right:0}
 #start .home-nav img{display:none}
 #start .home-nav button{padding:9px 7px;font-size:13px;gap:0;flex:0 1 auto;justify-content:center}
 #start .home-nav button.active::after{left:7px;right:7px;bottom:2px}
}

/* ── Guide · Leaderboard · About ──────────────────────── */
/* On a reading page the masthead steps back: the title stays, the pitch goes, the page starts sooner. */
#start:has(#home-journey[hidden]) .home-heading .home-pitch,
#start:has(#home-journey[hidden]) .home-heading .home-sub{display:none}
#start:has(#home-journey[hidden]) .home-heading h2{font-size:46px;margin:2px 0 0}
#start:has(#home-journey[hidden]) .home-heading>.home-seal{height:21px;width:19px;font-size:11px}
#start:has(#home-journey[hidden]) .home-rule{margin:12px 0 20px}
#start .home-page{line-height:1.65}
#start .home-page h3{font-size:25px;line-height:1.25;color:#24231f;margin:0 0 10px;letter-spacing:.01em;text-wrap:balance}
#start .home-page h3+p{margin-top:0;color:#5f5544}
#start .home-page p,#start .home-page dd{color:#5c5242}
#start .home-page dl{margin:22px 0 26px}
#start .home-page dt{color:#2b2a2e;font-size:16px;margin-top:18px}
#start .home-page dd{margin:2px 0 0}
/* Guide: each topic carries its ink glyph in a pale wash, like the reference's ink-blot buttons. */
#home-guide dt{display:flex;align-items:center;gap:11px}
#home-guide dt::before{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--g) center/19px no-repeat,radial-gradient(circle at 45% 40%,#8f877a40,#8f877a24 62%,#8f877a00 72%)}
#home-guide dd{padding-left:43px}
#home-guide dt:nth-of-type(1){--g:url('/assets/game/ui/icons/mountain.svg')}
#home-guide dt:nth-of-type(2){--g:url('/assets/game/ui/icons/gather.svg')}
#home-guide dt:nth-of-type(3){--g:url('/assets/game/ui/icons/followers.svg')}
#home-guide dt:nth-of-type(4){--g:url('/assets/game/ui/icons/village.svg')}
#home-guide dt:nth-of-type(5){--g:url('/assets/game/ui/icons/life.svg')}
/* About: a quiet ledger of beasts, names in ink with a cinnabar tick, hairline between entries. */
#home-about dt{padding-top:16px;border-top:1px solid #8f806633;margin-top:16px;font-size:17px}
#home-about dt:first-child{border-top:0;padding-top:0}
#home-about dt::before{content:"";display:inline-block;width:6px;height:6px;margin:0 10px 3px 0;background:#ad3c2b;transform:rotate(45deg)}
#home-about p em{color:#2b2a2e}
/* Leaderboard: ink names, tabular levels, the top three marked with a cinnabar seal. */
#start #home-levels{margin:18px 0 24px;font-size:15px}
#start #home-levels div{align-items:center;padding:9px 2px;border-bottom:1px solid #8f806638}
#start #home-levels div:first-child{border-top:1px solid #8f806638}
#start #home-levels span:first-child{width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:#8a7d66;font-variant-numeric:tabular-nums}
#start #home-levels div:nth-child(-n+3) span:first-child{background:#ad3c2b;color:#f6e5c8;border-radius:2px;box-shadow:inset 0 0 0 1px #f6e5c855,0 1px 2px #5a1d1433}
#start #home-levels span:nth-child(2){color:#2b2a2e}
#start #home-levels div:first-child span:nth-child(2){font-size:16px}
#start #home-levels span:last-child{color:#4a4336;font-size:14px}
#start .home-back{margin-top:4px}
@media(max-width:480px){
 #start .home-page h3{font-size:22px}
 #start:has(#home-journey[hidden]) .home-heading h2{font-size:42px}
 #home-guide dd{padding-left:0}
}

/* ── Settings (home page and the in-game Controls tab) ── */
/* One ink slider for both: a hairline track, the filled part in thin cinnabar, a small seal-red thumb. */
#home-volume,#volume{-webkit-appearance:none;appearance:none;background:transparent;height:24px;cursor:pointer;--f:50%}
#home-volume::-webkit-slider-runnable-track,#volume::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#ad3c2b var(--f),#2b2a2e33 var(--f))}
#home-volume::-moz-range-track,#volume::-moz-range-track{height:3px;border-radius:2px;background:#2b2a2e33}
#home-volume::-moz-range-progress,#volume::-moz-range-progress{height:3px;border-radius:2px;background:#ad3c2b}
#home-volume::-webkit-slider-thumb,#volume::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-6px;border-radius:50%;background:#ad3c2b;border:2px solid #f6ecd8;box-shadow:0 1px 3px #3a1a1240}
#home-volume::-moz-range-thumb,#volume::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#ad3c2b;border:2px solid #f6ecd8;box-shadow:0 1px 3px #3a1a1240}
#home-volume:focus-visible,#volume:focus-visible{outline:2px solid #96362a;outline-offset:3px}

/* Home settings: three quiet groups divided by hairlines; labels in ink, help in small grey ink. */
#home-settings .home-setting{font-size:15px;color:#2b2a2e;margin-top:22px;padding-top:18px;border-top:1px solid #8f806638;align-items:baseline}
#home-settings h3+.home-setting{margin-top:16px;padding-top:0;border-top:0}
#home-settings .home-setting output{font-size:13px;color:#7a6c55;font-variant-numeric:tabular-nums}
#start #home-volume{margin:8px 0 2px;border:0;padding:0}
#home-settings p{font-size:13px;line-height:1.6;margin:6px 0 0;color:#6a5f4c}
#start .home-code{margin:10px 0 0;background:#fffaf140}
#start .home-code input{color:#2b2a2e;letter-spacing:.02em}
#start .home-code input::placeholder{font-family:Georgia,"Songti SC",serif;letter-spacing:0;color:#8a7d66}
#start .home-code button{color:#2b2a2e;min-width:84px;border-left-color:#9a8c7299}
#start .home-code button:hover{background:#ad3c2b14;color:#9c3528}
#home-settings #restore-why{color:#9c3528}
#home-settings .home-back{margin-top:24px}

/* In-game Controls tab: parchment keycaps, the rest note set apart, retire as a deliberate but quiet act. */
#drawer section[data-d="set"] .keys{gap:9px 14px;font-size:13px}
#drawer section[data-d="set"] .keys dd{opacity:1;color:#4f4739}
#drawer section[data-d="set"] .keys dd small{opacity:1;color:#8a7d66}
#drawer section[data-d="set"] kbd{font-size:10.5px;color:#2b2a2e;background:#fbf5e8;border:1px solid #2b2a2e59;border-bottom-width:2px;border-radius:3px;box-shadow:none;padding:2px 7px}
#drawer section[data-d="set"]>.soon{opacity:1;color:#6a5f4c;font-size:12.5px;margin:16px 0 0;padding:10px 0 0 26px;border-top:1px solid #2b2a2e1f;background:url('/assets/game/ui/icons/life.svg') 0 12px/16px no-repeat}
#drawer section[data-d="set"] .volume{font-size:13px;color:#2b2a2e;margin-top:14px;padding-top:12px;border-top:1px solid #2b2a2e1f;gap:14px}
#drawer section[data-d="set"] [data-retire]{align-self:flex-start;margin-top:16px;font-size:12px;padding:6px 14px;border-radius:3px;background:transparent;border:1px solid #ad3c2b99;color:#9c3528;letter-spacing:.04em}
#drawer section[data-d="set"] [data-retire]:hover{background:#ad3c2b;color:#fbf2e2;border-color:#ad3c2b}
/* Phones: the fixed Discord and credit badges sit over the bottom; leave room to scroll content clear of them. */
@media(max-width:800px){#start{padding-bottom:84px}}
@media(max-width:480px){
 #home-settings .home-setting{margin-top:14px;padding-top:12px}
 #home-settings p{margin-top:5px;line-height:1.5}
 #home-settings .home-back{margin-top:14px}
 #start:has(#home-journey[hidden]) .home-rule{margin:8px 0 14px}
}

/* ── Joining: the returning wanderer, the status line, and the centred choice card ── */
/* Returning: a round ink portrait like the HUD's, the level in cinnabar, resting in muted jade. */
#start .wanderer-card{background:#fffaf02e;border:1px solid #8f806638;border-radius:4px;padding:10px 14px;gap:16px}
#start .wanderer-card .wanderer-portrait{width:66px;height:66px;border-radius:50%;background:url('/assets/game/characters/wanderer-idle.webp') 1px -3px/256px 210px no-repeat,radial-gradient(circle at 48% 42%,#8f877a38,#8f877a1f 60%,#8f877a00 71%)}
#start .wanderer-card strong{font-weight:400;font-size:20px;color:#24231f;letter-spacing:.01em}
#start .wanderer-card p{color:#ad3c2b;font-size:14px;margin:2px 0 0}
#start .resting-badge{font-size:11px;letter-spacing:.06em;color:#4d6a54;border:1px solid #4d6a5466;border-radius:2px;padding:0 7px;line-height:1.6;vertical-align:3px;background:#4d6a540d}
#start .wanderer-card small{color:#6a5f4c}
/* The status line under the button: loading, connecting, failure. Legible, one small cinnabar mark. */
#start #last{font-size:13px;color:#8d392b;margin:8px 0 0;letter-spacing:.01em}
#start #last::before{content:"";display:inline-block;width:5px;height:5px;margin:0 8px 2px 0;background:currentColor;transform:rotate(45deg);opacity:.8}
/* The centred choice card (Lv 10 class, duels): the title is the reference's dark brush banner. */
#choice{z-index:20}
#choice .t{position:relative;isolation:isolate;display:inline-block;padding:8px 36px 9px;margin:2px 0 14px;color:#f4ead6;letter-spacing:.12em;font-size:15px}
#choice .t::before{content:"";position:absolute;inset:0;z-index:-1;background:#2b2a2e;mask:url('/assets/game/ui/ui/home-brush.svg') center/100% 100% no-repeat;-webkit-mask:url('/assets/game/ui/ui/home-brush.svg') center/100% 100% no-repeat}
#choice .opts{gap:14px;justify-content:center}
/* Portraits stand on one line and the names share a baseline, whatever head-room each sheet carries. */
#choice .opts:has(.por){display:grid;grid-auto-flow:column;grid-auto-columns:220px;grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:0}
#choice .opts:has(.por)>button{grid-row:span 3;display:grid;grid-template-rows:subgrid;align-content:start}
#choice .opts:has(.por) .por{align-self:end}
#choice .opts button{margin:0;border:1px solid #2b2a2e38;border-radius:4px;background:#fffaf03d;letter-spacing:.02em;transition:border-color .15s,background .15s,transform .15s}
#choice .opts button:hover{border-color:#ad3c2b;background:#ad3c2b0b;color:var(--ink);transform:translateY(-1px)}
#choice .opts button:hover b{color:#9c3528}
#choice .opts button:focus-visible{outline:2px solid #96362a;outline-offset:3px}
#choice .opts button b{font-size:18px;color:#24231f;letter-spacing:.03em}
#choice .opts button small{opacity:1;color:#544b3d;font-size:12.5px;line-height:1.55}
@media(max-width:700px),(max-height:500px){
 #choice{width:calc(100vw - 16px);max-height:80dvh;padding:8px 6px}
 #choice .t{font-size:13px;padding:7px 26px 8px;margin-bottom:10px}
 #choice .opts{flex-direction:row;gap:8px;align-items:stretch}
 #choice .opts:has(.por){grid-auto-columns:minmax(0,1fr);column-gap:8px}
 #choice .opts button{flex:1 1 0;width:auto;min-width:0;padding:8px 9px}
 #choice .opts button .por{transform:scale(.8);transform-origin:50% 100%;margin-bottom:0}
 #choice .opts button b{font-size:16px}
 #choice .opts button small{font-size:11.5px;line-height:1.45}
}

/* ── End of life: the outcome comes first, then the next journey ── */
#start .home-form:has(#last .end){display:flex;flex-direction:column}
#start #last:has(.end){order:-1;margin:-4px 0 18px;padding:0 10px 16px;border-bottom:1px solid #8f806645;color:#4f4739;font-size:13.5px;line-height:1.7}
#start #last:has(.end)::before{display:none}
#start #last .end{display:block}
#start #last .end::before{display:block;width:30px;height:34px;margin:0 auto 8px;writing-mode:vertical-rl;font:14px/1.05 "Songti SC","Kaiti SC",serif;display:flex;align-items:center;justify-content:center;border-radius:2px;box-shadow:inset 0 0 0 1px #f6e5c855}
#start #last .end[data-end="fell"]::before{content:"殁";background:#2b2a2e;color:#efe6d3}
#start #last .end[data-end="retired"]::before{content:"歸";background:#ad3c2b;color:#f6e5c8}
#start #last .end b{display:block;font:400 27px/1.2 Georgia,"Songti SC",serif;color:#24231f;letter-spacing:.04em;text-transform:capitalize;margin-bottom:4px}
#start #last .end i{font-style:normal;color:#8f8066}
#start #last .end em{font-style:normal;color:#9c3528;white-space:nowrap}
/* Legacy carried over: one quiet ledger line. */
#start #legacy>.row:first-child:has(b){display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;justify-content:center;font-size:13px;color:#4f4739}
#start #legacy>.row:first-child:has(b) .k{width:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
#start #legacy>.row:first-child b{font-weight:400;font-size:17px;color:#9c3528;font-variant-numeric:tabular-nums}