@font-face{font-family:'DejaVu Sans';src:local('DejaVu Sans'),url(fonts/DejaVuSans.ttf) format('truetype');font-weight:400}
@font-face{font-family:'DejaVu Sans';src:local('DejaVu Sans Bold'),url(fonts/DejaVuSans-Bold.ttf) format('truetype');font-weight:700}
:root{--bg:#2b2d31;--panel:#1e1f22;--ctl:#383a40;--line:#4e5058;--text:#e8e9eb;--muted:#a9abb3;--acc:#fa9549;--accd:#1e1f22;--chart:#1b1c1f}
*{box-sizing:border-box}
html,body{margin:0;font-family:'DejaVu Sans',sans-serif;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
body.fs{overflow:hidden}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px}
#controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px;margin-top:max(12px,env(safe-area-inset-top));padding:10px}
#controls input,#controls button{font:inherit;font-size:16px;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--ctl);color:var(--acc)}
#controls input:focus,#controls button:focus-visible,#details button:focus-visible,#fs:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#controls input::placeholder{color:var(--muted)}
#controls button{background:var(--ctl);color:var(--acc);border:1.5px solid var(--acc);font-weight:700;white-space:nowrap}
#controls #go.pending{background:var(--acc);color:#1e1f22;border-color:var(--acc)}
#controls #reset{background:var(--ctl);color:var(--acc);border-color:var(--line)}
.picker{position:relative;flex:1 1 100%}
#search{width:100%}
.actions{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;flex:1 1 100%;min-width:0}
#controls .actions #rate{width:84px;flex:0 0 84px;padding:0 10px}
.unit{font-size:14px;color:var(--acc);flex:0 0 auto}
#controls .actions button{flex:0 0 auto;padding:0 12px;font-size:15px}
#controls .actions #reset{margin-left:auto}
@media(max-width:380px){#controls .actions button{padding:0 9px;font-size:14px}#controls .actions #rate{width:74px;flex-basis:74px}}
#results{position:absolute;left:0;right:0;top:48px;max-height:55vh;overflow:auto;margin:0;padding:0;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #000a;z-index:30}
#results li{display:flex;align-items:center;gap:10px;padding:6px 10px;min-height:48px;font-size:15px;cursor:pointer;border-bottom:1px solid #2f3136}
#results li img{width:36px;height:36px}
#results li{color:var(--acc)}
#results li.active,#results li:hover{background:#4a3524}
@media(min-width:760px){.picker{flex:1 1 320px;max-width:460px}.actions{flex:0 1 auto}#controls .actions #reset{margin-left:0}}
#controls,#details{touch-action:manipulation}
/* edit panel: in page flow above the chart */
#details{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;border-width:0;color:var(--acc);font-size:13px;transition:grid-template-rows .26s ease-out,opacity .2s ease-out,margin-top .26s ease-out,transform .26s ease-out;transform:translateY(-6px)}
#details>.in{overflow:hidden;min-height:0;padding:0 14px}
#details.open{grid-template-rows:1fr;opacity:1;margin-top:12px;border-width:1px;transform:none}
#details.open>.in{padding:12px 14px}
#details .hd{display:flex;align-items:center;gap:8px}
#details .hd img{width:36px;height:36px}
#details .hd b{flex:1;font-size:15px}
#details .x{min-width:44px;min-height:44px;border:none;background:none;font-size:22px;color:var(--acc)}
#details .info{color:var(--acc);margin:4px 0 6px;line-height:1.5}
#details .row{display:flex;gap:8px;flex-wrap:wrap}
#details label{display:flex;flex-direction:column;font-size:12px;color:#d9a77f;flex:1;min-width:120px}
#details .seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:2px}
#details .seg button{flex:1;min-width:0;padding:0 4px;min-height:44px;border:none;background:var(--ctl);color:var(--acc);font:inherit;font-size:15px;border-right:1px solid var(--line)}
#details .seg button:last-child{border-right:none}
#details .seg button.on{background:var(--acc);color:#1e1f22;font-weight:700}
#details .note{color:#d9a77f;font-style:italic;font-size:12px;margin-top:4px}
#details .note a{color:var(--acc)}
#details .pendnote{color:var(--acc);font-weight:700;font-style:normal}
@media(max-width:480px){#details label{flex:1 1 100%}#details .info{font-size:12.5px}}
/* fullscreen: panel floats over the chart */
body.fs #details.open{position:fixed;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));top:auto;margin:0 auto;max-width:560px;max-height:55vh;overflow:auto;z-index:1010;background:#1e1f22f2;box-shadow:0 8px 28px #000c}
/* chart window */
#chartwrap{padding:0 12px 12px}
#viewport{position:relative;height:var(--chart-h,520px)!important;isolation:isolate;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black);background-clip:padding-box;overflow:hidden;touch-action:none;cursor:grab;border:1px solid var(--line);border-radius:14px;
 background-color:var(--chart);background-repeat:repeat;overscroll-behavior:contain}
#viewport.panning{cursor:grabbing}
#viewport.fs{position:fixed;inset:0;height:100%!important;transform:none;-webkit-mask-image:none;height:100vh;height:100dvh;min-height:0;border-radius:0;border:none;z-index:1000}
#fs{position:absolute;top:8px;right:8px;z-index:50;width:44px;height:44px;border-radius:10px;border:1.5px solid var(--acc);background:#2b2d31e6;color:var(--acc);font-size:22px;line-height:1;cursor:pointer;touch-action:manipulation}
#world{position:absolute;left:0;top:0;transform-origin:0 0;border-radius:inherit}
#edges{position:absolute;left:0;top:0;overflow:visible;width:1px;height:1px}
#edges text{font-family:'DejaVu Sans',sans-serif;font-size:10.5px;fill:#fa9549;paint-order:stroke;stroke:#1b1c1f;stroke-width:4px;stroke-linejoin:round}
.node{position:absolute;width:170px;text-align:center;font-size:13px;line-height:1.35;color:#f2f2f2;user-select:none;-webkit-user-select:none;touch-action:none;cursor:move;background:none!important}
.node.drag{z-index:3}
.node .hex{position:relative;width:98px;height:112px;margin:0 auto}
.node .hex svg{position:absolute;inset:0;overflow:visible}
.node .hex img{position:absolute;left:13px;top:20px;width:72px;height:72px}
.node .l1{display:block;font-weight:700;margin-top:4px;text-shadow:0 1px 2px #000}
.node .l2{display:block;font-size:12px;color:#e2e2e2;text-shadow:0 1px 2px #000}
.node.sel{outline:none}
.node.sel .hex svg polygon{stroke:#fa9549;stroke-width:4}
.node.sel .hex svg{filter:drop-shadow(0 0 6px #fa9549) drop-shadow(0 0 14px #fa9549aa)}
#msg{position:absolute;left:50%;top:40%;transform:translateX(-50%);color:var(--acc);font-size:15px;text-align:center;padding:0 20px}
#total{margin:12px 0 0;padding:12px 14px;font-size:16px;font-weight:700;color:var(--acc)}
#details .hd{display:flex;align-items:center;gap:10px}
#details .hd img{width:48px;height:48px}
#details .hd b{font-size:16px}
#details .hd .rate{font-size:14px;color:#ffc08a}
#details .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:8px 0}
#details h4{margin:6px 0 4px;font-size:12px;color:#d9a77f;text-transform:uppercase;letter-spacing:.04em}
#details ul{list-style:none;margin:0;padding:0}
#details li{display:flex;align-items:center;gap:6px;min-height:30px}
#details li img{width:28px;height:28px}
#details .by{color:#c9c9c9}
#details .pw{font-size:15px;font-weight:700}
@media(max-width:420px){#details .grid{grid-template-columns:1fr}}
#world{z-index:1}
.node{width:190px;transition:opacity .25s ease-out;pointer-events:none}
.node .hex,.node .l1,.node .l2{pointer-events:auto}
.node .hex{width:116px;height:134px}
.node .hex::after{content:'';position:absolute;inset:calc(-1 * var(--hitpad,0px));border-radius:50%}
.node .hex img{left:16px;top:25px;width:84px;height:84px;image-rendering:auto}
.node .l1{font-size:14.5px;margin-top:5px}
.node .l2{font-size:12.5px}
#edges text.hid{display:none}
html{overflow-anchor:none}
.node.entering{opacity:0}
.node.leaving{opacity:0;pointer-events:none}
.node .hex svg,.node .hex svg polygon{transition:filter .22s ease-out,stroke .22s ease-out,stroke-width .22s ease-out}
#edges path,#edges text{animation:edgefade .25s ease-out}
@keyframes edgefade{from{opacity:0}to{opacity:1}}
#controls button,#controls input{transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}
#viewport.fs-anim{animation:fsin .24s ease-out}
@keyframes fsin{from{opacity:.4;transform:scale(.97)}to{opacity:1;transform:none}}
.card{box-shadow:0 2px 10px #0004}
#chartwrap{padding:0 12px 12px}
#total{font-size:16px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.node.leaving *{pointer-events:none!important}