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

/* ── 1. the drawer frame ─────────────────────────────────────────────────────
   The rail's drawer is no longer a centred slab over the world: it is a sheet of xuan paper
   docked beside the rail, sized to its task, with the world left open to its right.
   Its edge is the same deckled mask the home screen uses; its title sits on a dark brush stroke,
   the way the objective banner does in the HUD. */
:root{--dw-paper:#f1eadb;--dw-ink:#2b2a2e;--dw-line:rgba(43,42,46,.14);--dw-left:84px;--dw-top:96px}
#drawer{left:var(--dw-left);top:var(--dw-top);transform:none;border:0;box-sizing:border-box;
  width:min(600px,calc(100vw - var(--dw-left) - 16px));height:min(640px,calc(100dvh - var(--dw-top) - 132px));
  padding:22px 24px 22px 26px;filter:drop-shadow(0 10px 18px rgba(52,40,26,.2)) drop-shadow(0 1px 1px rgba(52,40,26,.18))}
#drawer::before{inset:0;clip-path:none;
  background:linear-gradient(rgba(244,238,224,.86),rgba(239,232,214,.9)),url(/assets/game/ui/ui/xuan-paper.webp) center/560px,var(--dw-paper);
  -webkit-mask:url(/assets/game/ui/ui/home-paper-edge.svg) 0 0/100% 100% no-repeat;mask:url(/assets/game/ui/ui/home-paper-edge.svg) 0 0/100% 100% no-repeat}
/* a hair of ink inside the deckle, so the sheet reads as mounted rather than cut out */
#drawer::after{content:"";position:absolute;inset:9px 10px;border:1px solid rgba(43,42,46,.1);pointer-events:none;z-index:-1}

/* close: a small round ink blot like the HUD's own icon buttons, not a red stamped box */
#drawer>.close{position:absolute;right:16px;top:16px;width:30px;height:30px;padding:0;display:grid;place-items:center;
  border:0;border-radius:50%;background:#e4ddcd;box-shadow:0 0 0 4px rgba(241,234,219,.9);color:var(--dw-ink);font-size:13px;letter-spacing:0;line-height:1;z-index:2;transition:background .15s,color .15s}
#drawer>.close:hover{background:var(--dw-ink);color:var(--dw-paper)}
#drawer>.close:focus-visible{outline:1.5px solid var(--red);outline-offset:2px}

/* the section's title on a brush stroke */
#drawer section>h4:first-child{position:relative;isolation:isolate;align-self:flex-start;margin:0 0 14px -8px;padding:7px 30px 7px 18px;
  font-size:14px;letter-spacing:.2em;opacity:1;color:#f3ede0;line-height:1.2}
#drawer section>h4:first-child::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(36,34,38,.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}
#drawer h4.top{font-size:11px;letter-spacing:.2em;opacity:.7;margin-top:18px;padding-bottom:5px;border-bottom:1px solid var(--dw-line)}

/* a page with nothing to scroll between (the controls) is only as tall as its words */
#drawer[data-d="set"]{height:auto;max-height:min(640px,calc(100dvh - var(--dw-top) - 132px))}
#drawer>.shop-body{padding-right:0}
/* every scrolling column dissolves into the paper at its foot, so a cut-off row reads as "more below";
   the padding lets the last row scroll clear of the fade */
#drawer section:not(.two),#drawer .two-bar>div{-webkit-mask:linear-gradient(#000 calc(100% - 22px),transparent);mask:linear-gradient(#000 calc(100% - 22px),transparent);padding-bottom:22px}
#drawer[data-d="set"] section{-webkit-mask:none;mask:none;padding-bottom:0}
/* with the drawer open, the hunt card and the notices step out from under it into the open world beside it */
@media (min-width:641px){
  body:has(#drawer:not([hidden])) #notices{left:calc(var(--dw-left) + min(600px,calc(100vw - var(--dw-left) - 16px)) + 28px);transform:none;align-items:flex-start}
}
#drawer .bar-detail{border-left-color:var(--dw-line)}
#drawer ::selection{background:rgba(179,56,43,.18)}

@media (max-width:640px){
  :root{--dw-left:8px;--dw-top:118px}
  #drawer{width:calc(100vw - 16px);height:calc(100dvh - var(--dw-top) - 96px);padding:18px 16px 18px 18px}
  #drawer>.close{right:10px;top:10px}
}

/* ── 2. quests ───────────────────────────────────────────────────────────────
   Three questlines are a choice of three, not a column: they sit across the top as ink tabs,
   and the steps below take the sheet's whole width. Steps read as a brushed checklist —
   done is a washed ink disc, the step at hand is the one cinnabar seal on the page. */
#quest-panel .two-bar{flex-direction:column;gap:0}
#quest-panel .two-bar>.bar-list{flex:none;display:flex;gap:4px;overflow:visible;border-bottom:1px solid var(--dw-line);padding:0;-webkit-mask:none;mask:none}
#quest-panel .pick-row{flex:1 1 0;justify-content:center;gap:10px;padding:8px 10px 9px;margin-bottom:-1px;border-left:0;border-bottom:2px solid transparent;
  font-size:14px;letter-spacing:.04em;background:none;color:rgba(43,42,46,.62)}
