/* pipeline-configurator.css — game-111
   Launcher inside the scene + fullscreen overlay.
   Kept out of pipeline.css on purpose: no !important, real specificity. */

/* ---------- Launcher ----------
   The markup reuses the .game-launcher classes from pipeline.css so the
   box is IDENTICAL to the web game scene (frame, inner card, type, button).
   Only two adjustments live here. */
.cfg-launcher .game-launcher__button:disabled{opacity:.6;cursor:wait}
.cfg-launcher .game-launcher__note{
  margin:14px 0 0;font-size:10px;letter-spacing:.14em;font-weight:900;
  text-transform:uppercase;color:rgba(255,255,255,.45);
}

/* ---------- Fullscreen overlay ---------- */
.cfg-fullscreen{
  position:fixed;inset:0;z-index:2400;
  display:grid;grid-template-columns:1fr 340px;
  background:#fff;color:#000;
  font-family:"Sofia Sans",Arial,Helvetica,sans-serif;
}
/* Dentro del configurador manda el cursor del sistema, como en el juego */
.cfg-fullscreen,.cfg-fullscreen *{cursor:auto!important}
.cfg-fullscreen button,.cfg-fullscreen a,.cfg-fullscreen input[type=range]{cursor:pointer!important}
.cfg-stage canvas{cursor:grab!important}
.cfg-stage canvas:active{cursor:grabbing!important}
.cfg-stage{position:relative;overflow:hidden;border-right:2px solid #000}
.cfg-stage canvas{display:block;width:100%;height:100%}

.cfg-loading{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  background:#fff;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
}
.cfg-loading.is-gone{display:none}

.cfg-exit{
  position:absolute;top:24px;right:24px;z-index:30;height:44px;padding:0 20px;
  background:#fff;border:2px solid #000;color:#000;
  font-family:inherit;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:background .12s linear;
}
.cfg-exit:hover{background:#00ffe0}
.cfg-back{
  position:absolute;top:24px;left:24px;z-index:30;width:44px;height:44px;
  background:#fff;border:2px solid #000;color:#000;
  font-family:inherit;font-size:16px;font-weight:900;line-height:1;cursor:pointer;
  transition:background .12s linear;
}
.cfg-back:hover{background:#00ffe0}

.cfg-hint{
  position:absolute;left:24px;bottom:24px;z-index:6;
  background:#fff;border:2px solid #000;padding:10px 16px;
  font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  transition:opacity .25s linear;
}
.cfg-hint.is-hidden{opacity:0;pointer-events:none}

/* ---------- Time of day ---------- */
.cfg-time{
  position:absolute;right:24px;bottom:24px;z-index:6;width:240px;
  background:#fff;border:2px solid #000;padding:12px 18px 12px;
}
/* El astro: fijo en el centro, sube y baja con su arco y se transforma
   de sol a luna en los crepúsculos. */
.cfg-time__sky{display:block;width:100%;height:96px;overflow:visible}
.cfg-glyph circle,.cfg-glyph line,.cfg-glyph path{
  stroke:#000;stroke-width:1.5;stroke-linecap:round;fill:none;
}
.cfg-glyph__body,.cfg-glyph__rays,.cfg-glyph__crescent{transition:opacity .25s linear}

/* Slider como el boceto: línea de 1px, marcador rectangular fino */
.cfg-time__range{
  -webkit-appearance:none;appearance:none;width:100%;height:20px;
  background:transparent;cursor:pointer;display:block;margin-top:-6px;
}
.cfg-time__range::-webkit-slider-runnable-track{height:1px;background:#000}
.cfg-time__range::-moz-range-track{height:1px;background:#000}
.cfg-time__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:7px;height:18px;
  background:#000;border:0;border-radius:0;margin-top:-8.5px;
}
.cfg-time__range::-moz-range-thumb{width:7px;height:18px;background:#000;border:0;border-radius:0}
.cfg-time__range:hover::-webkit-slider-thumb{background:#8000ff}
.cfg-time__range:hover::-moz-range-thumb{background:#8000ff}
.cfg-time__row{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.cfg-time__val{font-size:12px;font-weight:900;color:#8000ff;letter-spacing:.06em}

/* Engranaje de ajustes del espacio (sólo móvil) */
.cfg-gear{
  position:absolute;z-index:30;display:none;
  width:40px;height:40px;align-items:center;justify-content:center;
  background:#fff;border:2px solid #000;cursor:pointer;padding:0;
  transition:background .12s linear;
}
.cfg-gear:hover{background:#00ffe0}
.cfg-gear svg{width:22px;height:22px}
.cfg-gear svg circle,.cfg-gear svg path{
  fill:none;stroke:#000;stroke-width:1.7;stroke-linecap:round;
}

/* CTA permanente (sólo móvil) */
.cfg-cta-float{
  position:absolute;z-index:30;display:none;
  height:40px;line-height:36px;padding:0 16px;
  background:#8000ff;color:#fff;border:2px solid #000;text-decoration:none;
  font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  transition:background .12s linear,color .12s linear;
}
.cfg-cta-float:hover{background:#00ffe0;color:#000}

/* Ocultar la ficha (móvil) y recuperarla */
.cfg-card__hide{
  position:absolute;top:6px;right:8px;z-index:3;display:none;
  width:38px;height:38px;background:#fff;border:2px solid #000;
  font-family:inherit;font-size:14px;font-weight:900;line-height:1;cursor:pointer;
}
.cfg-card__hide:hover{background:#00ffe0}
.cfg-reopen{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(140%);
  z-index:12;height:42px;padding:0 20px;
  background:#8000ff;color:#fff;border:2px solid #000;
  font-family:inherit;font-size:10px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;opacity:0;pointer-events:none;
  transition:transform .25s ease,opacity .25s ease;
}
.cfg-reopen.is-on{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}

/* Tooltip de hover: cuadrado blanco, borde negro, nombre literal */
.cfg-tip{
  position:absolute;z-index:8;pointer-events:none;
  background:#fff;border:2px solid #000;padding:8px 14px;
  font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
}

/* ---------- Shared bits ---------- */
.cfg-lbl{
  display:block;font-size:10px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:12px;color:#000;
}
.cfg-blk{padding:20px 22px}
.cfg-blk + .cfg-blk{border-top:2px solid #000}

/* ---------- Object card ---------- */
.cfg-card{
  position:absolute;left:24px;bottom:24px;z-index:6;width:340px;
  max-height:calc(100% - 96px);display:flex;flex-direction:column;
  background:#fff;border:2px solid #000;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
}
.cfg-card.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
.cfg-card__head{padding:18px 22px;border-bottom:2px solid #000}
.cfg-card__title{
  font-size:26px;line-height:.9;font-weight:800;text-transform:uppercase;
  font-family:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;
}
.cfg-card__ref{
  display:block;margin-top:5px;font-size:10px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;color:#8000ff;
}
.cfg-card__body{overflow-y:auto}

/* Filas de material: nombre + color picker (o etiqueta Textured) */
.cfg-mats{display:grid;gap:2px;background:#000;border:2px solid #000}
.cfg-mat{
  background:#fff;padding:10px 14px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.cfg-mat .nm{font-weight:700;font-size:13px;text-transform:capitalize}
.cfg-mat .tex{
  font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#8000ff;
}
.cfg-mat input[type=color]{
  -webkit-appearance:none;appearance:none;width:44px;height:28px;
  border:2px solid #000;border-radius:0;padding:0;background:#fff;cursor:pointer;
}
.cfg-mat input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.cfg-mat input[type=color]::-webkit-color-swatch{border:none;border-radius:0}
.cfg-mat input[type=color]::-moz-color-swatch{border:none;border-radius:0}

/* Variantes de textura halladas dentro del GLB */
/* flex, no grid fijo: con 2 acabados no queda una celda negra vacía */
.cfg-varrow{display:flex;gap:2px;background:#000;padding:2px}
.cfg-var{flex:1 1 0;min-width:0;background:#fff;border:0;padding:0;cursor:pointer;font-family:inherit;display:block}
.cfg-var .chip{display:block;height:38px;width:100%;background:#ddd}
.cfg-var .cap{
  display:block;padding:5px 3px;text-align:center;
  font-size:8.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
}
.cfg-var:hover .cap,.cfg-var.is-active .cap{background:#00ffe0}

.cfg-swgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:#000;border:2px solid #000;
}
.cfg-swgrid + .cfg-swgrid{margin-top:12px}
.cfg-sw{background:#fff;border:0;padding:0;cursor:pointer;font-family:inherit;display:block}
.cfg-sw .chip{display:block;height:44px;width:100%}
.cfg-sw .cap{
  display:block;padding:6px 4px;text-align:center;
  font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}
.cfg-sw:hover .cap,.cfg-sw.is-active .cap{background:#00ffe0}

.cfg-specs{display:grid;gap:2px;background:#000;border:2px solid #000;margin:0}
.cfg-spec{background:#fff;padding:10px 14px;display:flex;justify-content:space-between;gap:12px}
.cfg-spec dt{font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.cfg-spec dd{font-size:13px;margin:0;text-align:right}
.cfg-note{font-size:12.5px;line-height:1.6;margin:0}

.cfg-switch{
  width:100%;background:#fff;border:2px solid #000;cursor:pointer;font-family:inherit;
  padding:11px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  transition:background .12s linear;
}
.cfg-switch:hover{background:#00ffe0}
.cfg-switch .nm{font-weight:700;font-size:13px}
.cfg-switch .st{
  font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid #000;padding:3px 8px;
}
.cfg-switch.is-on .st{background:#8000ff;color:#fff}

.cfg-slider{margin-top:12px}
.cfg-slider .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cfg-slider .k{font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.cfg-slider .v{font-size:11px;font-weight:900;color:#8000ff}
.cfg-slider input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;
}
.cfg-slider input[type=range]::-webkit-slider-runnable-track{height:2px;background:#000}
.cfg-slider input[type=range]::-moz-range-track{height:2px;background:#000}
.cfg-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:18px;background:#000;border:0;border-radius:0;margin-top:-8px;
}
.cfg-slider input[type=range]::-moz-range-thumb{width:14px;height:18px;background:#000;border:0;border-radius:0}
.cfg-slider input[type=range]:hover::-webkit-slider-thumb{background:#8000ff}
.cfg-slider input[type=range]:hover::-moz-range-thumb{background:#8000ff}
.cfg-slider input[type=range]:disabled{opacity:.28;cursor:default}

/* ---------- World panel ---------- */
.cfg-panel{display:flex;flex-direction:column;background:#fff;overflow:hidden}
.cfg-panel__head{padding:26px 22px 20px;border-bottom:2px solid #000}
.cfg-panel__head h2{
  margin:0;font-size:30px;line-height:.9;font-weight:800;text-transform:uppercase;
  font-family:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;
}
.cfg-panel__body{flex:1;overflow-y:auto}
.cfg-panel__foot{border-top:2px solid #000;padding:18px 22px}

.cfg-envs{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:#000;border:2px solid #000}
.cfg-envs button{
  background:#fff;border:0;cursor:pointer;font-family:inherit;padding:11px 8px;
  font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  transition:background .12s linear;
}
.cfg-envs button:hover,.cfg-envs button.is-active{background:#00ffe0}

.cfg-items{display:grid;gap:2px;background:#000;border:2px solid #000}
.cfg-item{
  background:#fff;border:0;width:100%;text-align:left;padding:12px 14px;cursor:pointer;
  font-family:inherit;display:flex;justify-content:space-between;align-items:center;gap:10px;
  transition:background .12s linear;
}
.cfg-item:hover,.cfg-item.is-active{background:#00ffe0}
.cfg-item .nm{font-weight:700;font-size:13.5px}
.cfg-item .rf{font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#8000ff}
.cfg-item.is-active .rf{color:#000}

.cfg-cta{
  display:block;height:50px;line-height:46px;background:#8000ff;color:#fff;
  border:2px solid #000;text-align:center;text-decoration:none;
  font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  transition:background .12s linear,color .12s linear;
}
.cfg-cta:hover{background:#00ffe0;color:#000}

/* ================= MÓVIL =================
   La escena manda: ocupa la mitad alta y no scrollea. Los ajustes del
   espacio quedan debajo, y la ficha de la pieza sube como hoja inferior
   sobre la escena. Todo lo pulsable a 44 px o más. */
@media (max-width: 960px){
  /* La escena ocupa TODA la pantalla. Los ajustes del espacio pasan a
     vivir detrás del engranaje, y el CTA se queda siempre a la vista. */
  .cfg-fullscreen{
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    overflow:hidden;
  }
  .cfg-stage{border-right:0;border-bottom:0;height:100%}
  .cfg-stage canvas{touch-action:none}

  .cfg-exit{top:10px;right:10px;height:40px;padding:0 14px;font-size:10px}
  .cfg-back{top:10px;left:10px;width:40px;height:40px}
  .cfg-hint{display:none}
  .cfg-tip{display:none}                 /* no hay hover en táctil */

  /* Engranaje, justo debajo de la ✕ */
  .cfg-gear{display:flex;top:58px;left:10px}

  /* CTA permanente, bajo el EXIT. z-index por encima del panel para que
     no quede debajo cuando se abren los ajustes. */
  .cfg-cta-float{display:block;top:58px;right:10px;z-index:40}

  /* Panel del espacio: hoja lateral que entra con el engranaje */
  .cfg-panel{
    position:fixed;top:0;right:0;bottom:0;z-index:25;
    width:min(330px,88vw);
    border-left:2px solid #000;
    transform:translateX(101%);
    transition:transform .28s ease;
    box-shadow:-8px 0 24px rgba(0,0,0,.16);
  }
  .cfg-fullscreen.is-panel-open .cfg-panel{transform:translateX(0)}

  /* Reloj: barra compacta pegada abajo de la escena */
  .cfg-time{
    left:10px;right:10px;bottom:10px;width:auto;
    display:grid;grid-template-columns:52px 1fr;align-items:center;
    gap:10px;padding:8px 12px;
  }
  .cfg-time__sky{height:46px;width:46px;grid-row:span 2;align-self:center}
  .cfg-time__range{margin:0;height:36px}          /* zona táctil holgada */
  .cfg-time__range::-webkit-slider-thumb{width:12px;height:26px;margin-top:-12.5px}
  .cfg-time__range::-moz-range-thumb{width:12px;height:26px}
  .cfg-time__row{margin:0;grid-column:2}
  .cfg-time__val{font-size:13px}

  /* Ficha de pieza: hoja inferior colapsable.
     Estado normal = asoma lo justo (título + materiales) y la escena
     sigue a la vista. Tocando el asa se despliega para specs y nota. */
  .cfg-card{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;z-index:20;
    max-height:38svh;border:0;border-top:2px solid #000;
    transform:translateY(101%);
    transition:transform .28s ease, max-height .28s ease;
    box-shadow:0 -8px 24px rgba(0,0,0,.14);
  }
  .cfg-card.is-on{transform:translateY(0)}
  .cfg-card.is-on.is-hidden{transform:translateY(101%)}   /* escondida a mano */
  .cfg-card.is-tall{max-height:82svh}
  .cfg-card__hide{display:block}
  .cfg-card__head{padding:20px 52px 12px 16px}            /* sitio para la flecha */
  .cfg-card__title{font-size:22px}
  .cfg-card__body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

  /* Asa: botón real, no adorno */
  .cfg-card__grab{
    position:absolute;top:0;left:0;right:0;height:22px;z-index:2;
    background:#fff;border:0;padding:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .cfg-card__grab::before{
    content:"";width:46px;height:4px;background:#000;transition:transform .2s ease;
  }
  .cfg-card.is-tall .cfg-card__grab::before{transform:scaleX(.6)}

  .cfg-blk{padding:14px 16px}
  .cfg-mat{padding:11px 14px}
  .cfg-mat input[type=color]{width:52px;height:34px}
  .cfg-var .chip{height:42px}
  .cfg-var .cap{padding:6px 3px;font-size:9px}
  .cfg-switch{padding:13px 14px}
  .cfg-slider input[type=range]{height:34px}
  .cfg-slider input[type=range]::-webkit-slider-thumb{width:16px;height:26px;margin-top:-12px}
  .cfg-slider input[type=range]::-moz-range-thumb{width:16px;height:26px}
  /* Specs en dos columnas: la mitad de alto */
  .cfg-specs{grid-template-columns:1fr 1fr}
  .cfg-spec{flex-direction:column;gap:2px;padding:9px 12px}
  .cfg-spec dd{text-align:left}
  .cfg-note{font-size:12px;line-height:1.5}

  /* Sitio para EXIT y CTA, que flotan encima de esta esquina */
  .cfg-panel__head{padding:18px 16px 14px;padding-right:120px}
  .cfg-panel__head h2{font-size:26px}
  .cfg-panel__body{overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Piezas en dos columnas: se ven todas sin scroll interminable */
  .cfg-items{grid-template-columns:1fr 1fr}
  .cfg-item{padding:14px 12px;min-height:48px}
  .cfg-item .nm{font-size:13px}
  /* El CTA del panel se oculta: ya está el flotante permanente */
  .cfg-panel__foot{display:none}
}

/* Teléfono estrecho */
@media (max-width: 420px){
  .cfg-card__title{font-size:21px}
  .cfg-time{grid-template-columns:42px 1fr;padding:7px 10px}
  .cfg-time__sky{height:40px;width:40px}
}

/* Móvil en horizontal: la escena se lleva casi todo y la ficha se va
   al lateral, que es donde sobra sitio. */
@media (max-width: 960px) and (orientation: landscape){
  .cfg-card{
    left:auto;right:0;top:0;bottom:auto;width:min(320px,52vw);
    max-height:78svh;border:0;border-left:2px solid #000;border-top:0;
    transform:translateX(101%);
  }
  .cfg-card.is-on{transform:translateX(0)}
  .cfg-card.is-tall{max-height:78svh}
  .cfg-card__grab{display:none}
  .cfg-card__head{padding:14px 14px 10px}
  .cfg-time{left:10px;right:auto;width:min(300px,60vw)}
}