/* Editor de mapas propios (/mapas). Usa los botones, paneles y campos de studio.css. */
.mp { max-width: 1500px; margin: 0 auto; padding: 18px 24px 56px; }
.mp-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.mp-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.mp-nav a:hover { color: var(--gold); }
.mp h1 { margin: 6px 0 6px; font: 900 clamp(28px, 5vw, 42px)/1.1 var(--font-display); letter-spacing: .04em; color: var(--gold); text-transform: uppercase; }
.mp .lead { margin: 0 0 18px; color: var(--muted); font-size: 17px; line-height: 1.5; max-width: 760px; }
.mp a { color: var(--gold); }
.mp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.mp-main, .mp-side { display: grid; gap: 14px; min-width: 0; }

/* barra de herramientas */
.mp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mp-tools { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .35); }
.mp-tools button { min-height: 40px; padding: 6px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 800; cursor: pointer; }
.mp-tools button.on { background: var(--gold); color: #1a1208; }
.mp-check { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14px; color: var(--ink); cursor: pointer; }
.mp-check input { width: 18px; height: 18px; accent-color: var(--gold); }
.mp-check:has(input:checked) { color: var(--gold-light); font-weight: 700; }
.mp-check.big { font-size: 15px; font-weight: 700; }

/* lienzo: 960x640 escalado al ancho, pixeles nitidos; touch-action none para pintar con el dedo */
.mp-canvas { position: relative; padding: 6px; border-radius: 16px; background: linear-gradient(160deg, var(--gold-light), var(--gold) 40%, var(--gold-dark)); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.mp-canvas canvas { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 11px; background: #0c0a08; image-rendering: pixelated; touch-action: none; cursor: crosshair; }
.mp-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-weight: 700; }
#cell-info { margin-top: 0; min-height: 1.45em; }

/* sprites para elegir */
.mp-toolhint { margin: -4px 0 0; min-height: 1.45em; }
.mp-brush { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 12px; }
.mp-brush small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mp-cur { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 10px 4px 4px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
.mp-cur canvas { width: 44px; height: 44px; image-rendering: pixelated; border-radius: 8px; background: rgba(0, 0, 0, .35); }
.mp-cur span { font-weight: 700; overflow-wrap: anywhere; }
.mp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mp-tabs button { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .3); color: var(--muted); font-weight: 800; cursor: pointer; }
.mp-tabs button.on { background: var(--gold); border-color: var(--gold); color: #1a1208; }
.mp-search { margin: 0 0 6px; max-width: 360px; }
.mp-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.mp-cats button { min-height: 34px; padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.mp-cats button.on { border-color: var(--gold-light); color: #1a1208; background: var(--gold-light); }
.mp-browser { max-height: 520px; overflow-y: auto; padding-right: 4px; margin-top: 6px; }
.mp-browser h3 { margin: 14px 0 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-light); }
.mp-browser .hint { margin: 10px 0 0; }
.mp-sprites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mp-sprite { width: 60px; height: 60px; padding: 2px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .3); cursor: pointer; }
.mp-sprite canvas { width: 52px; height: 52px; display: block; image-rendering: pixelated; }
.mp-sprite.block { border-color: rgba(229, 72, 77, .55); }
.mp-sprite.on { border-color: var(--gold); background: rgba(224, 176, 80, .18); box-shadow: 0 0 0 2px rgba(224, 176, 80, .35); }

.mp-tip { position: absolute; z-index: 50; display: grid; justify-items: center; gap: 4px; width: 180px; padding: 10px; border-radius: 12px; border: 1px solid rgba(224, 176, 80, .5); background: #16110a; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); pointer-events: none; text-align: center; }
.mp-tip canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.mp-tip b { overflow-wrap: anywhere; }
.mp-tip small { color: var(--muted); font-size: 12px; }
.mp-tip[hidden] { display: none; }

/* lateral */
.mp-weather { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
/* botones que se prenden (clima): apagado gris, prendido dorado con marca */
.mp-chip { min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .3); color: var(--muted); font-weight: 800; cursor: pointer; }
.mp-chip:hover { border-color: rgba(224, 176, 80, .6); color: var(--ink); }
.mp-chip.on { background: var(--gold); border-color: var(--gold); color: #1a1208; box-shadow: 0 0 0 2px rgba(224, 176, 80, .35); }
.mp-chip.on::before { content: "\2713  "; }
.mp-row { margin-top: 12px; }
.mp-file { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.mp-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mp-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; line-height: 1.4; }
.mp-rules li { position: relative; padding-left: 24px; }
.mp-rules li::before { position: absolute; left: 0; top: 0; width: 18px; text-align: center; font-weight: 900; }
.mp-rules li.ok { color: var(--ink); }
.mp-rules li.ok::before { content: "✓"; color: #37d67a; }
.mp-rules li.bad { color: #ffb3a8; }
.mp-rules li.bad::before { content: "✗"; color: #ff5a4a; }
.badge.ok { background: #37d67a; color: #06200f; }
.badge.bad { background: #e5484d; color: #fff; }
.mp-mine { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mp-mine li { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .28); }
.mp-mine li div:first-child { display: grid; }
.mp-mine li b { overflow-wrap: anywhere; }
.mp-mine li small { color: var(--muted); font-size: 12px; }
.mp-mine li div:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-mine li.empty { color: var(--muted); font-size: 14px; }
.mp-msg { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(224, 176, 80, .4); background: rgba(224, 176, 80, .08); line-height: 1.4; }
.mp-msg:empty { display: none; }
.mp-msg.bad { color: #ffb3a8; border-color: rgba(230, 57, 70, .6); background: rgba(230, 57, 70, .1); }
.mp-help { margin-top: 22px; line-height: 1.55; }
.mp-help ol { margin: 0; padding-left: 22px; }
.mp-help li { margin-bottom: 6px; }
.mp-help b { color: var(--gold-light); }

@media (max-width: 1000px) {
  .mp-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mp { padding: 10px 16px 40px; }
  .mp .lead { font-size: 16px; }
  .mp-canvas { padding: 4px; border-radius: 12px; }
  .mp-tools button { padding: 6px 10px; }
  .mp-sprite { width: 52px; height: 52px; }
  .mp-sprite canvas { width: 44px; height: 44px; }
  .mp-tabs button { padding: 6px 12px; }
}