#quest-panel .pick-row>span{flex:none}
#quest-panel .pick-row em{font-size:12px;opacity:.75}
#quest-panel .pick-row:hover{background:none;color:var(--dw-ink)}
#quest-panel .pick-row.on{background:none;color:var(--dw-ink);border-bottom-color:var(--red)}
#quest-panel .pick-row.on em{color:var(--red);opacity:1}
#quest-panel .two-bar>.bar-detail{border:0;padding:14px 4px 22px 2px}
#quest-panel .ql-head{font-size:11px;letter-spacing:.18em;opacity:.6;border:0;margin:0 0 4px;padding:0}
#quest-panel .ql-i{gap:12px;padding:9px 0;border-bottom:1px solid rgba(43,42,46,.07)}
#quest-panel .ql-ico{width:26px;height:26px;line-height:26px;font-size:13px;background:none;box-shadow:inset 0 0 0 1px rgba(43,42,46,.28);color:rgba(43,42,46,.7)}
#quest-panel .ql-label{font-size:14px}
#quest-panel .ql-i.done .ql-ico{background:rgba(43,42,46,.46);color:#f3ede0;box-shadow:none}
#quest-panel .ql-i.done .ql-label{opacity:.5;text-decoration-color:rgba(43,42,46,.45)}
#quest-panel .ql-i.cur .ql-ico{background:var(--red);color:#f6efe2;box-shadow:none;border-radius:3px}
#quest-panel .ql-i.cur .ql-label{font-weight:400;color:var(--dw-ink);font-size:15px}
#quest-panel .ql-i.next .ql-label{opacity:.62}
#quest-panel .ql-detail{margin:-4px 0 8px 38px;font-size:13px;opacity:.82;line-height:1.6;max-width:62ch}

/* ── 3. character, skills, class ─────────────────────────────────────────────
   The character sheet is the drawer's wider sibling: the same docked sheet of xuan paper, the same
   brush-stroke title and ink-blot close. The class choice lays itself over the sheet in the same frame
   rather than as a second torn slab on top of the first. */
:root{--ch-w:min(880px,calc(100vw - var(--dw-left) - 16px));--ch-h:min(680px,calc(100dvh - var(--dw-top) - 164px))}
#character,#classpick{left:var(--dw-left);top:var(--dw-top);transform:none;border:0;box-sizing:border-box;width:var(--ch-w);height:var(--ch-h);max-height:none;
  padding:22px 26px 22px 28px;filter:drop-shadow(0 10px 18px rgba(52,40,26,.2)) drop-shadow(0 1px 1px rgba(52,40,26,.18))}
#character::before,#classpick::before{inset:0;clip-path:none;
  background:linear-gradient(rgba(244,238,224,.86),rgba(239,232,214,.9)),url(/assets/game/ui/ui/xuan-paper.webp) center/560px,var(--dw-paper);
  -webkit-mask:url(/assets/game/ui/ui/home-paper-edge.svg) 0 0/100% 100% no-repeat;mask:url(/assets/game/ui/ui/home-paper-edge.svg) 0 0/100% 100% no-repeat}
#character::after,#classpick::after{content:"";position:absolute;inset:9px 10px;border:1px solid rgba(43,42,46,.1);pointer-events:none;z-index:-1}
#character>.close,#classpick>.close{position:absolute;right:16px;top:16px;width:30px;height:30px;padding:0;margin:0;display:grid;place-items:center;
  border:0;border-radius:50%;background:#e4ddcd;box-shadow:0 0 0 4px rgba(241,234,219,.9);color:var(--dw-ink);font-size:13px;letter-spacing:0;line-height:1;z-index:2;cursor:pointer;transition:background .15s,color .15s}
#character>.close:hover,#classpick>.close:hover{background:var(--dw-ink);color:var(--dw-paper);border:0}
#character>.close:focus-visible,#classpick>.close:focus-visible{outline:1.5px solid var(--red);outline-offset:2px}

/* the name on the brush stroke */
#character>h3,#classpick>h3{position:relative;isolation:isolate;align-self:flex-start;margin:0 0 16px -8px;padding:8px 34px 8px 18px;
  font-size:17px;font-weight:400;letter-spacing:.16em;color:#f3ede0;line-height:1.2;width:max-content;max-width:calc(100% - 60px)}
