:root{
  --ochre:#c8743a; --umber:#3a2214; --bone:#efe3cc; --char:#151010; --red:#9b3a22;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#000;color:var(--bone);font-family:'Courier Prime',monospace;touch-action:none;user-select:none;-webkit-user-select:none}
#scene-container{position:fixed;inset:0}
#scene-container canvas{display:block}
#title{position:fixed;top:16px;left:18px;pointer-events:none;animation:rise 1.6s ease-out both}
#title h1{font-family:'IM Fell English SC',serif;font-size:clamp(22px,4vw,42px);letter-spacing:.12em;color:var(--ochre);text-shadow:0 0 18px rgba(200,116,58,.55),0 0 2px #000;font-weight:400}
#stats{font-size:12px;opacity:.75;letter-spacing:.08em;margin-top:2px}
#topbar{position:fixed;top:14px;right:14px;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:60vw;animation:rise 1.6s .3s ease-out both}
button{font-family:'Courier Prime',monospace;font-size:12px;background:rgba(25,14,8,.72);color:var(--bone);border:1px solid rgba(200,116,58,.45);padding:7px 10px;border-radius:3px 8px 4px 9px;cursor:pointer;box-shadow:0 0 12px rgba(200,116,58,.12);transition:.2s}
button:hover,button.on{background:rgba(200,116,58,.85);color:#1a0d06}
#hint{position:fixed;bottom:42px;left:50%;transform:translateX(-50%);font-size:13px;opacity:.85;background:rgba(0,0,0,.45);padding:8px 14px;border-radius:20px;transition:opacity 1.5s;pointer-events:none;white-space:nowrap}
#hint.gone{opacity:0}
#joystick{position:fixed;left:24px;bottom:60px;width:120px;height:120px;border-radius:50%;border:1px dashed rgba(200,116,58,.5);background:radial-gradient(rgba(200,116,58,.08),transparent);display:none}
#knob{position:absolute;left:40px;top:40px;width:40px;height:40px;border-radius:50%;background:rgba(200,116,58,.55)}
@media (pointer:coarse){#joystick{display:block}#hint{font-size:11px}}
#panel{position:fixed;top:0;right:0;height:100%;width:min(380px,100vw);overflow-y:auto;padding:22px;background:linear-gradient(160deg,#e9d8b4,#cdb48a 60%,#b8986a);color:#2a1709;transform:translateX(105%);transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:-10px 0 40px rgba(0,0,0,.7);font-family:'IM Fell English',serif}
#panel.open{transform:none}
#panel canvas{width:100%;aspect-ratio:1;background:radial-gradient(#8a6c50,#4b3524);border-radius:6px 14px 8px 12px;box-shadow:inset 0 0 30px #000}
#panel h2{font-family:'IM Fell English SC',serif;font-size:26px;margin:14px 0 6px;line-height:1.1}
.note{font-style:italic;font-size:16px;line-height:1.35;margin-bottom:12px}
#panel dl{display:grid;grid-template-columns:70px 1fr;gap:4px 10px;font-family:'Courier Prime',monospace;font-size:13px;margin-bottom:14px}
#panel dt{opacity:.6}
#panel button{background:#2a1709;color:var(--bone);border-color:#2a1709}
#panel button:hover{background:var(--red)}
#closePanel{position:absolute;top:8px;right:8px;padding:3px 8px!important}
.row{display:flex;flex-wrap:wrap;gap:6px}
#favs,#seedBox{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:5}
#favs.open,#seedBox.open{display:flex}
.favs-inner,.seed-inner{background:#1b100a;border:1px solid var(--ochre);padding:18px;border-radius:6px 16px 8px 14px;width:min(720px,94vw);max-height:84vh;overflow:auto}
.seed-inner{width:min(360px,92vw)}
.favs-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.favs-inner h2,.seed-inner h2{font-family:'IM Fell English SC',serif;color:var(--ochre);font-weight:400;margin-bottom:10px}
#favGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.fav{cursor:pointer;font-size:11px;text-align:center}
.fav img{width:100%;aspect-ratio:1;background:radial-gradient(#8a6c50,#4b3524);border-radius:6px;display:block;margin-bottom:4px}
.empty{opacity:.6;font-style:italic}
#seedInput{width:100%;padding:10px;background:#000;color:var(--bone);border:1px solid var(--ochre);font-family:'Courier Prime',monospace;font-size:16px;margin-bottom:10px}
#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--ochre);color:#1a0d06;padding:8px 14px;border-radius:4px;opacity:0;transition:.3s;pointer-events:none;z-index:9}
#toast.show{opacity:1}
#remix{position:fixed;bottom:10px;right:12px;font-size:11px;color:var(--ochre);opacity:.7;text-decoration:none}
#remix:hover{opacity:1}
@keyframes rise{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}