:root{--bg: #0e1620;--panel: #16212e;--panel-2: #1d2b3a;--ink: #e7eef5;--muted: #8da2b5;--red: #e30a17;--gold: #e8b923;--turq: #179e94;--line: #26384a}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-user-select:none;user-select:none}#app{display:grid;grid-template-columns:264px 1fr;grid-template-rows:52px 1fr;grid-template-areas:"top top" "pal stage";height:100vh}#topbar{grid-area:top;display:flex;align-items:center;gap:16px;padding:0 14px;background:linear-gradient(90deg,#16212e,#1a2735);border-bottom:1px solid var(--line);z-index:5}.brand{font-size:18px;font-weight:600;letter-spacing:.3px;white-space:nowrap}.brand .logo{color:var(--gold)}.brand b{color:var(--red)}.brand em{color:var(--muted);font-size:12px;font-style:normal;font-weight:400;margin-left:6px}#floorbar{display:flex;gap:6px;overflow-x:auto;flex:1}#tools{display:flex;gap:6px}#status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}#netdot{width:9px;height:9px;border-radius:50%;background:#555}#netdot.on{background:#2ecc71;box-shadow:0 0 8px #2ecc71}#netdot.off{background:var(--gold)}button{font-family:inherit;cursor:pointer}.floor-btn,.tool-btn{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);padding:6px 12px;border-radius:8px;font-size:13px;white-space:nowrap}.floor-btn:hover,.tool-btn:hover{border-color:var(--turq)}.floor-btn.active{background:var(--turq);border-color:var(--turq);color:#06201d;font-weight:600}.floor-btn.add{color:var(--gold)}.tool-btn.active{background:var(--gold);color:#2a2200;border-color:var(--gold);font-weight:600}#palette{grid-area:pal;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:10px}.pal-group h4{margin:12px 4px 8px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--gold)}.pal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.pal-item{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:6px 4px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);transition:transform .06s,border-color .1s}.pal-item:hover{border-color:var(--turq);transform:translateY(-1px)}.pal-item.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;color:var(--ink)}.pal-item img{width:46px;height:46px;object-fit:contain}.pal-item span{font-size:10.5px;text-align:center;line-height:1.1}#stage{grid-area:stage;position:relative;overflow:hidden;background:radial-gradient(1200px 700px at 60% 30%,#1a2a3a,#0c141d 70%)}#board{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}#overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}.anim-sprite{position:absolute;left:0;top:0;transform-origin:top left;image-rendering:auto}#hud{position:absolute;left:12px;bottom:12px;background:#0c141dd1;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--muted);line-height:1.5;pointer-events:none;backdrop-filter:blur(4px)}#hud b{color:var(--ink)}@media(max-width:760px){#app{grid-template-columns:1fr;grid-template-rows:52px 1fr 38vh;grid-template-areas:"top" "stage" "pal"}#palette{border-right:none;border-top:1px solid var(--line)}.brand em{display:none}}