#character>h3::before,#classpick>h3::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(36,34,38,.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}

/* portrait column and stats: hairlines, not boxes */
#char-por{border-right-color:var(--dw-line)}
#char-por b{font-size:17px}
#char-por small{font-size:12px;line-height:1.5;opacity:.72}
#char-por button,#classpick .cls button{border-color:rgba(43,42,46,.55);border-radius:2px;padding:5px 12px;transition:color .15s,border-color .15s,background .15s}
#char-stats .l1{font-size:16px}
#char-stats .char-combat{gap:0;border-top:1px solid var(--dw-line);border-left:1px solid var(--dw-line)}
#char-stats .char-combat .c-stat-plain{border:0;border-right:1px solid var(--dw-line);border-bottom:1px solid var(--dw-line);border-radius:0;padding:9px 6px 8px}
#char-stats .char-combat b{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.15}
#char-stats .char-combat small{font-size:10px;letter-spacing:.05em;opacity:.6;margin-top:3px;overflow-wrap:normal}
#char-stats .char-res{font-size:13px;gap:4px 16px}
#character .eq-slot>small{font-size:11px;letter-spacing:.16em;opacity:.62;margin-top:2px}
#character .acc-slot.empty{opacity:1;color:rgba(43,42,46,.32);border:1px dashed rgba(43,42,46,.28);background:rgba(43,42,46,.03)}

