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

/* ── 1. identity: a round ink portrait, the level and name, and a thin cinnabar life line, floating in the top-left corner ── */
body:has(#stats:not([hidden])) #title{display:none}   /* in play the corner belongs to the portrait; the painted title is the start screen's */
#stats{left:18px;right:auto;top:14px;transform:none;margin:0;width:auto;max-width:calc(100vw - 36px);border:0;padding:0;gap:14px;align-items:center;flex-wrap:nowrap;font-size:13px;line-height:1.35;text-shadow:0 0 6px rgba(239,230,211,.95),0 0 2px rgba(239,230,211,.9)}
#stats::before{inset:-26px -60px -26px -40px;clip-path:none;background:linear-gradient(90deg,rgba(239,232,214,.8) 0%,rgba(239,232,214,.72) calc(100% - 64px),rgba(239,232,214,0) 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%)}
#stats .por{position:relative;flex:none;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 50% 46%,#f3ecdb 0 52%,rgba(214,205,186,.95) 60%,rgba(120,112,102,.55) 66%,rgba(43,42,46,.18) 71%,rgba(43,42,46,0) 74%);box-shadow:none;overflow:hidden}
#stats .por::before{content:"";position:absolute;left:50%;top:5px;width:42px;height:61px;transform:translateX(-50%);background:url(/assets/game/characters/wanderer-idle.webp) 0 0/168px 183px no-repeat}
#stats .col{min-width:0;flex:none;gap:3px}
#stats .l1{font-size:17px;line-height:1.25;letter-spacing:.03em}
#stats .l1 b{color:var(--red);font-weight:400;margin-right:10px}
#stats .bar{gap:10px;font-size:12px;opacity:1;color:#4a4540}
#stats .bar i{flex:none;width:184px;height:5px;background:rgba(43,42,46,.16)}
#stats .bar i.hpm{background:rgba(43,42,46,.22)}
#stats #s-xpbar i{height:3px}
#stats #s-xpbar{font-size:11px;color:#6b6358}
#stats .bar span{min-width:0;text-align:left;letter-spacing:.02em}
#stats .beginner-status{font-size:11px;color:#4f6645;margin-top:1px}

/* ── 2. resources: a quiet line beside the name — small painted icon, the count, its name in small type — no slab of its own.
   It keeps to the top 60px, so an open drawer (its paper starts ~80px down) never lands on it ── */
#stats{flex-wrap:nowrap;row-gap:0}
#stats .res{flex:none;align-self:flex-start;margin:6px 0 0 18px;padding-left:18px;border-left:1px solid rgba(43,42,46,.16);gap:0 16px;font-size:13px;line-height:1.2}
#stats .resource{gap:5px}
#stats .resource-art{width:26px;height:26px}
#stats .resource-art-renown{background-size:17px}
#stats .resource-detail{line-height:1.15}
#stats .resource-detail small{font-size:9px;letter-spacing:.06em;color:#6b5e48}
#stats .resource-band{border-left:0;padding-left:0;position:relative}
#stats .resource-band::before{content:"";position:absolute;left:-9px;top:5px;bottom:5px;width:1px;background:rgba(43,42,46,.22)}
#stats .res .full{color:var(--red)}

/* ── 3. left rail: round grey ink blots with paper-white icons; the name shows beside a blot on hover or while its panel is open ── */
#rail{left:20px;top:32%;width:auto;border:0;padding:0;display:flex;flex-direction:column;gap:14px;z-index:5}
#rail::before{content:none}
#rail .tab{width:46px;height:46px;padding:0;gap:0;justify-content:center;opacity:1;color:var(--ink);border-radius:50%;isolation:isolate;background:none;transition:transform .15s}
#rail .tab::before{content:"";position:absolute;inset:-3px;z-index:-1;background:radial-gradient(circle at 42% 38%,#6a686c 0%,#58565a 45%,#4a484c 100%);opacity:.86;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='10' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cellipse cx='50' cy='50' rx='41' ry='39' filter='url(%23f)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='10' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cellipse cx='50' cy='50' rx='41' ry='39' filter='url(%23f)'/%3E%3C/svg%3E") center/100% 100% no-repeat;transition:opacity .15s,background .15s}
#rail .tab:nth-child(2)::before{transform:rotate(70deg)}#rail .tab:nth-child(3)::before{transform:rotate(150deg) scaleX(-1)}#rail .tab:nth-child(4)::before{transform:rotate(215deg)}#rail .tab:nth-child(5)::before{transform:rotate(290deg) scaleY(-1)}#rail .tab:nth-child(6)::before{transform:rotate(30deg) scaleX(-1)}
#rail .tab:hover::before,#rail .tab:focus-visible::before{opacity:1}
#rail .tab:focus-visible{outline:2px solid var(--red);outline-offset:3px}
#rail .tab img{width:22px;height:22px;filter:invert(94%) sepia(10%) saturate(260%) hue-rotate(4deg) brightness(102%);opacity:.95}
#rail .tab span{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);writing-mode:horizontal-tb;font-size:12px;letter-spacing:.08em;text-transform:none;white-space:nowrap;padding:3px 10px;color:var(--paper);background:rgba(43,42,46,.88);border-radius:2px;opacity:0;pointer-events:none;transition:opacity .15s}
#rail .tab:hover{color:var(--ink);transform:scale(1.05)}
#rail .tab:hover span,#rail .tab:focus-visible span,#rail .tab.on span{opacity:1}
#rail .tab.on{color:var(--ink);box-shadow:0 0 0 3px rgba(239,230,211,.8),0 0 0 4.5px var(--red)}
#rail .tab.on::before{background:#232226;opacity:.97}
#rail .tab.on span{background:var(--red)}
#rail .tab.quest{outline:0;animation:none;box-shadow:0 0 0 3px rgba(239,230,211,.8),0 0 0 4.5px var(--red);animation:railquest 1.4s ease-in-out infinite}
@keyframes railquest{0%,100%{box-shadow:0 0 0 3px rgba(239,230,211,.8),0 0 0 4.5px rgba(179,56,43,1)}50%{box-shadow:0 0 0 3px rgba(239,230,211,.8),0 0 0 4.5px rgba(179,56,43,.25)}}
@media (prefers-reduced-motion:reduce){#rail .tab.quest{animation:none}}
#rail .tab.todo:after{top:1px;right:1px;width:9px;height:9px;box-shadow:0 0 0 2px var(--paper)}

/* ── 4. the objective: a dark brush-stroke banner in the top-right corner, a diamond seal at its head, and the small line of detail under it on the bare scroll ── */
body:not(.x-hud) #tut{left:auto;right:22px;top:18px;bottom:auto;transform:none;width:auto;max-width:min(480px,calc(100vw - 44px));box-sizing:border-box;border:0;padding:0;font-size:15px;line-height:1.35;letter-spacing:.02em;color:var(--ink);text-shadow:0 0 6px rgba(239,230,211,.95),0 0 2px rgba(239,230,211,.9);z-index:6}
body:not(.x-hud) #tut::before{content:none}
body:not(.x-hud) #tut:not(.collapsed) .quest-label{display:none}
body:not(.x-hud) #tut .tut-body{display:flex;flex-direction:column;align-items:flex-start}
/* the banner itself: one stroke of ink under the line that says what to do */
body:not(.x-hud) #tut:not(.record) .t,#tut.record .record-name{position:relative;isolation:isolate;color:#f3ecdc;text-shadow:none}
body:not(.x-hud) #tut:not(.record) .t{display:block;padding:12px 34px 12px 50px;min-height:24px}
body:not(.x-hud) #tut:not(.record) .t::before,#tut.record .record-name::before{content:"";position:absolute;inset:0 -6px 0 -10px;z-index:-1;background:rgba(33,32,36,.93);-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}
/* the seal at the banner's head: a paper diamond with the glyph standing upright in it */
body:not(.x-hud) #tut:not(.record) .t>b:first-child,#tut.record .record-seal{position:absolute;left:12px;top:50%;width:26px;height:26px;margin:0;padding:0;transform:translateY(-50%);display:grid;place-items:center;background:none;border:0;border-radius:0;color:var(--ink);font-size:13px;font-weight:400;line-height:1;opacity:1;z-index:0}
body:not(.x-hud) #tut:not(.record) .t>b:first-child::before,#tut.record .record-seal::before{content:"";position:absolute;inset:4px;z-index:-1;background:#efe6d3;transform:rotate(45deg);box-shadow:0 0 0 2px rgba(33,32,36,.93),0 0 0 3px rgba(239,230,211,.55)}
body:not(.x-hud) #tut .t .qi{filter:invert(1);opacity:.75}
body:not(.x-hud) #tut .t .por{vertical-align:-6px}
body:not(.x-hud) #tut .sub{margin:7px 0 0 26px;font-size:13px;line-height:1.5;opacity:1;color:#3d3832}
body:not(.x-hud) #tut .sub:not(:empty)::before{content:"";display:inline-block;width:5px;height:5px;margin:0 8px 2px -13px;border-radius:50%;background:var(--ink);vertical-align:middle}
/* a creature goal: the same banner — 圖, the name, its country — and the paces under it */
#tut.record{width:auto;border:0;padding:0;line-height:1.35}
#tut.record .t{display:block;padding:0;max-width:100%}
#tut.record .record-entry{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:100%;min-height:0;column-gap:0}
body:not(.x-hud) #tut .tut-body>*{max-width:100%;box-sizing:border-box}
#tut.record .record-name{display:block;max-width:100%;box-sizing:border-box;padding:12px 34px 12px 50px;white-space:normal;color:#f3ecdc}
#tut.record .record-name strong{margin:0 4px 0 6px!important}
#tut.record .record-seal{top:23px;font-size:12px;z-index:2}
#tut.record .record-hanzi{display:inline;font-size:18px;letter-spacing:.06em;font-weight:400;line-height:1.2}
#tut.record .record-name strong{display:inline;margin:0;font-size:13px;font-weight:400;letter-spacing:.1em}
#tut.record .record-note{display:inline;margin:0;font-size:15px;color:rgba(243,236,220,.86)}
#tut.record .record-note::before{content:"· ";}
#tut.record .record-art{display:none}
#tut.record .record-foot{display:flex;align-items:center;gap:8px;margin:7px 0 0 26px;padding:0;border:0;font-size:13px;letter-spacing:.03em;color:#3d3832}
#tut.record .record-foot>span::before{content:"";display:inline-block;width:5px;height:5px;margin:0 8px 2px -13px;border-radius:50%;background:var(--ink);vertical-align:middle}
#tut.record .record-arrow{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:4px;padding:0 0 2px;border-radius:50%;background:rgba(43,42,46,.82);color:#f3ecdc;font:17px/1 Georgia,serif;text-shadow:none;transition:background .15s,transform .15s}
#tut.record .record-arrow:hover,#tut.record .record-arrow:focus-visible{background:var(--red);color:#f3ecdc}
#tut.record.expanded .record-arrow{transform:rotate(90deg)}
#tut.record .record-extra{margin:4px 0 0 26px;max-width:360px;font-size:12px;color:#4b443a}
#tut.record.expanded .sub:not(:empty){margin-left:26px}
/* shut, the banner folds to its seal: a small ink chip with the arrow that opens it again */
body:not(.x-hud) #tut.collapsed{width:auto;padding:0;opacity:.9}
body:not(.x-hud) #tut.collapsed .quest-label{display:block;position:relative;isolation:isolate;width:34px;height:30px;margin:0;color:#f3ecdc;text-shadow:none}
body:not(.x-hud) #tut.collapsed .quest-label::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(33,32,36,.9);-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}
body:not(.x-hud) #tut.collapsed .quest-label::after{content:'▾';display:block;width:100%;height:100%;line-height:30px;font-size:14px;text-align:center;margin:0}
body:not(.x-hud) #tut .sub:not(:empty),#tut.record .record-foot,#tut.record.expanded .record-extra{background:rgba(239,232,214,.74);box-shadow:0 0 10px 6px rgba(239,232,214,.74);border-radius:10px}
#tut.record .record-foot{padding:1px 4px 1px 0}
body:not(.x-hud) #notices{bottom:118px}
body:has(#tut:not([hidden]):not(.collapsed)) #status{top:132px}

/* ── 5. hotbar: six square parchment tiles straight on the scroll — ink art inside, the count in its corner, the key number under it ── */
#hotbar{bottom:34px;gap:10px;border:0;padding:0;align-items:flex-start}
#hotbar::before{content:none}
#hotbar .hb{width:60px;height:60px;padding:7px;gap:0;overflow:visible;border:1px solid color-mix(in srgb,var(--tc,#8f877a) 55%,#cfc6b4);border-radius:4px;background:linear-gradient(160deg,#ece4d2 0%,#e2d9c5 100%);box-shadow:inset 0 0 0 1px rgba(255,252,243,.45),inset 0 -6px 12px rgba(120,104,80,.12),0 2px 5px rgba(43,42,46,.18)}
#hotbar .hf img,#hotbar .hf svg{filter:none}
#hotbar .hl{position:static;height:0;margin:0;padding:0;border:0}
#hotbar .hl .k{position:absolute;left:3px;top:calc(100% + 5px);font-size:12px;line-height:1;color:#4a4540;text-shadow:0 0 4px rgba(239,230,211,.95),0 0 2px rgba(239,230,211,.9)}
#hotbar .hl .u{position:absolute;right:4px;bottom:2px;font-size:13px;line-height:1;color:var(--ink);text-shadow:0 0 3px #ece4d2,0 0 2px #ece4d2}
#hotbar .hb:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:inset 0 0 0 1px rgba(255,252,243,.45),0 6px 12px rgba(43,42,46,.24)}
#hotbar .hb.empty{border-style:solid;border-color:rgba(160,150,132,.55);background:rgba(232,224,207,.72);box-shadow:inset 0 0 0 1px rgba(255,252,243,.35)}
#hotbar .hb.empty .hf{position:relative}
#hotbar .hb.empty .hf::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);background:linear-gradient(rgba(110,102,92,.55),rgba(110,102,92,.55)) center/100% 1.5px no-repeat,linear-gradient(rgba(110,102,92,.55),rgba(110,102,92,.55)) center/1.5px 100% no-repeat}
#hotbar .hb.empty .hl .k{color:#6b6358}
#hotbar .cd{border-radius:3px}

/* ── 6. minimap: the unrolled scroll — warm paper map feathered into the mount, a plain serif N in its corner ── */
#mini{right:22px;bottom:22px;border-width:16px 22px;border-image-width:16px 22px}
#mini canvas{width:clamp(240px,21vw,310px);box-shadow:none;filter:sepia(.2) saturate(.9) contrast(1.06);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7px,#000 calc(100% - 7px),transparent 100%),linear-gradient(180deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 7px,#000 calc(100% - 7px),transparent 100%),linear-gradient(180deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);mask-composite:intersect}
#mini .n{top:4px;right:9px;font-size:0;opacity:1}
#mini .n::before{content:"N";font-size:15px;letter-spacing:0;color:var(--ink);text-shadow:0 0 4px rgba(239,230,211,.95)}
#mini.big canvas{width:min(88vw,1240px)}

/* ── 7. the tutorial is the same banner: the step in ink, 'Step n of 13' and Skip under it — no slab over the world ── */
/* keys and words to press inside the banner: a small cinnabar tag, not a fat pill */
#tut .t>b:not(:first-child){display:inline;white-space:nowrap;margin:0 2px;padding:1px 6px 2px;border-radius:2px;background:rgba(179,56,43,.92);color:#f6efe0;font-size:.9em;letter-spacing:.04em;line-height:1.6;vertical-align:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
body:not(.x-hud) #tut .dots{order:2;margin:7px 0 0 26px;font-size:12px;letter-spacing:.05em;opacity:1;color:#4b443a;padding:1px 6px 1px 0;background:rgba(239,232,214,.74);box-shadow:0 0 10px 6px rgba(239,232,214,.74);border-radius:10px}
body:not(.x-hud) #tut{display:flex;flex-direction:column;align-items:flex-start}
body:not(.x-hud) #tut .tut-body{order:1}
body:not(.x-hud) #tut .skip{order:3;position:static;float:none;align-self:flex-end;margin:-18px 4px 0 0;padding:2px 4px;border:0;background:none;font:12px/1.2 Georgia,"Songti SC",serif;letter-spacing:.04em;color:#6b6358;opacity:1;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(43,42,46,.3);cursor:pointer}
body:not(.x-hud) #tut .skip:hover,body:not(.x-hud) #tut .skip:focus-visible{color:var(--red)}
body:not(.x-hud) #tut .skip[hidden]{display:none}
#tut.collapsed .skip{display:none}
/* an open panel sits over the middle: the banner keeps to the gutter beside it, above it rather than under its paper — and where there is no gutter it steps aside */
body:has(#drawer:not([hidden])) #tut,body:has(#character:not([hidden])) #tut,body:has(#shop:not([hidden])) #tut,body:has(#market:not([hidden])) #tut{z-index:18;max-width:calc((100vw - clamp(min(96vw,620px),46vw,96vw)) / 2 - 44px)}
@media(max-width:1250px){body:has(#drawer:not([hidden])) #tut,body:has(#character:not([hidden])) #tut,body:has(#shop:not([hidden])) #tut,body:has(#market:not([hidden])) #tut{visibility:hidden}}
body:has(#classpick:not([hidden])) #tut,body:has(#game:not([hidden])) #tut{visibility:hidden}
/* toasts: one quiet line of ink across the scroll, a short cinnabar stroke under it */
#toast{top:26%;max-width:min(80vw,760px);text-align:center;font-size:21px;line-height:1.5;letter-spacing:.14em;color:var(--ink);text-shadow:0 0 10px var(--paper),0 0 20px var(--paper),0 0 3px var(--paper)}
#toast::after{content:"";display:block;width:2em;height:1.5px;margin:10px auto 0;background:var(--red);opacity:.7}
#toast:empty::after{content:none}
/* notices: a slim paper slip each, no torn sheet */
#notices div{border:0;padding:4px 14px;font-size:13px;color:var(--ink);background:rgba(241,234,218,.92);box-shadow:0 0 0 1px rgba(43,42,46,.14),0 2px 8px rgba(43,42,46,.12);border-radius:2px}
#notices div::before{content:none}
#tip{background:rgba(243,237,224,.97);border:1px solid rgba(43,42,46,.2);border-radius:2px;box-shadow:0 3px 10px rgba(43,42,46,.16);padding:5px 10px}
@media(max-width:700px),(max-height:500px){
  #stats{left:10px;right:10px;top:8px;gap:4px 10px;flex-wrap:wrap;border:0}
  #stats .res{border-left:0;padding-left:0;align-self:auto}
  #stats .por{display:block;width:48px;height:48px;align-self:flex-start}
  #stats .por::before{top:4px;width:30px;height:44px;background-size:120px 131px}
  #stats::before{inset:-12px -12px -16px -12px}
  #stats .res{flex:1 1 100%;margin:4px 0 0;gap:0 4px;justify-content:space-between;font-size:12px}
  #stats .resource{gap:3px}#stats .resource-art{width:20px;height:20px}#stats .resource-art-renown{background-size:14px}
  #stats .resource-band::before{left:-3px}
  #rail{top:128px;left:8px;width:auto;padding:0;gap:10px}
  #rail .tab{width:38px;height:38px;padding:0}#rail .tab img{width:19px;height:19px}
  #rail .tab span,#rail .tab[data-d="bag"] span{display:block;font-size:11px;letter-spacing:.06em}
  body:not(.x-hud) #tut{top:116px;right:8px;left:auto;max-width:calc(100vw - 66px)}
  #tut.record .record-name{padding-right:18px}
  body:not(.x-hud) #notices{bottom:100px}
  #stats .col{flex:1 1 0;min-width:0;flex-direction:column;flex-wrap:nowrap;gap:2px}
  #stats .l1{flex:none;font-size:15px}
  #stats .bar{flex:none}#stats .bar i{width:min(150px,40vw)}
  #hotbar{bottom:14px;gap:6px;padding:4px 6px 18px}#hotbar::before{content:"";inset:-6px -8px -4px;clip-path:none;border-radius:6px;background:#ece5d4 url(/assets/game/ui/ui/xuan-paper.webp) center/560px;box-shadow:0 -1px 8px rgba(43,42,46,.18)}#hotbar .hb{width:48px;height:48px;padding:5px}#hotbar .hl .k{font-size:11px;top:calc(100% + 3px)}#hotbar .hl .u{font-size:11px}
  #mini{right:6px;bottom:188px;border-width:12px 17px;border-image-width:12px 17px}#mini canvas{width:180px;height:72px}#mini .n::before{font-size:12px}
  body:has(#drawer:not([hidden])) #tut,body:has(#character:not([hidden])) #tut,body:has(.shop:not([hidden])) #tut,body:has(#choice:not([hidden])) #tut{visibility:hidden}
  #toast{font-size:16px;letter-spacing:.08em}
}
/* a phone on its side: portrait and resources to the top-left, the banner top-right, the blots down the left beside the chat, the rack between the chat and the map */
@media(max-height:500px){
  #stats{right:auto;width:auto;max-width:calc(100vw - 410px)}
  #stats .res{justify-content:flex-start;gap:0 12px}
  body:not(.x-hud) #tut{top:8px;right:8px;max-width:370px}
  #rail{top:112px;gap:6px}#rail .tab{width:32px;height:32px}#rail .tab img{width:16px;height:16px}
  #log{left:48px;width:min(260px,calc(100vw - 600px))}
  #hotbar{left:auto;right:200px;transform:none}
  #mini{right:6px;bottom:6px}#mini canvas{width:150px;height:60px}
}
/* An open drawer or sheet docks right beside the rail: its tab's label would only peek out from under it. */
body:has(#drawer:not([hidden])) #rail .tab.on span,body:has(#character:not([hidden])) #rail .tab.on span{opacity:0}