:root{--blue:#0f2a4a;--blue2:#163a63;--parch:#efe6d2;--bone:#f5f0e6;--amber:#e0a84a;--sepia:#6b4a2b;--ink:#2a1d10}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at center,#1b1610 0%,#0a0806 100%);color:var(--ink);font-family:'IM Fell English',serif;min-height:100vh;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6));animation:flick 4s infinite;z-index:50}
@keyframes flick{0%,100%{opacity:1}45%{opacity:.85}50%{opacity:.95}70%{opacity:.8}}
#dust{position:fixed;inset:0;pointer-events:none;z-index:40}
#dust i{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(245,240,230,.4);animation:drift linear infinite}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(60px,-110vh)}}
header{display:flex;align-items:center;gap:16px;padding:18px 24px;color:var(--bone)}
.logo{width:54px;height:54px;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
h1{margin:0;font-size:clamp(28px,5vw,52px);font-weight:400;letter-spacing:1px;color:var(--parch)}
.sub{margin:2px 0 0;font-style:italic;color:#c9b998}
#auth-status{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#c9b998}
#auth-status button{font-size:11px}
main{display:grid;grid-template-columns:260px 1fr 280px;gap:18px;padding:0 18px 18px}
.panel{background:var(--parch);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");border:1px solid #c7b48c;box-shadow:inset 0 0 40px rgba(107,74,43,.35);padding:16px;border-radius:3px;animation:rise .7s both}
#p-search{animation-delay:.15s}#p-cat{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
h2{font-weight:400;font-size:20px;margin:6px 0 10px;border-bottom:1px solid #b9a37a;padding-bottom:4px;color:var(--sepia)}
.mono,input,textarea,.crumb,.stats{font-family:'IBM Plex Mono',monospace}
.small{font-size:11px}
.crumb{display:flex;flex-direction:column;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--sepia)}
.crumb label{display:flex;flex-direction:column}
input,textarea{background:#f8f2e2;border:1px solid #b9a37a;padding:6px;font-size:13px;color:var(--ink);width:100%;border-radius:2px}
textarea{resize:vertical}
button{font-family:'IBM Plex Mono',monospace;font-size:12px;background:var(--blue);color:var(--bone);border:1px solid #071628;padding:8px 10px;cursor:pointer;border-radius:2px;transition:.15s}
button:hover{background:var(--blue2);transform:translateY(-1px)}
button.amber{background:var(--amber);color:var(--ink);border-color:#9c6e22;font-weight:700}
button.wide{width:100%;margin-top:8px}
.arrows{display:flex;justify-content:center;align-items:center;gap:8px;margin:14px 0}
.arrows .vert{display:flex;flex-direction:column;gap:4px}
.compass{position:relative;width:120px;height:110px;margin:0 auto}
.compass button{position:absolute;width:34px;height:34px;padding:0;border-radius:50%}
.compass button.on{background:var(--amber);color:var(--ink)}
#minimap polygon{stroke:#8a7350;stroke-width:1;fill:#e6dac0}
#minimap polygon.v{fill:#c9b48a}
#minimap polygon.c{fill:var(--amber);filter:drop-shadow(0 0 4px var(--amber))}
.case{position:relative;border:10px solid #8a6a2e;border-image:linear-gradient(135deg,#d6b25e,#7a5520,#e8c873,#6a4818) 1;box-shadow:0 10px 40px rgba(0,0,0,.7),inset 0 0 0 1px #000;background:var(--blue)}
#canvas{display:block;width:100%;height:min(62vh,560px);cursor:crosshair}
#tip{position:absolute;pointer-events:none;background:var(--parch);color:var(--ink);font-family:'IBM Plex Mono';font-size:11px;padding:5px 8px;border:1px solid var(--sepia);display:none;white-space:nowrap}
#note{position:absolute;top:14px;right:14px;max-width:240px;background:var(--parch);padding:10px 12px;font-style:italic;border-radius:10px;border:1px solid var(--sepia);display:none;animation:rise .4s}
.card{margin-top:14px;background:var(--parch);padding:14px;border:1px solid #c7b48c;box-shadow:inset 0 0 30px rgba(107,74,43,.3)}
.card-top{display:flex;justify-content:space-between;gap:10px}
.binomial{font-size:26px;font-style:italic}
.badge{background:var(--amber);color:var(--ink);font-family:'IBM Plex Mono';font-size:11px;padding:4px 8px;border-radius:2px;white-space:nowrap;align-self:flex-start}
.badge.g{background:#b9a37a}
.stats{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;margin:10px 0;color:var(--sepia)}
.stats b{color:var(--ink)}
.meter{display:flex;align-items:center;gap:8px;font-size:13px;font-style:italic}
.bar{flex:1;height:10px;background:#d8c9a6;border:1px solid #9b8560}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#8a3b2a,var(--amber),#3f6b4a);transition:width .8s}
.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#found{margin-top:10px;font-size:15px}
#found .ok{font-style:italic;font-size:18px;color:var(--sepia)}
#placard{margin-top:10px;font-size:14px;line-height:1.45}
#placard .plq{background:#f8f2e2;border:3px double var(--sepia);padding:12px}
#p-cat{margin:0 18px 18px}
#catalog,#reliq{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:10px}
.thumb{background:var(--blue);color:var(--bone);cursor:pointer;padding:4px;font-family:'IBM Plex Mono';font-size:10px;position:relative}
.thumb img{width:100%;display:block}
.thumb .x{position:absolute;top:2px;right:4px;color:var(--amber)}
.row{display:flex;gap:8px;flex-wrap:wrap}
footer{text-align:center;color:#c9b998;padding:10px 0 30px}
footer a{color:var(--amber)}
.tabs{display:none}
@media(max-width:960px){
  main{grid-template-columns:1fr;padding-bottom:70px}
  .tabs{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--blue)}
  .tabs button{flex:1;border:none;padding:14px 0}
  .tabs button.on{background:var(--amber);color:var(--ink)}
  #p-nav,#p-search,#p-cat{display:none}
  body[data-tab=nav] #p-nav,body[data-tab=search] #p-search,body[data-tab=cat] #p-cat{display:block}
  body[data-tab=nav] #p-view,body[data-tab=search] #p-view,body[data-tab=cat] #p-view{display:none}
  #p-cat{margin:0 18px 80px}
  #canvas{height:52vh}
}