/* Ink-painting skin: city. Loaded after every other stylesheet; overrides live here. */
:root{--cs-paper:#f3ecdc;--cs-ink:#2b2a2e;--cs-ink-soft:#5e5545;--cs-mute:#76694f;--cs-rule:#8f7d5c33;--cs-red:#a8402f;--cs-shadow:0 6px 22px #2a241a26}

/* ---- 1. City guide: a dark brush banner like the reference's objective, unrolling into a quiet paper list ---- */
#town-guide{width:284px;background:none;border:0;box-shadow:none;border-radius:0;color:var(--cs-ink);font:13px Georgia,'Songti SC',serif}
#town-guide>summary{position:relative;isolation:isolate;padding:13px 24px 13px 26px;gap:10px;color:#f4ecdc;font-size:15px;letter-spacing:.01em;background:none;border:0;text-shadow:0 1px 1px #0006}
#town-guide>summary::-webkit-details-marker{display:none}
#town-guide>summary::before{content:"";position:absolute;inset:0 -4px;z-index:-1;background:#26252ad9;-webkit-mask:url(/assets/game/ui/ui/home-brush.svg) center/100% 100% no-repeat;mask:url(/assets/game/ui/ui/home-brush.svg) center/100% 100% no-repeat}
#town-guide>summary>span{flex:none;padding:3px 4px 2px;font-size:11px;letter-spacing:.08em;line-height:1.2;color:#fbf1df;background:var(--cs-red);border-radius:2px;text-shadow:none}
#town-guide>summary small{margin-left:auto;font-size:0;width:7px;height:7px;border:solid #e9dcc2;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease-out}
#town-guide[open]>summary small{transform:translateY(2px) rotate(-135deg)}
#town-guide>summary:focus-visible{outline:2px solid var(--cs-red);outline-offset:3px}
#town-guide[open]{max-height:min(62dvh,600px);background:linear-gradient(#f5efe1f0,#efe6d2f0),url(/assets/game/ui/ui/xuan-paper.webp) center/600px;box-shadow:var(--cs-shadow);border-radius:2px;scrollbar-width:thin;scrollbar-color:#8f7d5c66 transparent}
#town-guide[open]>summary{background:#f1e9d8;border-bottom:0}
.town-intro{padding:8px 18px 4px;font-size:12px;font-style:italic;color:var(--cs-mute)}
.town-group{margin:0 14px;padding:9px 4px 3px;border-top:1px solid var(--cs-rule);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-mute)}
.town-option{gap:11px;margin:0;padding:6px 16px 6px 12px;border-top:0;color:var(--cs-ink);transition:background .15s ease-out}
.town-option>span:nth-child(2){font-size:14px;line-height:1.3}
.town-option small{margin-top:1px;font-size:11.5px;line-height:1.35;color:var(--cs-ink-soft)}
.town-glyph{display:grid;place-items:center;flex:none;width:30px;height:30px;font-size:17px;color:var(--cs-ink);background:radial-gradient(circle at 46% 44%,#8c857a55,#8c857a33 55%,#8c857a00 72%);border-radius:50%}
.town-walk{opacity:.45;color:var(--cs-red);transform:translateX(-4px);transition:opacity .15s,transform .2s ease-out}
.town-option:hover,.town-option:focus-visible{background:#2b2a2e0d;outline:none}
.town-option:hover .town-walk,.town-option:focus-visible .town-walk,.town-option.chosen .town-walk{opacity:1;transform:none}
.town-option.chosen{background:#a8402f12}
.town-option.chosen .town-glyph{color:#fbf1df;background:radial-gradient(circle at 46% 44%,#a8402f,#a8402fe0 58%,#a8402f00 72%)}
.town-foot{padding:12px 18px 6px;margin-top:6px;border-top:1px solid var(--cs-rule);font-size:11.5px;color:var(--cs-mute)}
.town-status{padding:0 18px 14px;font-size:12px;font-style:italic;color:var(--cs-red)}

/* the signs over the places: small paper tags with a cinnabar seal, a tick pointing down at the door */
.town-sign{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;padding:5px 11px 5px 6px;border:1px solid #8f7d5c55;border-radius:2px;background:#f6efdfee;box-shadow:0 3px 10px #29251c22;color:var(--cs-ink);font:13.5px Georgia,'Songti SC',serif;margin-top:-6px;text-align:left;transition:background .15s,color .15s}
.town-sign::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;margin-left:-4px;background:inherit;border:solid #8f7d5c55;border-width:0 1px 1px 0;transform:rotate(45deg)}
.town-sign span{grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;margin:0;font-size:13px;color:#fbf1df;background:var(--cs-red);border-radius:2px}
.town-sign small{margin-top:0;font-size:10.5px;color:var(--cs-mute)}
.town-sign:hover,.town-sign.chosen{background:#2b2a2ef0;border-color:#2b2a2e;color:#f4ecdc}
.town-sign:hover small,.town-sign.chosen small{color:#d9ccb2}
.town-sign:focus-visible{outline:2px solid var(--cs-red);outline-offset:2px}

@media(max-width:700px){
  #town-guide{right:10px;top:auto;bottom:236px;width:min(264px,calc(100vw - 84px))}
  #town-guide:not([open]){width:auto}
  #town-guide:not([open])>summary{padding:10px 20px 10px 20px;font-size:13px}
  #town-guide[open]{max-height:min(46dvh,400px)}
  .town-sign{font-size:12px;padding:4px 9px 4px 5px}.town-sign span{width:19px;height:19px;font-size:11px}.town-sign small{font-size:9.5px}
}
@media(min-width:1101px){.in-city #status{right:302px}}

/* ---- 2. Activities: one shared frame for every craft (the farm and the lake in #scene, the craft popup #game, the painter's desk) ----
   the place's own line is the reference's dark brush banner; the way back is a quiet outline; close is one round ink blot everywhere */
#scene .scene-bar{top:14px;border-width:0;padding:11px 16px 11px 30px;gap:18px;color:#f1e8d6;font-size:14px;letter-spacing:.01em;text-shadow:0 1px 1px #0006}
#scene .scene-bar::before{inset:-3px -14px;background:#26252ad9;clip-path:none;-webkit-mask:url(/assets/game/ui/ui/home-brush.svg) center/100% 100% no-repeat;mask:url(/assets/game/ui/ui/home-brush.svg) center/100% 100% no-repeat}
#scene .scene-hint b{position:relative;margin-right:2px;padding-left:18px;font-weight:400;color:#f0c7b6;letter-spacing:.06em}
#scene .scene-hint b::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-5px;background:var(--cs-red);border:1px solid #f0c7b6;transform:rotate(45deg)}
#scene .scene-bar .scene-leave{margin:0;padding:5px 14px;font-size:12.5px;letter-spacing:.03em;color:#f1e8d6;background:none;border:1px solid #f1e8d670;border-radius:999px;text-shadow:none;transition:background .15s,color .15s,border-color .15s}
#scene .scene-bar .scene-leave:hover,#scene .scene-bar .scene-leave:focus-visible{color:var(--cs-ink);background:#f1e8d6;border-color:#f1e8d6;outline:none}

/* the card that opens over a spot, and the craft popup: quiet paper, a seal-red title rule, soft ink buttons */
#scene .scene-card{padding:10px 16px 14px;font-size:13.5px;color:var(--cs-ink)}
#scene .scene-card h4{margin:0 0 6px;padding-bottom:6px;font-size:18px;letter-spacing:.06em;border-bottom:1px solid var(--cs-rule)}
#scene .scene-card p{opacity:1;color:var(--cs-ink-soft);font-size:12.5px;line-height:1.5}
#scene .scene-card button,#game .paper:not(.al-wide) button{margin:4px 4px 0 0;padding:6px 12px;font-size:12.5px;color:var(--cs-ink);background:#fbf6ea;border:1px solid #2b2a2e40;border-radius:2px;box-shadow:0 1px 2px #2a241a14;transition:border-color .15s,color .15s,background .15s}
#scene .scene-card button:not(:disabled):hover,#game .paper:not(.al-wide) button:not(:disabled):hover{color:var(--cs-red);border-color:var(--cs-red);background:#fffaf0}
#scene .scene-card button:disabled,#game .paper:not(.al-wide) button:disabled{opacity:.45;box-shadow:none}
#scene button:focus-visible,#game button:focus-visible{outline:2px solid var(--cs-red);outline-offset:2px}
#game{background:#22201c4d}
#game.over-scene{background:#22201c2e}
#game .paper:not(.al-wide){padding:16px 22px 18px}
#game h3{font-size:22px;letter-spacing:.12em;color:var(--cs-ink)}
#game .sub{margin-bottom:10px;font-size:12.5px;font-style:italic;opacity:1;color:var(--cs-ink-soft)}

/* close: a round grey ink blot like the reference's left-hand buttons, the same in every craft */
#game .close,#painting-overlay .painting-window .painting-close{display:grid;place-items:center;width:38px;height:38px;padding:0;font-size:0;letter-spacing:0;color:#f4ecdc;background:radial-gradient(circle at 46% 42%,#5f5b56,#4b4743 62%,#4b4743f0 70%);border:0;border-radius:50%;box-shadow:0 2px 6px #2a241a40;cursor:pointer;transition:background .15s,transform .15s}
#game .close::before,#painting-overlay .painting-window .painting-close::before{content:"×";font:300 24px/1 Georgia,serif;margin-top:-2px}
#game .close:hover,#painting-overlay .painting-window .painting-close:hover{background:var(--cs-red);color:#fff7ea}
#game .close{right:-6px;top:-8px}
#game .paper.al-wide .close{right:10px;top:8px}
@media(max-width:700px){
  #scene .scene-bar{top:10px;width:calc(100vw - 36px);max-width:calc(100vw - 36px);box-sizing:border-box;padding:9px 12px 9px 22px;gap:10px;font-size:12.5px;white-space:normal;line-height:1.35}
  #scene .scene-hint{flex:1;min-width:0}#scene .scene-bar .scene-leave{flex:none;padding:5px 10px;font-size:11.5px;white-space:nowrap}
  #game .close{right:-2px;top:-4px}
}

/* ---- 2b. Fishing: the lake's own pieces in the same frame — parchment slots like the reference hotbar, a hanging scroll for the title ---- */
#scene .fish-hud h4{font-weight:400;font-size:17px;letter-spacing:.12em;color:var(--cs-ink)}
#scene .fish-hud h4 small{font-size:11.5px;letter-spacing:.04em;opacity:1;color:var(--cs-mute)}
#scene .fh-bait h4 button{opacity:.5;font-size:20px;color:var(--cs-ink)}#scene .fh-bait h4 button:hover{opacity:1;color:var(--cs-red)}
#scene .fh-bait .fh-slots button,#scene .fh-dex .fh-slots span{background:#f7f1e3;border:1px solid #8f7d5c55;border-radius:2px;box-shadow:inset 0 0 10px #a08a6420}
#scene .fh-bait .fh-slots button:not(.on):hover{border-color:#2b2a2e88}
#scene .fh-bait .fh-slots button.on{border:1.5px solid var(--cs-red);background:#fbf3e6;box-shadow:inset 0 0 0 2px #fbf3e6,0 1px 4px #a8402f2e}
#scene .fh-bait .fh-slots i{right:2px;bottom:1px;font-size:10.5px;color:var(--cs-ink-soft);background:#f7f1e3e6;border-radius:2px}
#scene .fh-say{font-size:12px;opacity:1;color:var(--cs-ink-soft);font-style:italic}
#scene .fh-dex .unknown img{opacity:.12}
#scene .fish-hud em{opacity:.35;font-size:16px}
/* 漁趣: a narrow hanging scroll on the right, no hard block shadow */
#scene .fh-banner{right:22px;top:72px;padding:16px 9px 10px;background:linear-gradient(#f6efdfee,#efe6d2ee),url(/assets/game/ui/ui/xuan-paper.webp) center/400px;border:0;border-top:5px solid #3b3833;border-bottom:5px solid #3b3833;border-radius:1px;box-shadow:0 6px 18px #2a241a30}
#scene .fh-banner b{font-weight:400;font-size:38px;color:var(--cs-ink)}
#scene .fh-banner span{background:var(--cs-red);color:#fbf1df;font-size:10.5px}
/* Cast / Reel / Keep: square parchment slots, the key printed under like the hotbar's numbers */
#scene .fh-acts{right:22px;bottom:30px;gap:14px}
#scene .fh-acts button{width:84px;height:84px;border-radius:3px;border:1px solid #8f7d5c66;background:linear-gradient(#f6efdff2,#ece2cbf2);box-shadow:0 4px 12px #2a241a2e,inset 0 0 14px #a08a6424;transition:border-color .15s,transform .1s}
#scene .fh-acts button:hover{border-color:#2b2a2e99}
#scene .fh-acts button:active{background:#e4d8bd;transform:translateY(1px)}
#scene .fh-acts b{font-weight:400;font-size:15px;letter-spacing:.06em;color:var(--cs-ink)}
#scene .fh-acts kbd{left:auto;right:5px;bottom:auto;top:4px;transform:none;padding:0 4px;border:1px solid #8f7d5c55;border-radius:2px;background:#fbf6ea;font:11px Georgia,serif;color:var(--cs-ink-soft)}
@media(max-width:760px){
  #scene .fh-bait{top:88px}
  #scene .fh-acts{gap:10px;right:10px;bottom:30px}#scene .fh-acts button{width:64px;height:64px}#scene .fh-acts b{font-size:12.5px}
}

/* ---- 2c. Alchemy: the furnace bench in the same frame — quieter cards, a thin cinnabar rank line, one flat seal-red action ---- */
#game .alx{--line:#8f7d5c4d;--sheet:#fbf7ecc7}
#game .alx-card{background:#f8f2e4d6;border:1px solid #8f7d5c40;border-radius:2px;box-shadow:0 2px 10px #2a241a14}
#game .alx-card::before{opacity:.45}
#game .alx-card h3{font-size:12.5px;letter-spacing:.16em;color:var(--cs-ink-soft)}
#game .alx-head{background:#f6efe0b3;box-shadow:0 0 18px 12px #f6efe0b3}
#game .alx-lv i{height:5px;border:0;border-radius:3px;background:#2b2a2e1f}
#game .alx-lv i em{border-radius:3px;background:var(--cs-red)}
#game .alx-stats{opacity:1;color:var(--cs-ink-soft)}
#game .alx-tabs button{background:#efe6d38c;color:var(--cs-ink-soft)}
#game .alx-tabs button.on{background:#fbf7ec;color:var(--cs-red)}
#game .alx-el{background:#fbf7ecbf}
#game .alx-tile,#game .alx-page{border-radius:2px}
#game .alx-go{width:82%;padding:9px 0;font-size:18px;letter-spacing:.1em;color:#fbf1df;background:var(--cs-red);border:1px solid #7d2c1f;border-radius:2px;box-shadow:0 3px 10px #7d2c1f33}
#game .alx-go.fire{background:#a8662a;border-color:#6f420f;box-shadow:0 3px 10px #6f420f33}
#game .alx-go:disabled{opacity:1;filter:none;color:var(--cs-mute);background:#f3ecdccc;border:1px solid #8f7d5c66;box-shadow:none;cursor:default}
#game .alx-buy button{background:#fbf7ec;border-color:#8f7d5c80;border-radius:2px}
#game .alx-buy button:not(:disabled):hover{border-color:var(--cs-red);color:var(--cs-red)}
@media(max-width:700px){
  #game .paper.al-wide{padding:14px 12px}
  #game .alx-head{grid-template-columns:1fr;row-gap:6px;margin-right:52px;padding:2px 6px 6px 2px}
  #game .alx .alx-head h2{grid-row:auto;font-size:30px}
  #game .alx-lv{flex-wrap:wrap;gap:4px 10px;font-size:14px}#game .alx-lv i{flex-basis:100%;order:3}
  #game .alx-stats{gap:3px 14px;font-size:12px}
}

/* ---- 3. Chat and the voice: a lighter sheet, text-only channel tabs, one consistent serif; the voice a calm line on a wash, not letterspaced Latin ---- */
#log::before{opacity:.86;transition:opacity .2s}
#log:hover::before,#log:focus-within::before{opacity:1}
#log #lines div{opacity:1;color:var(--cs-ink-soft);font-size:12.5px}
#log #lines div b{color:var(--cs-red)}
#lines div[data-ch="clan"]{border-left-width:1px}
#chatrow{gap:8px;margin-top:6px;padding:2px 2px 3px;background:none;border-bottom:1px solid #2b2a2e2e;transition:border-color .2s}
#chatrow:focus-within{border-bottom-color:#2b2a2e80}
#who{font:11.5px Georgia,'Songti SC',serif;letter-spacing:.02em;padding:3px 2px}
#who::before{content:'';display:inline-block;width:5px;height:5px;margin:0 6px 1px 0;border-radius:50%;background:var(--cs-red);vertical-align:middle;font-size:0}
#chat{opacity:.75;font-family:Georgia,'Songti SC',serif}#chat::placeholder{color:#2b2a2e80;font-style:italic}
#send{opacity:.45}
#chtabs{gap:2px 14px;margin-top:6px;padding-left:2px}
#chtabs button{padding:3px 0 2px;font-size:12px;letter-spacing:.03em;color:var(--cs-ink-soft);background:none;border:0;border-bottom:1px solid transparent;border-radius:0;opacity:1}
#chtabs button:hover{color:var(--cs-red);background:none;border-color:#a8402f66}
#chtabs button.on{color:var(--cs-ink);background:none;border-color:var(--cs-red);box-shadow:none}
#chtabs button.unread{color:var(--cs-red);border-color:transparent}
#chtabs button:focus-visible{outline:1px solid var(--cs-red);outline-offset:2px}
#voice{max-width:min(760px,88vw);padding:18px 46px 16px;font-size:30px;letter-spacing:.03em;line-height:1.35;text-wrap:balance;text-shadow:0 0 2px #f3ecdc,0 0 10px #f3ecdc;background:radial-gradient(closest-side,#f3ecdcd9,#f3ecdc99 55%,#f3ecdc00)}
#voice::after{width:44px;height:2px;margin-top:14px;opacity:.8;background:var(--cs-red)}
@media(max-width:700px){#voice{font-size:21px;padding:12px 22px;max-width:86vw}}

/* ---- 4. Combat feedback: float over the fight like the reference HUD, no paper slabs over the world ---- */
/* boss: the name in ink over a cinnabar brush bar, the faces as three small seals, the numbers set under the bar */
#boss{z-index:12;opacity:1;width:340px}
#boss::before{display:none}
#boss .n{gap:10px;font-size:17px;color:var(--cs-ink);text-shadow:0 0 3px #f3ecdc,0 0 10px #f3ecdc,0 0 18px #f3ecdccc}
#boss .ph{display:inline-flex;gap:3px}
#boss .ph u{display:inline-grid;place-items:center;width:15px;height:15px;margin:0;font-size:9.5px;opacity:1;color:#8f7d5c;border:1px solid #8f7d5c80;border-radius:1px;background:#f3ecdccc;text-shadow:none}
#boss .ph u.on{color:#fbf1df;background:var(--cs-red);border-color:var(--cs-red)}
#boss .bar i{height:26px;width:100%;background:#2b2a2e40}
#boss .bar em{opacity:.92}
#boss .bar s{top:30px;height:auto;font-size:11.5px;color:var(--cs-ink-soft);text-shadow:0 0 3px #f3ecdc,0 0 8px #f3ecdc}
#boss .bar{padding-bottom:16px}
/* golems: a sub-objective line, as under the reference's banner */
#golems{border-width:0;padding:2px 0 2px 16px;font-size:13.5px;color:var(--cs-ink);text-shadow:0 0 3px #f3ecdc,0 0 10px #f3ecdc,0 0 16px #f3ecdc}
#golems::before{inset:50% auto auto 0;width:7px;height:7px;margin-top:-4px;background:var(--cs-red);clip-path:none;transform:rotate(45deg)}
/* downed: urgent, so it takes the reference's dark brush banner; the hint sits under it in italic */
#downed{z-index:12;top:27%;border-width:0;padding:14px 46px 13px;color:#f4ecdc;font-size:19px;letter-spacing:.16em;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 1px #0008}
#downed::before{inset:0 -6px;background:#26252ae6;clip-path:none;-webkit-mask:url(/assets/game/ui/ui/home-brush.svg) center/100% 100% no-repeat;mask:url(/assets/game/ui/ui/home-brush.svg) center/100% 100% no-repeat}
#downed small{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:8px;padding:4px 26px;font-size:12.5px;font-style:italic;letter-spacing:.02em;opacity:1;color:var(--cs-ink);text-shadow:0 0 3px #f3ecdc;background:radial-gradient(closest-side,#f3ecdcf2,#f3ecdcb3 60%,#f3ecdc00)}
/* the seal at the edge pointing to the hunt: a proper chop, double-ruled */
#sealArrow:not(.quest){padding:5px 6px;font-size:16px;border-radius:2px;background:var(--cs-red);box-shadow:inset 0 0 0 1.5px #a8402f,inset 0 0 0 2.5px #f3dccc,0 2px 6px #2a241a40}
/* the email ask: a small note — paper input on an ink rule, one seal-red action, a round close */
#email{padding:10px 16px 8px;color:var(--cs-ink)}
#email b{font-weight:400;font-size:15px;letter-spacing:.01em}
#email .row{gap:8px;margin:10px 0 6px}
#email input{padding:6px 2px;border:0;border-bottom:1px solid #2b2a2e66;background:transparent;font-size:13.5px}
#email input:focus{outline:none;border-bottom-color:var(--cs-red)}
#email button:not(.x){padding:5px 14px;color:#fbf1df;background:var(--cs-red);border:1px solid #7d2c1f;border-radius:2px}
#email button:not(.x):hover{background:#8e3426}
#email small{opacity:1;color:var(--cs-mute);font-style:italic;font-size:11.5px}
#email .x{right:-14px;top:-16px;width:26px;height:26px;padding:0;display:grid;place-items:center;font-size:12px;color:#f4ecdc;background:radial-gradient(circle at 46% 42%,#5f5b56,#4b4743 62%,#4b4743f0 70%);border-radius:50%;box-shadow:0 2px 5px #2a241a33}
#email .x:hover{background:var(--cs-red);color:#fff7ea}
#email button:focus-visible,#email input:focus-visible{outline:2px solid var(--cs-red);outline-offset:2px}
@media(max-width:700px){
  #boss{top:274px;width:min(320px,calc(100vw - 80px))}#boss .bar{padding-bottom:0}#boss .bar i{height:22px}#boss .bar s{top:4px;height:22px;display:flex;align-items:center;justify-content:center;color:#f4ecdc;text-shadow:0 0 3px #2b2a2ee6,0 0 2px #2b2a2ee6}
  #downed{top:55%;padding:12px 34px;font-size:17px}
  #downed small{white-space:normal;width:min(300px,86vw);box-sizing:border-box}
  #golems{top:auto;bottom:214px;left:56px}
}