/* Editor de mapas (megaman-x card WEB1). Colours from style.css tokens (--panel, --line, --blue, --yellow, --muted). */
.me-intro{padding-top:56px;padding-bottom:12px}.me-intro h1{font-size:clamp(32px,4vw,52px);margin:10px 0 16px}
.me-intro p{color:var(--muted);line-height:1.7;max-width:72ch}.me-intro ol{color:var(--muted);line-height:1.7;max-width:72ch;padding-left:22px}
.me-nojs{border:1px solid var(--line);border-radius:8px;padding:14px 16px;color:var(--yellow)}
.me-app{padding-bottom:70px}
.me-bar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:end;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.me-bar label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.me-bar select,.me-bar input,.me-code textarea{background:#071221;color:var(--text);border:1px solid #3a5470;border-radius:6px;font:inherit;padding:8px 10px;min-height:40px}
.me-bar input[type=number]{width:92px}.me-bar input[type=text]{width:180px}
.me-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.me-group>span{font-size:14px;color:var(--muted);width:100%}
.me-app button{background:#10273b;color:var(--blue);border:1px solid #3a5470;border-radius:6px;min-height:40px;padding:8px 12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.me-app button:hover{background:#19384e}.me-app button[aria-pressed=true]{background:var(--blue);color:#071221;border-color:var(--blue)}
.me-work{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;margin-top:16px}
.me-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.me-palette-frame{max-height:62vh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#000;width:calc(512px + 2px + 16px);max-width:100%}
.me-palette{display:block;cursor:pointer;image-rendering:pixelated;width:512px}
.me-view{position:relative;height:62vh;min-height:300px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#0b1a2b}
.me-sizer{position:relative}
.me-grid{position:absolute;left:0;top:0;display:block;image-rendering:pixelated;touch-action:none}
.me-info{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted);margin:10px 0 0}
.me-info span,.me-side p{margin:0;font-size:14px;color:var(--muted)}
.me-bad{color:#ff9a8a!important}
.me-code{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.me-code>div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.me-code h2{font-size:20px;margin:0}.me-code p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.me-code textarea{width:100%;box-sizing:border-box;min-height:120px;font-family:"JetBrains Mono",monospace;font-size:12px;word-break:break-all;resize:vertical}
.me-code .me-group{gap:8px}
.me-status{min-height:1.4em;font-size:14px;color:var(--green);margin:12px 0 0}
.me-later{margin-top:26px;color:var(--muted);line-height:1.7;max-width:72ch}
@media(max-width:900px){.me-work{grid-template-columns:minmax(0,1fr)}.me-palette-frame{max-height:34vh;width:auto}.me-palette{width:100%;max-width:512px}.me-view{height:52vh}.me-code{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.me-bar{padding:12px}.me-bar label{flex:1 1 40%}.me-bar input[type=text]{width:100%}.me-bar input[type=number]{width:100%}}