@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  font: 18px "Barlow Condensed", "Arial Narrow", sans-serif;
  background: #171019;
  color: #f3ecea;
  --yellow: #ffbc00;
  --border: #493746;
  --field: #22181f;
}
* { box-sizing: border-box; }
body { margin: 0; }
header {
  min-height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 8px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--border);
  background: #160f17; letter-spacing: .09em;
}
header button { margin-left: auto; }
.mark { display: grid; place-items: center; width: 32px; height: 32px; background: var(--yellow); color: #211805; font-weight: 700; }
main { max-width: 1540px; margin: auto; padding: 22px clamp(12px, 3vw, 36px); }
h1 { font-size: clamp(29px, 4vw, 42px); text-transform: uppercase; margin: 0 0 12px; }
form, article { border: 1px solid var(--border); background: var(--field); padding: 16px; }
form { max-width: 400px; display: grid; gap: 10px; }
.toolbar p { margin: 0 0 12px; color: #d1becd; }
input, select, button { font: inherit; border: 1px solid var(--border); padding: 8px 12px; background: var(--field); color: inherit; min-width: 0; }
button { cursor: pointer; font-weight: 600; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #ffda64; outline-offset: 2px; }
.primary { background: var(--yellow); color: #241808; border-color: #f7a915; text-transform: uppercase; min-width: 174px; }
#configuracion {
  border: 1px solid var(--border);
  background: radial-gradient(ellipse at 58% 32%, #523635, transparent 67%), linear-gradient(145deg, #2b1829, #252039 75%, #1b121d);
}
.preset { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: #1d141de6; }
.preset label { display: grid; gap: 4px; }
.formulario-juego { display: grid; grid-template-columns: minmax(142px, 16%) minmax(0, 1fr); min-height: 440px; }
#pestanas { display: grid; align-content: start; gap: 5px; padding: 22px 10px 15px 0; }
#pestanas button {
  text-align: left; text-transform: uppercase; font-size: 1.18rem; padding: 16px;
  background: #160f18; clip-path: polygon(0 0, 100% 0, 100% 83%, 94% 100%, 0 100%);
}
#pestanas button[aria-pressed="true"] { background: var(--yellow); color: #211804; box-shadow: inset 5px 0 #aa6900; }
#opciones { padding: clamp(14px, 4vw, 42px); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.campo { display: grid; grid-template-columns: minmax(115px, 40%) minmax(0, 1fr); align-items: center; gap: 10px; }
.campo > span { text-transform: uppercase; line-height: 1.04; }
.campo select { width: 100%; }
.campos-sala [data-campo="modo_juego"], .campos-sala [data-campo="mapa"], .campos-sala [data-campo="equipo"] { grid-column: 1/-1; grid-template-columns: minmax(145px, 20%) minmax(0, 1fr); }
.campos-juego [data-campo="modo_preestablecido"] { grid-column: 1/-1; display: grid; border-bottom: 1px solid var(--border); padding-bottom: 14px; grid-template-columns: 1fr; }
.campos-juego [data-campo="clima"], .campos-juego [data-campo="limite_municion"] { border-top: 1px solid var(--border); padding-top: 12px; }
.selecciones { display: flex; flex-wrap: wrap; gap: 4px; }
.selecciones button { background: transparent; border-color: transparent; padding: 5px; white-space: nowrap; }
.selecciones button::before { content: "◈"; color: #ad9eae; margin-right: .3em; }
.selecciones button[aria-pressed="true"]::before { color: var(--yellow); }
.selecciones button[aria-pressed="true"] { color: #fff2c2; }
.selecciones button[data-valor=""] { font-size: .85rem; }
.selecciones-mapa, .selecciones-modo_preestablecido { gap: 6px; }
.selecciones-mapa button, .selecciones-modo_preestablecido button { background: #211720; border: 1px solid var(--border); padding: 8px 12px; text-transform: uppercase; }
.selecciones-mapa button[aria-pressed="true"], .selecciones-modo_preestablecido button[aria-pressed="true"] { border-color: var(--yellow); }
.subpestanas { display: flex; gap: 2px; margin-bottom: 18px; }
.subpestanas button { flex: 1; text-transform: uppercase; }
.subpestanas button[aria-pressed="true"] { background: #ded7d7; color: #261b24; }
.grupo-avanzado { grid-template-columns: 1fr; border-top: 1px solid var(--border); margin-top: 14px; padding-top: 10px; }
.editor-avanzado, .fila-ajuste { display: grid; gap: 8px; }
.fila-ajuste { margin-bottom: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
.precio-tienda { display: grid; grid-template-columns: minmax(0, 1fr) 5rem; align-items: center; gap: 8px; }
.precio-tienda input[type="number"] { width: 100%; }
.precio-tienda input[type="range"] {
  appearance: none; width: 100%; height: 8px; margin: 0; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(to right, #ffc400 var(--precio-porcentaje), #0b080d var(--precio-porcentaje));
}
.precio-tienda input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 14px; height: 18px; background: #eee;
}
.precio-tienda input[type="range"]::-moz-range-thumb {
  width: 14px; height: 18px; border: 0; border-radius: 0; background: #eee;
}
.editor-avanzado > button { justify-self: start; }
.acciones-sala { display: flex; justify-content: center; padding: 12px 15px 20px; }
article { margin-top: 10px; display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
article p { margin: 5px 0; color: #d1becd; }
#aviso { color: #ffce83; }
[hidden] { display: none !important; }
@media (max-width: 780px) {
  .formulario-juego { display: block; min-height: 0; }
  #pestanas { display: flex; overflow-x: auto; padding: 10px; }
  #pestanas button { flex: 1 0 auto; padding: 8px 10px; font-size: 1rem; }
  .campos { grid-template-columns: 1fr; }
  .campos-sala [data-campo] { grid-template-columns: minmax(105px, 32%) minmax(0, 1fr); }
}
.selecciones-mapa button:not([data-valor=""]) {
  flex: 1 0 clamp(86px, 13vw, 140px); max-width: 175px; min-height: 80px;
  display: flex; align-items: end; justify-content: center;
  background-image: linear-gradient(transparent 45%, #0b080bdd 87%), url(/mapas.webp);
  background-size: 100% 100%, 500% 100%;
  background-position: center, var(--mapa) center;
  padding: 5px; font-size: 1rem;
}
.selecciones-mapa button[data-valor="bermuda"] { --mapa: 0%; }
.selecciones-mapa button[data-valor="nexterra"] { --mapa: 25%; }
.selecciones-mapa button[data-valor="purgatorio"] { --mapa: 50%; }
.selecciones-mapa button[data-valor="kalahari"] { --mapa: 75%; }
.selecciones-mapa button[data-valor="solara"] { --mapa: 100%; }
.selecciones-mapa button::before, .selecciones-modo_preestablecido button::before { content: none; }
.editor-economia { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 30px; }
.monedas-celda { display: grid; grid-template-columns: minmax(64px,1fr) 32px 32px 42px; align-items: end; gap: 4px; }
.monedas-celda label { display: grid; gap: 4px; text-transform: uppercase; }
.monedas-celda input { width: 100%; }
.monedas-celda button { padding-inline: 4px; background: #d8d4d2; color: #1b1319; }
.editor-area { display: grid; grid-template-columns: minmax(110px,22%) minmax(0,1fr); gap: 12px; }
.rondas-area { display: grid; align-content: start; gap: 4px; }
.rondas-area button, .zonas-area button { text-align: left; }
.rondas-area button[aria-pressed="true"] { background: #ddd7d6; color: #1a1318; }
.zonas-area { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,100px),1fr)); align-content: start; gap: 6px; padding: 8px; background: #160e19a3; }
.zonas-area button { min-height: 48px; }
.zonas-area button[aria-pressed="true"] { border-color: var(--yellow); color: var(--yellow); }
.zonas-area p { grid-column: 1/-1; margin: 4px; }
@media(max-width:620px) {
  .editor-economia { grid-template-columns: 1fr; }
  .editor-area { grid-template-columns: 1fr; }
  .rondas-area { display: flex; overflow-x: auto; }
  .rondas-area button { flex: 0 0 auto; }
}
.contexto-especial { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 14px; }
.contexto-especial label { display: flex; align-items: center; gap: 12px; text-transform: uppercase; }
.zonas-area button:has(.zona-miniatura) { display: grid; grid-template-rows: auto 1fr; align-content: start; padding: 0; overflow: hidden; }
.zona-miniatura { display: block; width: 100%; aspect-ratio: 6/5; background-image: url(/zonas.webp); background-size: 1200% 500%; }
.zonas-area button:has(.zona-miniatura) .zona-nombre { padding: 5px 7px; line-height: 1.1; }
/* Adaptación del diseño NLOZ RANK original al motor HTTP C++ de FFRoomCreator. */
@media (prefers-reduced-motion: no-preference) { button, input, select { transition: border-color .16s,background-color .16s,color .16s; } }
button:hover:not(:disabled) { border-color:#9f7d5e; }
button[aria-pressed="true"] { cursor:default; }
.site-header .header-ip { color:#9d879e; margin-left:auto; font-size:.8rem; letter-spacing:0; }
.site-header #salir {margin-left:0}
#login-panel { max-width:460px; }
#login-panel p {color:#c5aec3}
#login input {width:100%}
#login button {width:100%}
#configuracion { overflow:hidden; }
.preset-note { color:#9d879e; align-self:center; font-size:.78rem; margin-left:auto; }
.preset input {width:170px}
.preset select {width:145px}
#pestanas button { min-height:72px; border:1px solid #2a1e2e; }
#pestanas button[aria-pressed="true"] { border-color:#ae7216; }
#opciones { padding: clamp(14px,3vw,36px); min-width:0; }
.panel-tab { min-height:410px; }
.campos-sala { row-gap:20px; }
.campos-sala [data-campo="mapa"] { padding-block:9px; }
.campos-sala .campo > input, .campo select { width:100%; }
.fixed-value {padding:10px 12px;border:1px solid #564252;background:#1c131d;min-height:42px;}
.campos-sala .selecciones-mapa {display:flex; flex-wrap:wrap}
.selecciones-mapa button:not([data-valor=""]) {min-height:76px}
.selecciones-mapa button[aria-pressed="true"] {box-shadow:inset 0 0 0 2px #ffbc00, 0 0 0 1px #0003;}
.dual {display:grid;grid-template-columns:80px auto minmax(82px,130px);align-items:center;gap:12px}
.dual output {padding:9px 12px;background:#1c141e;border:1px solid #554052}
.dual span {font-size:.88rem;color:#ddc7d6}
.acciones-sala {gap:12px;align-items:center;flex-wrap:wrap}
.acciones-sala button {min-width:130px;text-transform:uppercase}
#volver-sala {background:transparent;border-color:transparent;color:#ffca25}
.rooms-section {margin-top:24px}
.rooms-head {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}
.rooms-head h2{font-size:1.32rem;letter-spacing:.04em;margin:0}
.rooms-section article {background:#251b29;border-color:#523949}
.room-meta {display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.room-id{font-size:.9rem;color:#ffcf50}
.room-title{display:block;font-size:1.2rem}
.room-buttons{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.room-buttons button{font-size:.89rem}
.status-dot {display:inline-block;height:8px;width:8px;border-radius:50%;background:#a87786;margin-right:7px}
.status-dot.online{background:#4dd6a1;box-shadow:0 0 8px #31bf8b88}
.section-line {height:1px;background:var(--border);margin:22px 0}
.campos-juego {gap:12px 28px}
.campos-juego .campo {grid-template-columns:45% 55%}
.flags-grid {column-gap:40px;row-gap:12px}
.flag-row {display:grid;grid-template-columns:minmax(130px,1fr) minmax(110px,1fr);align-items:center;gap:12px;min-height:36px}
.flag-row >span {text-transform:uppercase;font-size:.91rem}
.flag-actions {display:flex;gap:8px;justify-content:flex-start}
.flag-actions button{background:transparent;border-color:transparent;padding:5px 7px;font-weight:500}
.flag-actions button:before{content:'◇';margin-right:5px;color:#9f8ea2}
.flag-actions button[aria-pressed="true"]:before{content:'◆';color:#ffbc00}
.flag-actions button[aria-pressed="true"]{color:#ffcf47}
.flag-row.disabled {opacity:.45}
.feature-note {font-size:.86rem;color:#b9a2bb;line-height:1.45;margin-top:14px}
.editor-actions {display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.special-header {display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-bottom:15px;flex-wrap:wrap}
.special-header > span {font-size:.8rem;color:#bba5bb}
.special-toggle {display:flex;align-items:center;gap:14px;font-size:.95rem;letter-spacing:.035em;white-space:nowrap}
.special-toggle input {position:absolute;opacity:0;width:1px;height:1px}
.toggle-track{display:inline-block;vertical-align:middle;width:45px;height:22px;border:1px solid #9f8686;background:#4b3d42;position:relative}
.toggle-track:after{content:'';width:17px;height:16px;position:absolute;top:2px;left:2px;background:#ded8d6;transition:transform .15s}
.special-toggle input:checked+.toggle-track{background:var(--yellow);border-color:#ffc400}
.special-toggle input:checked+.toggle-track:after{transform:translateX(21px);background:#291b06}
.special-toggle input:focus-visible+.toggle-track{outline:2px solid white;outline-offset:3px}
.special-content{padding-top:2px}
.catalog-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}
.catalog-head p{color:#bea9b9;margin:5px 0;font-size:.9rem}
.filter-row{display:flex;gap:8px;margin-bottom:10px}
.filter-row input{flex:1}
.shop-items {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:530px;overflow-y:auto;padding-right:3px}
.shop-row{background:#1c131d99;border:1px solid #483547;padding:8px 10px;display:grid;grid-template-columns:auto minmax(80px,1fr) 80px auto;align-items:center;gap:8px}
.shop-row input[type="number"]{width:100%;padding:6px;font-size:.9rem}
.shop-row input[type="checkbox"]{accent-color:#ffc400;width:17px;height:17px}
.shop-row strong{font-size:.87rem;line-height:1.1;display:block}
.shop-row small {color:#ad94a6;font-size:.7rem}
.shop-row button{padding:6px 9px;font-size:.82rem}
.monedas-celda input[type="number"]{max-width:none}
.monedas-celda button {height:38px}
.monedas-celda {align-items:end}
.contexto-especial{border-bottom:1px solid #574253;padding-bottom:18px;margin-bottom:17px}
.contexto-especial select{min-width:135px}
.area-preview{width:100%;max-height:320px;aspect-ratio:16/7;background-image:url(/zonas.webp);background-size:cover;background-position:center;opacity:.6;border:1px solid var(--border)}
#aviso {margin-top:16px;min-height:1.4em;font-size:1rem}
#aviso.error{color:#ff9299}
@media(max-width:1100px){.shop-items{grid-template-columns:1fr}.formulario-juego{grid-template-columns:minmax(130px,20%) minmax(0,1fr)}.campo{grid-template-columns:minmax(115px,32%) minmax(0,1fr)}}
@media(max-width:800px){.formulario-juego{display:block}.campos{grid-template-columns:1fr}.campo{grid-template-columns:minmax(110px,35%) minmax(0,1fr)}.campos-sala [data-campo="modo_juego"],.campos-sala [data-campo="mapa"],.campos-sala [data-campo="equipo"] {grid-column:1/-1;grid-template-columns:minmax(110px,35%) minmax(0,1fr)}.preset-note{display:none}}
@media(max-width:530px){.campo,.campos-sala [data-campo="modo_juego"],.campos-sala [data-campo="mapa"],.campos-sala [data-campo="equipo"]{display:grid;grid-template-columns:1fr;gap:8px}.dual{grid-template-columns:55px auto 86px}.flag-row{grid-template-columns:1fr auto}.acciones-sala button{flex:1}.filter-row{flex-direction:column}#opciones{padding:15px}.shop-row{grid-template-columns:auto minmax(80px,1fr) 70px;}.shop-actions{grid-column:2/-1}}

.shop-row.unsaved { border-left: 3px solid #ffc400; }

.shop-actions { display:flex; flex-wrap:wrap; gap:4px; }