/* Shared client visual language. Frame slices keep corners at a fixed size;
   no backdrop bitmap is stretched over a panel or over live text. Native art
   provenance: assets/ui/builder-chrome-sources.json. */
:is(h1,h2,h3){font-family:var(--heading);font-weight:400;letter-spacing:.015em}
.page-head h1,.reading-view h1{font-size:clamp(1.75rem,2.6vw,2.6rem);line-height:1.25;letter-spacing:.015em}
.page-head{position:relative;padding-bottom:1.3rem;margin-bottom:1.6rem}
.page-head:after{content:'';position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,#b7945970,#b7945920,transparent);pointer-events:none}
.intro{max-width:65ch;line-height:1.65}
.brand span{font-family:var(--heading)}
body .topbar .brand img{width:44px;height:44px;object-fit:contain;filter:none;flex:none}
@media(max-width:760px){body .topbar .brand img{width:38px;height:38px}}
.section-heading{gap:.8rem;margin-top:1.4rem}
.section-heading:after{content:'';height:1px;background:linear-gradient(90deg,#b7945955,transparent);flex:1;order:1}
.section-heading>h2{flex:none;margin:0;font-size:1.15rem}
.section-heading>span{order:2;font:1.15rem var(--display);letter-spacing:0}
.button,.discord-btn{position:relative;border-radius:0;font:400 .82rem var(--heading);padding:.55rem 1rem;min-height:42px;box-shadow:inset 0 0 0 2px #c7a15f0c}
.button.primary{padding-inline:2rem;background:linear-gradient(180deg,#51402d9c,#2b2223ed);border-color:#bb975fa8;color:#ead3a1;box-shadow:inset 0 0 0 2px #cba25b19}
.button.primary:hover{background:#6247379c;border-color:#e1bc7b;color:#fff0c9}
.button.primary:before,.button.primary:after{content:'';position:absolute;top:50%;width:26px;height:26px;background:url('/assets/ui/game-button-cap.webp') center/contain no-repeat;transform:translateY(-50%);opacity:.85;pointer-events:none}
.button.primary:before{left:3px}
.button.primary:after{right:3px;transform:translateY(-50%) scaleX(-1)}
.button.primary:hover:before,.button.primary:hover:after{background-image:url('/assets/ui/game-button-cap-hover.webp')}
.button:disabled{opacity:.4}
.text-button{font:400 .85rem var(--heading);min-height:38px;text-decoration:none;display:inline-flex;align-items:center;gap:.75rem}
.guide-card .text-button:after,.doc-card .card-bottom>.text-button:after{content:'›';font:1.35rem var(--display);color:var(--gold);transition:transform .15s}
.text-button:hover:after{transform:translateX(3px)}
.back-button:after,.publication-controls .text-button:after,.footer-audit:after{content:none}
body:not([data-view=builder]) :is(.panel,.doc-card,.guide-card,.resource-panel,.empty-state,.reading-view){position:relative;border-radius:0;border:7px solid transparent;border-image:url('/assets/ui/game-panel-frame.webp') 34/7px repeat;box-shadow:0 8px 24px #0003;background:linear-gradient(145deg,#30292bed,#211c1ef2)}
body:not([data-view=builder]) .panel:before,body:not([data-view=builder]) .panel:after{content:none}
.doc-card{display:flex;flex-direction:column}
.doc-card .card-bottom{margin-top:auto;padding-top:.8rem}
.guide-card{overflow:visible;display:flex;flex-direction:column}
.guide-card>img{height:180px;display:block;object-fit:cover;opacity:.85;border-bottom:1px solid #b7945944}
.guide-card-body{display:flex;flex-direction:column;flex:1;gap:.8rem;padding:1.1rem 1.15rem}
.guide-card-body>.eyebrow{margin:0;font-size:.6rem;letter-spacing:.1em}
.guide-card h2{font:400 1.4rem/1.4 var(--heading);margin:0;color:var(--bright)}
.guide-card p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.65}
.guide-card .text-button{margin-top:auto;align-self:flex-start;padding:0}
.resource-panel{padding:1.35rem 1.5rem;gap:1.5rem}
.resource-panel h2{font-size:1.25rem}
.resource-panel p{color:var(--muted);line-height:1.65}
.resource-panel .eyebrow{color:var(--gold)}
.reading-view{padding:1.5rem 2rem;margin:1rem auto;background:linear-gradient(145deg,#30292bed,#211c1ef2)}
.reading-view p{color:var(--text);line-height:1.85}
.reading-view h2{color:#d9bd8b;margin-top:1.8rem;font-size:1.3rem}
.reading-view .article-image{max-height:300px;object-fit:cover;border-radius:0}
.library-filters{padding:1rem;background:#2821239c;border-block:1px solid #b7945938;gap:.65rem}
input,select,textarea{border-radius:0}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid #dab779;outline-offset:2px}
.segmented{background:transparent;border:0;gap:.4rem}
body:not([data-view=builder]) .segmented button{font:400 .8rem var(--heading);min-height:44px;border:1px solid #b7945955;background:#211b1d70;color:var(--muted);border-radius:0;box-shadow:inset 0 0 0 2px #c7a15f0c}
body:not([data-view=builder]) .segmented button[aria-pressed=true]{background:#b794592a;color:#ecd4a0;border-color:#b79459;box-shadow:inset 0 -2px #b79459}
.tier-board{border:7px solid transparent;border-image:url('/assets/ui/game-panel-frame.webp') 34/7px repeat;border-radius:0}
.tier-label{position:relative;isolation:isolate;font-family:var(--heading);border-right:1px solid #b7945955}
.tier-label:before{content:'';position:absolute;inset:8px;border:1px solid #e4d3b327;z-index:-1;pointer-events:none}
.tier-label strong{font:400 2.7rem var(--display)}
.tier-label span{font:400 .75rem/1.5 var(--heading)}
.tier-item{border-radius:0;border:6px solid transparent;border-image:url('/assets/ui/arsenal-item-frame.webp') 34/6px repeat;background:#33282b99;font-family:var(--heading)}
.tier-item:hover{border-image-source:url('/assets/ui/arsenal-item-hover.webp');background:#49383b}
body:not([data-view=builder]) dialog{border:10px solid transparent;border-image:url('/assets/ui/game-panel-frame.webp') 34/10px repeat;border-radius:0;padding:1.2rem;box-shadow:0 20px 90px #000d}
body:not([data-view=builder]) dialog::backdrop{backdrop-filter:blur(5px)}
body:not([data-view=builder]) .dialog-head{padding-bottom:.75rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
body:not([data-view=builder]) .dialog-head .icon-button{flex:none;width:38px;height:38px;font-size:0;background:url('/assets/ui/game-close.webp') center/24px 24px no-repeat;border:1px solid transparent;border-radius:0}
body:not([data-view=builder]) .dialog-head .icon-button:hover{border-color:var(--gold);background-color:#b794591c}
/* The light HUD keeps its readable surface, with a native border only. */
body[data-view=builder] :is(.build-meta,.arsenal-equipment,.workshop-scene,.sanctum-scene,.virtue-scene,.journal-scene,.stats-panel){box-shadow:0 8px 26px #0004}
body[data-view=builder] :is(.build-meta,.arsenal-equipment,.workshop-scene,.sanctum-scene,.virtue-scene,.journal-scene,.stats-panel):before{content:'';position:absolute;inset:0;width:auto;height:auto;border:6px solid transparent;border-image:url('/assets/ui/game-panel-frame.webp') 34/6px repeat;background:none;filter:brightness(.62) saturate(.65);opacity:.8;pointer-events:none;z-index:0}
body[data-view=builder] .arsenal-head{padding-bottom:.8rem}
body[data-view=builder] .virtue-stone{filter:drop-shadow(0 3px 5px #0004)}
/* RepeatableBackerBar has torn end caps. These narrow controls use the native
   border without those caps, so adjacent rows line up cleanly. */
body[data-view=builder] .build-record>summary,
body[data-view=builder] .scene-switch>button{background:linear-gradient(180deg,#473829ee,#30251fed)}
body[data-view=builder] .build-record>summary:before,
body[data-view=builder] .scene-switch>button:before{border:6px solid transparent;border-image:url('/assets/ui/game-panel-frame.webp') 34/6px repeat}
body[data-view=builder] .scene-switch>button[aria-pressed=true]{background:linear-gradient(180deg,#5b462bd9,#3a2d21ed)}
body[data-view=builder] .scene-switch>button:hover{background-color:#71583b}
body[data-view=builder] .mobile-stat-ribbon{background:linear-gradient(90deg,#49372de0,#2b2225ed);border-color:#b7945955;color:#ded4c8}
@media(max-width:900px){.page-head{align-items:flex-start;flex-direction:column;gap:1rem}.guide-card h2{font-size:1.2rem}}
@media(max-width:760px){
  .guide-card{display:flex}
  .guide-card>img{height:auto;min-height:0;width:100%;aspect-ratio:16/7;border-bottom:1px solid #b7945944;border-right:0}
  .guide-card-body{padding:.9rem;gap:.65rem}
  .guide-card h2{font-size:1.15rem}
  .resource-panel{padding:1.1rem}
  .reading-view{padding:1.1rem}
  .section-heading>h2{flex:initial;font-size:1.05rem}
  .library-filters{padding:.75rem}
  .tier-label:before{inset:5px}
}
@media(prefers-reduced-motion:reduce){.text-button:after{transition:none}}

/* Fixed corners and unscaled edge tiles. The paper/colour belongs to the
   surface, not the border image's centre, so tall panels cannot stretch it. */
body[data-view=builder] .builder-tabs button{--tab-frame-width:10px;background:#30231c;background-clip:padding-box}
body[data-view=builder] .builder-tabs button:hover{background-color:#453527}
body[data-view=builder] .builder-tabs button[aria-selected=true]{background-color:#c9bdad}
body[data-view=builder] .builder-tabs button:focus-visible{outline:1px solid #684d29;outline-offset:calc(-1 * var(--tab-frame-width) - 2px)}
@media(max-width:760px){body[data-view=builder] .builder-tabs button{--tab-frame-width:7px}}
body[data-view=builder] .inventory-preview{background:#181514ed}
/* Paper texture tiles at its native size; the edge stays visible at any ratio. */
body[data-view=builder] .journal-scene .journal-page{
  background:#d5c8b9 url('/assets/ui/paper-texture.webp') repeat;
  background-size:384px 384px;
  background-blend-mode:multiply;
  border:7px solid transparent;
  border-image:url('/assets/ui/game-panel-frame.webp') 34/7px repeat;
  background-clip:padding-box;
}
.top-actions .username{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.discord-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap}
.discord-btn svg{width:22px;height:22px;flex:0 0 22px}
.source-credits p{line-height:1.7}.source-credits a{color:var(--bright);text-decoration:underline;text-underline-offset:3px}
.load-failure{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem;text-align:center}
.pact-progression-fields{flex:1 0 100%;min-width:0;margin:.75rem 0 0;padding:.65rem .9rem .8rem;border:1px solid #67563a66;background:#6b55400d}
.pact-progression-fields legend{padding:0 .4rem;font:400 .86rem var(--heading);color:var(--ink)}
.pact-progression-ranks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.4rem}
.pact-progression-fields label,.pact-single-rank label{display:flex;align-items:center;justify-content:space-between;gap:.65rem;font-size:.85rem;min-width:0;width:100%;margin:0}
.pact-progression-fields label span{line-height:1.4}
.pact-progression-fields select,.pact-single-rank select{width:68px;max-width:68px;flex:0 0 68px;padding:.4rem .5rem}
.pact-points-explanation{display:flex;justify-content:space-between;gap:.8rem;border-top:1px solid #67563a33;padding-top:.6rem;margin:.7rem 0 0;font:400 .8rem var(--body);color:var(--ink)}
.pact-points-explanation strong{white-space:nowrap;font-size:.94rem}
.pact-single-rank{margin-top:.5rem}
.mastery-summary{border-top:1px solid var(--line);margin-top:1rem;padding-top:.75rem;font-size:.85rem}
.mastery-summary>p{margin:.3rem 0}.mastery-weapons{margin-top:.8rem;border-top:1px solid var(--line);padding-top:.8rem}
.mastery-weapons>summary{cursor:pointer;color:var(--bright);font:400 .95rem var(--heading);padding:.4rem 0}
.mastery-weapon-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1.2rem;margin-top:.5rem}
.mastery-weapon-row{display:grid;grid-template-columns:40px minmax(0,1fr) 64px;align-items:center;gap:.7rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.mastery-weapon-row img{width:40px;height:40px;object-fit:contain}.mastery-weapon-row span{font:400 .9rem var(--heading);min-width:0}.mastery-weapon-row small{display:block;font:.72rem var(--body);color:var(--muted)}
.mastery-weapon-row select{padding:.35rem;width:64px}
@media(max-width:650px){.pact-progression-ranks,.mastery-weapon-list{grid-template-columns:1fr}.pact-progression-fields{padding:.6rem .7rem .7rem}.pact-progression-ranks{gap:.6rem}}
@media(max-width:650px){.discord-btn{min-width:44px;width:44px;height:44px;padding:8px}.discord-btn .auth-label{display:none}.top-actions .username{display:none}.top-actions{gap:8px}}