*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-user-select:none;user-select:none}
html,body{height:100%;background:#000;color:#eee}
header{background:#222;padding:.5rem .75rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
header h1{font-size:1rem;margin-right:auto;white-space:nowrap}
header .actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
header .mapname{display:flex;align-items:center;gap:.4rem}
header .mapname input{width:160px;padding:.3rem .4rem;border-radius:6px;border:1px solid #444;background:#111;color:#eee}
header button{padding:.35rem .6rem;border:none;border-radius:6px;background:#4caf50;color:#fff;cursor:pointer}
header button[aria-pressed="true"]{background:#e53935}
header .secondary{background:#555}
#status{font-size:.8rem;opacity:.8}

main{position:relative;min-height:calc(100vh - 48px);padding:.5rem;padding-bottom:130px}
#canvasWrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
#mapCanvas{background:#000;image-rendering:pixelated;border-radius:8px;touch-action:none}

#portalListPanel{position:fixed;left:0;right:0;bottom:72px;background:#1f1f1f;border-top:1px solid #111;padding:.6rem clamp(8px,3vw,16px)}
.sectionTitle{font-weight:700;margin-bottom:.25rem}
.list{display:flex;flex-direction:column;gap:.25rem;max-height:18vh;overflow:auto}
.list.empty{opacity:.6}
.list .item{display:flex;gap:.5rem;align-items:center;background:#2a2a2a;border:1px solid #333;border-radius:8px;padding:.35rem .5rem}
.list .meta{font-size:.9rem;opacity:.95}
.list .grow{flex:1}
.list button{padding:.25rem .5rem;border:none;border-radius:6px;background:#444;color:#fff;cursor:pointer}
.list .danger{background:#e53935}

#palette{position:fixed;left:0;right:0;bottom:0;background:#2b2b2b;
  padding:.4rem max(8px,env(safe-area-inset-right)) calc(.4rem + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  display:flex;gap:.5rem;overflow-x:auto;border-top:1px solid #111}
#palette img{width:40px;height:40px;image-rendering:pixelated;cursor:pointer;border:2px solid transparent;border-radius:4px;background:#111;flex:0 0 auto}
#palette img.selected{border-color:#fff}

/* Modal */
#modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:9999}
#modal.show{display:flex}
#modal .sheet{background:#1c1c1c;border:1px solid #333;border-radius:10px;padding:1rem;max-width:420px;width:92%}
#modal h2{font-size:1.1rem;margin-bottom:.5rem}
#modal p{font-size:.9rem;opacity:.9;margin-bottom:.5rem}
#modal input{width:100%;padding:.5rem .6rem;border:1px solid #444;border-radius:6px;background:#0f0f0f;color:#eee;margin-bottom:.6rem}
#modal .buttons{display:flex;gap:.5rem;justify-content:flex-end}
#modal button{padding:.4rem .7rem;border:none;border-radius:6px;background:#4caf50;color:#fff;cursor:pointer}
#modal button.secondary{background:#555}

/* Desktop layout */
@media (pointer:fine) and (min-width:900px){
  main{display:grid;grid-template-columns: 220px 1fr 280px;grid-template-rows: 1fr;gap:.75rem;padding-bottom:.5rem}
  #palette{position:static;width:220px;display:flex;flex-wrap:wrap;align-content:flex-start;height:auto;overflow:auto;border:0;border-radius:8px}
  #palette img{width:32px;height:32px}
  #portalListPanel{position:static;border-radius:8px}
}