:root{--bg:#0b0a09;--ink:#efe9dc;--dim:#8d877b;--r:#FF0040;--g:#00FF80;--b:#0080FF;--glass:rgba(18,16,14,.62)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:'Cormorant Garamond',serif;touch-action:none}
.mono{font-family:'IBM Plex Mono',monospace}
.hidden{display:none!important}
#scene-container{position:fixed;inset:0}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;background:rgba(5,5,5,.55)}
#staticBg{position:absolute;inset:0;width:100%;height:100%;opacity:.35;image-rendering:pixelated}
.panel{position:relative;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(239,233,220,.18);padding:36px;max-width:92vw}
.center{text-align:center;width:620px;animation:rise .9s cubic-bezier(.2,.8,.2,1)}
.wide{width:640px;max-height:86vh;overflow:auto}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
h1{font-weight:300;font-size:clamp(38px,7vw,72px);letter-spacing:.12em;line-height:.95;margin:18px 0 10px}
h1 em{font-weight:700;font-style:italic;letter-spacing:0;text-shadow:-2px 0 var(--r),2px 0 var(--b)}
h2{font-weight:300;font-size:34px;letter-spacing:.05em;margin-bottom:14px}
.sub{font-style:italic;font-size:20px;color:var(--dim);margin-bottom:26px}
.seedrow{display:flex;gap:8px;justify-content:center;align-items:center;margin-bottom:18px}
.seedrow label{font-size:11px;letter-spacing:.2em;color:var(--dim)}
input#seedInput{background:transparent;border:1px solid rgba(239,233,220,.3);color:var(--ink);padding:8px 12px;font-size:14px;width:220px;outline:none}
button{font-family:'IBM Plex Mono',monospace;background:transparent;color:var(--ink);border:1px solid rgba(239,233,220,.35);padding:8px 12px;cursor:pointer;font-size:12px;letter-spacing:.08em;transition:all .15s}
button:hover{text-shadow:-1px 0 var(--r),1px 0 var(--b);border-color:var(--ink);box-shadow:-2px 0 0 var(--r),2px 0 0 var(--b)}
#dice{font-size:18px;padding:4px 12px}
.big{display:block;width:100%;padding:14px;font-size:14px;letter-spacing:.25em;text-transform:uppercase;background:var(--ink);color:#111;margin:8px 0}
.big:hover{background:#fff}
.big.ghost{background:transparent;color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:11px;color:var(--dim);margin-top:18px}
.legend b{color:var(--ink);font-weight:500}
.remix{position:fixed;left:14px;bottom:12px;font-size:11px;color:var(--dim);z-index:30;text-decoration:none;border-bottom:1px dotted}
.remix:hover{color:var(--g)}
.tabs{display:flex;gap:6px;margin-bottom:16px}
.tabs .on{background:var(--ink);color:#111}
.tab label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0;font-size:12px}
select{background:#111;color:var(--ink);border:1px solid #555;padding:4px;font-family:inherit}
#favGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.fav{border:1px solid #333;padding:6px;font-size:13px;cursor:pointer}
.fav canvas{width:100%;display:block;image-rendering:pixelated;margin-bottom:4px}
.fav small{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--dim)}
.empty{color:var(--dim);font-style:italic;font-size:18px}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#wing{position:absolute;left:18px;top:14px}
#wingName{font-size:24px;font-style:italic;text-shadow:0 1px 6px #000}
#coords{font-size:11px;color:var(--dim)}
#counter{position:absolute;right:18px;top:18px;font-size:12px;color:var(--dim)}
#counter b{color:var(--g)}
#crosshair{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--ink);box-shadow:-2px 0 var(--r),2px 0 var(--b)}
#hint{position:absolute;left:50%;top:calc(50% + 26px);transform:translateX(-50%);font-size:11px;letter-spacing:.2em;opacity:0;transition:opacity .2s;background:rgba(0,0,0,.5);padding:4px 10px}
#hint.show{opacity:1}
#minimap{position:absolute;right:18px;bottom:18px;border:1px solid rgba(239,233,220,.25);background:rgba(0,0,0,.5)}
#toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:26px;font-style:italic;opacity:0;transition:opacity .4s;text-shadow:0 2px 10px #000;text-align:center}
#toast.show{opacity:1}
#counter{text-align:right;line-height:1.7}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none}
#flash.go{animation:flash .8s ease-out}
@keyframes flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
#joy{position:absolute;left:30px;bottom:40px;width:120px;height:120px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:none;pointer-events:auto}
#knob{position:absolute;left:40px;top:40px;width:40px;height:40px;border-radius:50%;background:rgba(239,233,220,.4)}
#mobileBtns{position:absolute;right:18px;bottom:180px;display:none;flex-direction:column;gap:8px;pointer-events:auto}
#mobileBtns button{background:rgba(0,0,0,.5)}
body.touch #joy{display:block}
body.touch #mobileBtns{display:flex}
#inspect{position:fixed;inset:0;z-index:25;display:flex;background:rgba(5,5,5,.8);animation:rise .4s}
.inspectArt{flex:1;display:flex;align-items:center;justify-content:center;padding:30px}
#bigArt{max-width:100%;max-height:80vh;border:14px solid #2a2017;box-shadow:0 0 0 2px #c9a54a,0 30px 80px #000}
.side{width:360px;overflow:auto;animation:slide .5s cubic-bezier(.2,.8,.2,1)}
@keyframes slide{from{transform:translateX(60px);opacity:0}}
.artist{font-size:20px}
.medium{font-style:italic;color:var(--dim);font-size:17px;margin-bottom:14px}
.swatch{display:flex;height:22px;margin:10px 0}
.swatch div{flex:1}
.small{font-size:10px;color:var(--dim);word-break:break-all}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:18px 0 6px}
@media(max-width:760px){#inspect{flex-direction:column}.side{width:100%}.inspectArt{padding:10px;flex:none}#bigArt{max-height:38vh}#minimap{width:100px;height:100px;top:60px;bottom:auto}}