/* the right bar: ink tabs over an open page, not a grey well */
#character .char-right>.itabs{gap:22px;margin:0 0 0;padding:0 0 0 2px;border-bottom:1px solid var(--dw-line);min-height:0}
#character .char-right>.itabs span{font-size:14px;letter-spacing:.06em;opacity:.55;padding:6px 0 9px;margin-bottom:-1px;border-bottom-width:2px}
#character .char-right>.itabs span.on{opacity:1;color:var(--dw-ink)}
#character .char-right>.shop-body{background:none;box-shadow:none;border:0;border-radius:0;padding:12px 8px 22px 2px;
  -webkit-mask:linear-gradient(#000 calc(100% - 22px),transparent);mask:linear-gradient(#000 calc(100% - 22px),transparent)}
#character .char-right>.shop-body::-webkit-scrollbar-track{background:none}

/* skills: the same quiet rows as the quest steps */
#skills h5{font-size:11px;letter-spacing:.18em;opacity:.6;margin:16px 0 8px}
#skills .skill-path button,#skills .ability{border-color:var(--dw-line);border-radius:2px;background:rgba(255,253,247,.35);padding:9px 12px;transition:border-color .15s}
#skills .skill-path button:hover,#skills .ability:hover{border-color:rgba(43,42,46,.45)}
#skills>p,#skills .none,#skills>div:only-child{font-size:13px;line-height:1.6}

/* the class choice */
#classpick{overflow:hidden auto;z-index:30}
#classpick .sub{font-size:13px;opacity:.72;margin:-4px 0 16px;max-width:70ch}
#classpick .cards{gap:10px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
#classpick .cls{border:1px solid var(--dw-line);border-radius:2px;background:rgba(255,253,247,.3);padding:12px 12px 14px}
#classpick .cls.on{border-color:rgba(179,56,43,.55);background:rgba(179,56,43,.05)}
#classpick .cls b{font-size:17px}
#classpick .cls .gift{font-size:12px;line-height:1.45}
#classpick .cls p{font-size:12px;line-height:1.55;opacity:.78}
#classpick .cls .m i{height:3px}#classpick .cls .m i em{background:var(--red)}

@media (min-width:641px){
  body:has(#character:not([hidden])) #notices{left:calc(var(--dw-left) + var(--ch-w) + 28px);transform:none;align-items:flex-start}
}
@media (max-width:640px){
  :root{--ch-w:calc(100vw - 16px);--ch-h:calc(100dvh - var(--dw-top) - 96px)}
  #character,#classpick{padding:18px 16px 18px 18px}
  #character>.close,#classpick>.close{right:10px;top:10px}
  #character>h3,#classpick>h3{font-size:15px;margin-bottom:12px}
  #character .char-right>.itabs{gap:14px}#character .char-right>.itabs span{font-size:12px;white-space:nowrap}
  #classpick .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ── 4. clan: buildings and rankings ─────────────────────────────────────────
   The buildings are a ledger, not a stack of boxes: one hairline between entries, the cinnabar seal
   carries each name, the progress is a thin brushed line, and the costs are plain ink figures.
   Cinnabar is kept for the seal and the progress; the "why you can't fund it" note drops to quiet ink. */
#town{gap:0}
#town .town-head{font-size:13px;opacity:.78;margin:0 0 6px;line-height:1.55}
#town .r{grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:6px;border:0;border-bottom:1px solid var(--dw-line);border-radius:0;background:none;padding:14px 2px 14px 0}
#town .r:last-child{border-bottom:0}
#town .r.is-done{background:none;border-color:var(--dw-line)}
#town .bg{width:28px;height:33px;font-size:16px;line-height:30px;margin-top:2px;border-width:1.5px;background:rgba(179,56,43,.04)}
#town .nm{font-size:16px;letter-spacing:.04em}
#town .nm em{font-size:11px;letter-spacing:.08em;opacity:.55;margin-left:2px}
#town .st{font-size:11px;letter-spacing:.06em;opacity:.65}
#town .bd{font-size:13px;opacity:.78;line-height:1.55}
#town .bd.next{opacity:.62}
#town .bar{height:3px;border-radius:2px;background:rgba(43,42,46,.1);margin:2px 0}
#town .cost{gap:4px 16px;font-size:13px}
#town .cq{border:0;padding:0;gap:5px;opacity:.82}
#town .cq b{font-size:13px}#town .cq img,#town .cq .coin{width:14px;height:14px}
#town .fund-action{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:2px}
#town button{font-size:12px;padding:4px 12px;border-radius:2px;border-color:rgba(43,42,46,.5);transition:color .15s,border-color .15s}
#town .fund-why{font-size:12px;color:rgba(43,42,46,.62);font-style:italic;margin:0}
#town .r.quest{outline-offset:-2px}

#levels,#rows{margin-top:4px}
#rows div,#levels div{font-size:13px;line-height:2;gap:12px;border-bottom:1px solid rgba(43,42,46,.06)}
#rows div span:first-child,#levels div span:first-child{width:18px;text-align:right;font-variant-numeric:tabular-nums;opacity:.5}
#levels>div:not(:has(span)),#levels>p,#rows>p{border:0}

/* ── 5. codex ────────────────────────────────────────────────────────────────
   The tally sits on the title line, the shelves read as a catalogue (fixed thumbnail column, names
   aligned), and the entry is a specimen page: a large name, its numbers on a hairline grid, the
   Classic's words set as a quotation, then what it leaves behind. */
#codex>.soon{align-self:flex-end;margin:-46px 46px 22px 0;font-size:13px;letter-spacing:.06em;opacity:.75;font-variant-numeric:tabular-nums;line-height:24px}
#codex>.soon:only-child{align-self:stretch;margin:4px 0 0;font-size:13px;line-height:1.7}
#codex .t{font-size:11px;letter-spacing:.2em;opacity:.62;margin:14px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--dw-line)}
#codex .bar-list>.t:first-child{margin-top:0}
#codex .pick-row{min-height:46px;gap:10px;padding:3px 8px 3px 2px;border-left:0;font-size:14px}
#codex .pick-row>.por{flex:0 0 60px;display:flex;justify-content:center;align-items:flex-end}
#codex .pick-row>span:not(.por){flex:1 1 auto}
#codex .pick-row:hover{background:rgba(43,42,46,.05)}
#codex .pick-row.on{background:rgba(43,42,46,.07);color:var(--red)}
#drawer #codex .bar-detail{padding-left:16px;scrollbar-gutter:stable}
#codex .sheet .kind{gap:12px;margin:0 0 8px}
#codex .sheet .kind em{font-size:19px;letter-spacing:.05em;text-transform:none}
#codex .st-rows{gap:0;border-top:1px solid var(--dw-line);border-left:1px solid var(--dw-line);margin-bottom:10px}
#codex .st-rows>span{min-width:70px;border:0;border-right:1px solid var(--dw-line);border-bottom:1px solid var(--dw-line);border-radius:0;padding:4px 6px 5px}
#codex .st-rows i{font-size:10px;letter-spacing:.1em;opacity:.6}
#codex .st-rows b{font-size:16px;line-height:1.3}
#codex .sheet .lore{font-size:13px;line-height:1.6;border-left:1px solid rgba(43,42,46,.3);padding-left:11px;margin:0 0 10px;color:rgba(43,42,46,.88)}
#codex .drops>i{font-size:11px;letter-spacing:.18em;opacity:.62;margin-bottom:4px}
#codex .drops>span{font-size:13px;padding:3px 0;border-top-color:rgba(43,42,46,.08)}
@media (max-width:640px){
  #codex>.soon{margin:-42px 40px 12px 0}
  #codex .pick-row{min-height:40px}
  #codex .sheet .kind{margin:0 0 4px}#codex .sheet .kind .por{transform:scale(.8);transform-origin:50% 100%}
}