:root{
--bg:#121212;
--bg2:#1e1e1e;
--card:#2a2a2a;
--ink:#eee;
--ink2:#bbb;
--accent:#4fc3f7;
}
*{ box-sizing:border-box }
body{
margin:0;
font-family:system-ui,ui-sans-serif;
background:var(--bg);
color:var(--ink);
height:100vh;
display:flex;
flex-direction:column;
}
/* Top Bar */
.topbar{
display:flex;
gap:0;
background:#1e1e1e;
box-shadow:0 2px 8px rgba(0,0,0,.5);
z-index:10;
}
.topbar button{
flex:1;
background:none;
border:none;
color:var(--ink);
padding:.9rem 0;
font-size:1.2rem;
cursor:pointer;
}
.topbar button:hover{
color:var(--accent);
background:#262626;
}
/* Panels */
.panel{
max-height:0;
overflow:hidden;
background:#1b1b1b;
transition:max-height .35s ease;
border-bottom:1px solid #242424;
}
.panel.open{
max-height:360px;
}
/* Settings (steppers) */
.settings-track{
display:flex;
gap:1rem;
overflow-x:auto;
padding:.6rem 1rem;
}
.stepper{
flex:0 0 auto;
background:var(--card);
border:1px solid #333;
border-radius:.6rem;
padding:.5rem;
min-width:122px;
text-align:center;
}
.stepper label{
display:block;
font-size:.8rem;
color:var(--ink2);
margin-bottom:.35rem;
}
.stepper-controls{
display:flex;
align-items:center;
background:#1e1e1e;
border-radius:.5rem;
overflow:hidden;
}
.stepper button{
background:#333;
border:none;
color:var(--ink);
font-size:1.1rem;
padding:.35rem 0;
width:34%;
cursor:pointer;
}
.stepper button:hover{
background:var(--accent);
color:#000;
}
.stepper input{
flex:1;
background:#1e1e1e;
border:none;
color:var(--ink);
text-align:center;
padding:.25rem 0;
font-size:1rem;
width:56px;
}
/* Gallery (PHP) */
.folder-bar{
display:flex;
align-items:center;
gap:.5rem;
padding:.6rem 1rem;
border-bottom:1px solid #242424;
}
.crumbs{
display:flex;
flex-wrap:wrap;
gap:.4rem;
font-size:.9rem;
}
.crumbs button{
background:none;
border:none;
color:var(--accent);
cursor:pointer;
padding:.2rem .3rem;
}
.crumbs .sep{
color:#666;
}
.folders-track, .gallery-track{
display:flex;
gap:.8rem;
overflow-x:auto;
padding:.8rem 1rem;
}
.folder-card{
flex:0 0 auto;
display:flex;
align-items:center;
gap:.6rem;
background:#222;
border:1px solid #333;
border-radius:.7rem;
padding:.55rem .75rem;
cursor:pointer;
}
.folder-card:hover{
border-color:var(--accent);
background:#2f2f2f;
}
.gallery-track img{
width:220px;
height:150px;
object-fit:cover;
border-radius:.8rem;
background:#333;
flex-shrink:0;
border:1px solid #333;
cursor:pointer;
}
.gallery-track img:hover{
border-color:var(--accent);
}
.empty-hint{
color:#aaa;
font-size:.9rem;
padding:0 1rem .8rem 1rem;
}
/* Main content */
.content{
flex:1;
display:flex;
flex-direction:column;
gap:.6rem;
padding:1rem;
}
.meta{
font-size:.9rem;
color:#cfcfcf;
opacity:.9;
}
/* Objects bar */
.objects {
display:flex;
align-items:center;
gap:.5rem;
background:#161616;
border:1px solid #2a2a2a;
border-radius:.6rem;
padding:.5rem .6rem;
}
.obj-pill{
background:#222;
color:#ddd;
border:1px solid #333;
border-radius:999px;
padding:.35rem .7rem;
cursor:pointer;
}
.obj-pill.active{
background:var(--accent);
color:#000;
border-color:transparent;
}
.objects .controls{
display:flex;
gap:.4rem;
margin-left:auto;
}
.objects .controls button{
background:#222;
color:#ddd;
border:1px solid #333;
border-radius:.5rem;
padding:.35rem .6rem;
cursor:pointer;
}
.objects .controls button:hover{
background:var(--accent);
color:#000;
border-color:transparent;
}
/* Lines (within active object) */
.lines {
display:flex;
gap:.5rem;
align-items:center;
flex-wrap:wrap;
background:#161616;
border:1px solid #2a2a2a;
border-radius:.6rem;
padding:.5rem .6rem;
}
.line-pill{
background:#222;
color:#ddd;
border:1px solid #333;
border-radius:999px;
padding:.35rem .7rem;
cursor:pointer;
}
.line-pill.active{
background:var(--accent);
color:#000;
border-color:transparent;
}
.lines .controls{
display:flex;
gap:.4rem;
margin-left:auto;
}
.lines .controls button{
background:#222;
color:#ddd;
border:1px solid #333;
border-radius:.5rem;
padding:.35rem .6rem;
cursor:pointer;
}
.lines .controls button:hover{
background:var(--accent);
color:#000;
border-color:transparent;
}
/* Tank (for active line) */
.tank {
display:flex;
align-items:center;
gap:.6rem;
background:#161616;
border:1px solid #2a2a2a;
border-radius:.6rem;
padding:.5rem .6rem;
}
.tank .count{
color:#bbb;
font-size:.9rem;
}
.tank-strip{
display:flex;
gap:.5rem;
overflow-x:auto;
padding:.3rem;
background:#0f0f0f;
border-radius:.4rem;
border:1px dashed #333;
flex:1;
}
.tank-item{
position:relative;
flex:0 0 auto;
width:72px;
height:72px;
border:1px solid #2a2a2a;
border-radius:.35rem;
overflow:hidden;
background:#111;
}
.tank-item img{
width:100%;
height:100%;
object-fit:contain;
image-rendering:pixelated;
display:block;
}
.badge{
position:absolute;
left:4px;
top:4px;
background:#000c;
color:#fff;
border-radius:.3rem;
padding:.05rem .3rem;
font-weight:700;
font-size:.85rem;
}
.remove{
position:absolute;
right:4px;
top:4px;
background:#000c;
color:#fff;
border:none;
border-radius:.3rem;
padding:.05rem .35rem;
cursor:pointer;
font-size:.85rem;
}
.remove:hover{
background:#f44336;
}
/* Stage */
.stage{
position:relative;
flex:1;
background:#0f0f0f;
border:1px solid #2a2a2a;
border-radius:.8rem;
overflow:hidden;
touch-action:none;
}
.viewport{
position:absolute;
left:0;
top:0;
transform-origin:0 0;
will-change: transform;
}
.img-layer{
position:absolute;
left:0;
top:0;
}
.img-layer img{
display:block;
image-rendering:pixelated;
}
.grid{
position:absolute;
left:0;
top:0;
pointer-events:auto;
}
.tile{
position:absolute;
border:1px solid red;
box-sizing:border-box;
pointer-events:auto;
}
/* Full-screen Object View */
.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:none;
z-index:50;
}
.overlay.open{
display:block;
}
.ov-wrap{
position:absolute;
inset:3%;
background:#111;
border:1px solid #333;
border-radius:.8rem;
display:flex;
flex-direction:column;
overflow:hidden;
}
.ov-head{
display:flex;
align-items:center;
gap:.6rem;
padding:.6rem .8rem;
background:#1b1b1b;
border-bottom:1px solid #222;
}
.ov-head h2{
margin:0;
font-size:1.05rem;
color:var(--accent);
}
.ov-head button{
margin-left:auto;
background:#222;
color:#ddd;
border:1px solid #333;
border-radius:.5rem;
padding:.35rem .6rem;
cursor:pointer;
}
.ov-head button:hover{
background:var(--accent);
color:#000;
border-color:transparent;
}
.ov-body{
flex:1;
overflow:auto;
padding:.8rem;
display:flex;
flex-direction:column;
gap:.8rem;
}
/* Attribute editors inside overlay */
.attr-row {
display:flex;
gap:.4rem;
margin:.35rem 0;
align-items:center;
}
.attr-row input{
padding:.35rem .5rem;
background:#1e1e1e;
border:1px solid #333;
border-radius:.35rem;
color:#eee;
}
.attr-row .attr-key{
flex:0 0 180px;
}
.attr-row .attr-val{
flex:1;
}
.attr-del{
background:#222;
color:#ddd;
border:1px solid #333;
border-radius:.35rem;
padding:.35rem .5rem;
cursor:pointer;
}
.attr-del:hover{
background:#f44336;
}
.attr-add{
background:#222;
color:#ddd;
border:1px solid #333;
border-radius:.35rem;
padding:.35rem .6rem;
cursor:pointer;
}
.attr-add:hover{
background:var(--accent);
color:#000;
}
.ov-line{
background:#151515;
border:1px solid #2a2a2a;
border-radius:.6rem;
padding:.6rem;
}
.ov-line h3{
margin:.1rem 0 .5rem;
font-size:.95rem;
color:#ddd;
}
.ov-strip{
display:flex;
gap:.5rem;
flex-wrap:wrap;
}
.ov-item{
position:relative;
width:80px;
height:80px;
border:1px solid #333;
border-radius:.35rem;
overflow:hidden;
background:#111;
}
.ov-item img{
width:100%;
height:100%;
object-fit:contain;
image-rendering:pixelated;
}
.ov-badge{
position:absolute;
left:4px;
top:4px;
background:#000c;
color:#fff;
border-radius:.3rem;
padding:.05rem .35rem;
font-weight:700;
font-size:.85rem;
}