*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg0:#080810;--bg1:#0e0e1a;--bg2:#141420;--bg3:#1c1c2e;
--border:#252540;--border2:#303055;
--text:#c8cce8;--muted:#5a5c8a;--dim:#2e2e50;
--accent:#6c75ff;--accent2:#4eb84e;--danger:#e04040;--warn:#e89820;--info:#3080d8;
--gold:#d4a820;--royal:#9050e0;
--panel:172px;--right:160px;
--font:'JetBrains Mono',ui-monospace,'Cascadia Code',monospace;
}
html,body{height:100%;background:var(--bg0);color:var(--text);font-family:var(--font);font-size:11px;overflow:hidden;user-select:none}
#title-screen{
position:fixed;inset:0;background:var(--bg0);z-index:1000;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:0;overflow:hidden;
}
#title-canvas{position:absolute;inset:0;pointer-events:none}
.title-content{
position:relative;z-index:2;display:flex;flex-direction:column;
align-items:center;gap:28px;
}
.title-logo{
text-align:center;line-height:1;
}
.title-logo .t1{
font-size:52px;font-weight:900;letter-spacing:6px;color:#fff;
text-shadow:0 0 40px #6c75ff80,0 0 80px #6c75ff30;
}
.title-logo .t2{
font-size:13px;letter-spacing:8px;color:var(--muted);margin-top:4px;
}
.title-logo .t3{
font-size:10px;letter-spacing:3px;color:var(--accent);margin-top:6px;
border:1px solid var(--accent);border-radius:12px;padding:2px 10px;display:inline-block;
}
.title-btns{display:flex;flex-direction:column;gap:10px;width:240px}
.title-btn{
background:none;border:1px solid var(--border2);border-radius:6px;
padding:11px 0;font-family:var(--font);font-size:12px;letter-spacing:2px;
color:var(--text);cursor:pointer;transition:all .2s;text-transform:uppercase;
}
.title-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;
box-shadow:0 0 20px #6c75ff40;}
.title-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.title-btn.primary:hover{background:#8088ff;box-shadow:0 0 30px #6c75ff60}
.seed-row{display:flex;gap:8px;width:240px}
.seed-row input{
flex:1;background:var(--bg2);border:1px solid var(--border2);border-radius:5px;
padding:7px 10px;font-family:var(--font);font-size:11px;color:var(--text);outline:none;
}
.seed-row input:focus{border-color:var(--accent)}
.seed-row input::placeholder{color:var(--muted)}
.seed-row .seed-btn{
background:none;border:1px solid var(--border2);border-radius:5px;
padding:0 10px;cursor:pointer;color:var(--muted);font-family:var(--font);font-size:10px;
white-space:nowrap;transition:.1s;
}
.seed-row .seed-btn:hover{background:var(--bg3);color:var(--text)}
#save-slots{position:absolute;inset:0;background:rgba(0,0,0,.85);z-index:3;
display:none;align-items:center;justify-content:center;}
.save-panel{
background:var(--bg1);border:1px solid var(--border2);border-radius:10px;
padding:20px;width:360px;max-height:80vh;overflow-y:auto;
}
.save-panel h3{color:var(--accent);margin-bottom:14px;font-size:13px}
.slot-row{
display:flex;align-items:center;gap:8px;padding:8px;
border:1px solid var(--border);border-radius:6px;margin-bottom:6px;cursor:pointer;
transition:.1s;
}
.slot-row:hover{background:var(--bg2);border-color:var(--accent)}
.slot-info{flex:1;font-size:10px}
.slot-info .sn{color:var(--text);font-weight:700}
.slot-info .sm{color:var(--muted)}
.slot-btn{background:none;border:1px solid var(--border);border-radius:4px;
padding:2px 8px;cursor:pointer;color:var(--muted);font-family:var(--font);font-size:9px}
.slot-btn:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.sp-close{float:right;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px}
#app{display:none;flex-direction:column;height:100vh}
#topbar{
display:flex;align-items:center;gap:6px;padding:4px 8px;
background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;
}
.logo{font-size:12px;font-weight:900;letter-spacing:2px;color:#fff;cursor:pointer}
.logo span{color:var(--accent)}
.pill{background:var(--bg2);border:1px solid var(--border);border-radius:10px;
padding:2px 7px;font-size:9px;color:var(--muted);white-space:nowrap}
.pill b{color:var(--text)}
#sp{flex:1}
.tbtn{background:none;border:1px solid var(--border);border-radius:4px;padding:2px 7px;
font-size:9px;cursor:pointer;color:var(--muted);font-family:var(--font);transition:.1s;white-space:nowrap}
.tbtn:hover{background:var(--bg2);color:var(--text)}
.tbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tbtn.danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.tbtn.save{border-color:var(--accent2)}
.tbtn.save:hover{background:var(--accent2);color:#fff}
#main{display:flex;flex:1;overflow:hidden}
#lpanel,#rpanel{background:var(--bg1);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
#lpanel{width:var(--panel);border-right:1px solid var(--border)}
#rpanel{width:var(--right);border-left:1px solid var(--border)}
.phdr{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
padding:5px 7px 3px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;gap:4px}
.pbody{flex:1;overflow-y:auto;padding:4px 6px}
.pbody::-webkit-scrollbar{width:2px}
.pbody::-webkit-scrollbar-thumb{background:var(--border2)}
.tsec{font-size:7px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:4px 0 2px}
.tbtn2{width:100%;text-align:left;background:none;border:1px solid var(--border);
border-radius:4px;padding:3px 6px;margin-bottom:2px;cursor:pointer;color:var(--text);
font-size:10px;display:flex;align-items:center;gap:4px;font-family:var(--font);transition:.1s}
.tbtn2:hover{background:var(--bg2);border-color:var(--accent)}
.tbtn2.sel{background:var(--accent);border-color:var(--accent);color:#fff}
.ticon{width:16px;height:16px;border-radius:2px;display:flex;align-items:center;
justify-content:center;font-size:10px;flex-shrink:0}
.srow{display:flex;justify-content:space-between;padding:2px 0;
border-bottom:1px solid var(--border);font-size:9px}
.srow:last-child{border-bottom:none}
.sval{font-weight:600}
.bar{background:var(--bg2);border-radius:2px;height:3px;margin:1px 0 3px;overflow:hidden}
.bfill{height:100%;border-radius:2px;transition:width .4s}
.ev{font-size:8px;padding:2px 0;border-bottom:1px solid var(--border);line-height:1.5;color:var(--muted)}
.ev:last-child{border-bottom:none}
.ev .etime{color:var(--dim)}
.ev .emsg{color:var(--text)}
.spd{display:flex;gap:2px;padding:4px 6px;border-top:1px solid var(--border);flex-shrink:0}
.sbtn{flex:1;background:none;border:1px solid var(--border);border-radius:3px;padding:2px 0;
font-size:9px;cursor:pointer;color:var(--muted);font-family:var(--font)}
.sbtn:hover{background:var(--bg2)}
.sbtn.on{background:var(--accent2);border-color:var(--accent2);color:#fff;font-weight:700}
#cw{flex:1;overflow:hidden;position:relative;background:#040408;cursor:crosshair}
canvas#world{position:absolute;top:0;left:0;image-rendering:pixelated;image-rendering:crisp-edges}
#minimap-canvas{
position:absolute;bottom:8px;right:8px;
border:1px solid var(--border2);border-radius:4px;
image-rendering:pixelated;cursor:pointer;
box-shadow:0 2px 12px rgba(0,0,0,.6);
}
#tt{position:absolute;background:rgba(6,6,18,.96);color:var(--text);font-size:9px;
padding:6px 9px;border-radius:5px;pointer-events:none;display:none;z-index:99;
line-height:1.7;max-width:210px;border:1px solid var(--border2);font-family:var(--font)}
#tt .ttn{font-weight:700;font-size:10px;margin-bottom:2px;color:#fff}
#notif{position:absolute;top:40px;left:50%;transform:translateX(-50%);
background:rgba(10,10,26,.94);color:#fff;padding:4px 14px;border-radius:16px;
font-size:10px;pointer-events:none;opacity:0;transition:opacity .3s;z-index:100;
border:1px solid var(--border2)}
#notif.show{opacity:1}
.gbtn{width:100%;background:none;border:1px solid var(--border);border-radius:4px;
padding:3px 6px;margin-bottom:2px;cursor:pointer;color:var(--text);
font-size:9px;text-align:left;font-family:var(--font);transition:.1s}
.gbtn:hover{background:var(--bg2)}
.gbtn.bless:hover{background:#121e0a;border-color:var(--accent2);color:var(--accent2)}
.gbtn.curse:hover{background:#1e0a0a;border-color:var(--danger);color:var(--danger)}
.gbtn.royal:hover{background:#140a20;border-color:var(--royal);color:var(--royal)}
.overlay-win{
position:absolute;background:var(--bg1);border:1px solid var(--border2);
border-radius:8px;padding:12px;z-index:200;font-size:9px;min-width:280px;
}
.ow-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ow-title{font-weight:700;font-size:11px;color:var(--accent)}
.ow-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:0 2px}
.ow-close:hover{color:#fff}
#genwin{top:44px;left:50%;transform:translateX(-50%);width:360px;display:none}
.locus-row{display:grid;grid-template-columns:76px 52px 52px 80px;gap:3px;
padding:2px 0;border-bottom:1px solid var(--border)}
.allele{font-family:monospace;font-size:10px;font-weight:700}
.dom{color:#60e060}.rec{color:#e06060}
#polwin{top:44px;right:8px;width:320px;display:none;max-height:calc(100vh - 60px);overflow-y:auto}
#savewin{top:44px;right:168px;width:280px;display:none}
#popchart{width:100%;height:48px}
.tribe-row{display:flex;align-items:center;gap:5px;padding:3px 4px;
border-radius:4px;margin-bottom:2px;border:1px solid var(--border);cursor:pointer;transition:.1s}
.tribe-row:hover{background:var(--bg2);border-color:var(--accent)}
.tribe-color{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.tribe-info{flex:1}
.tribe-name{font-weight:700;font-size:10px}
.tribe-sub{color:var(--muted);font-size:8px}
#autosave-flash{
position:absolute;top:8px;right:8px;
background:rgba(60,190,60,.15);border:1px solid #3cbe3c50;
color:#3cbe3c;font-size:8px;padding:2px 7px;border-radius:3px;
opacity:0;transition:opacity .5s;pointer-events:none;
}
#autosave-flash.show{opacity:1}
#cam-hint{
position:absolute;bottom:88px;right:8px;
background:rgba(8,8,20,.8);border:1px solid var(--border);
border-radius:4px;padding:4px 7px;font-size:8px;color:var(--muted);
pointer-events:none;line-height:1.6;
}
.chunk-dbg{position:absolute;pointer-events:none;opacity:0}
#impact-aimer{
position:absolute;pointer-events:none;border:2px dashed rgba(255,100,50,.7);
border-radius:50%;display:none;transform:translate(-50%,-50%);
}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.dip-row{display:flex;gap:2px;margin-bottom:1px;font-size:8px}
.dip-cell{width:22px;height:22px;border-radius:2px;display:flex;align-items:center;
justify-content:center;font-size:9px;border:1px solid var(--border)}