body.fair{overflow:hidden;height:100vh}
#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
.hud{position:fixed;z-index:10}
.topbar.hud{left:0;right:0;top:0;gap:.6em;flex-wrap:wrap}
.searchbox{display:flex;gap:.4em;flex:1 1 380px;min-width:220px;max-width:600px}
.searchbox input{flex:1}
.searchbox select{width:auto;max-width:150px}
select.mini{width:auto;padding:.4em .5em}
#minimap{bottom:14px;inset-inline-start:14px;border:1px solid var(--line);border-radius:12px;background:rgba(7,13,31,.75);width:200px;height:200px}
.hint{bottom:14px;left:50%;transform:translateX(-50%);background:rgba(7,13,31,.7);border:1px solid var(--line);border-radius:99px;padding:.45em 1em;font-size:.85em;color:var(--muted);white-space:nowrap}
.hover{background:rgba(7,13,31,.92);border:1px solid var(--gold);border-radius:10px;padding:.5em .8em;pointer-events:none;font-size:.9em}
.loading{position:fixed;inset:0;display:grid;place-content:center;gap:1em;justify-items:center;background:var(--bg);z-index:100;transition:opacity .5s}
.spinner{width:54px;height:54px;border:4px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.drawer{position:fixed;top:var(--topH,64px);bottom:0;inset-inline-end:0;width:min(520px,100vw);background:var(--bg2);border-inline-start:1px solid var(--line);z-index:30;overflow:auto;padding:1.2em;box-shadow:var(--shadow)}
.close{position:absolute;top:.6em;inset-inline-end:.6em;background:transparent;border:0;font-size:1.3em;cursor:pointer;color:var(--muted)}
.pubhead{display:flex;gap:1em;align-items:center;margin-bottom:1em;padding-inline-end:2em}
.pubhead .logo{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--panel2);display:grid;place-content:center;font-size:1.6em;font-weight:800}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.9em}
.bookcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6em;display:flex;flex-direction:column;gap:.35em}
.bookcard .t{font-weight:700;font-size:.92em;line-height:1.3;min-height:2.6em}
.bookcard .a{font-size:.8em;color:var(--muted)}
.bookcard .p{color:var(--gold);font-weight:800}
.filters{display:flex;gap:.5em;margin:.6em 0 1em;flex-wrap:wrap}
.filters > *{flex:1;min-width:120px}
.cartline{display:grid;grid-template-columns:48px 1fr auto;gap:.7em;align-items:center;padding:.6em 0;border-bottom:1px solid var(--line)}
.cartline img{width:48px;height:72px;object-fit:cover;border-radius:4px}
.cartline input{width:64px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:grid;place-items:center;padding:1em}
.modal-card{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:1.4em;width:min(720px,100%);max-height:92vh;overflow:auto}
.opt{display:flex;gap:.6em;align-items:center;padding:.55em .7em;border:1px solid var(--line);border-radius:10px;margin:.35em 0;cursor:pointer}
.opt input{width:auto}
.opt:has(input:checked){border-color:var(--gold);background:rgba(242,193,78,.08)}
.dirrow{display:flex;gap:.6em;align-items:center;padding:.55em;border-bottom:1px solid var(--line)}
.swatch{width:14px;height:14px;border-radius:4px;display:inline-block}
.tier{font-size:.72em;font-weight:800;padding:.1em .45em;border-radius:6px;background:var(--gold);color:#1b1300}
@media (max-width:760px){
  #minimap{width:120px;height:120px}
  .hint{display:none}
  .topbar.hud{padding:.5em}
  #btnDir span,#btnAvatar span,#btnCart span{display:none}
}