/* Estilos de mapa y juego: pantalla de carga, etiquetas sobre la escena e interfaz (móvil primero: a partir
   de 900 px de ancho se recoloca todo como en escritorio) */
.loader{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;background:#141414;color:#ececec;font:12px ui-monospace,monospace;transition:opacity .4s}
.loader .box{width:min(460px,calc(100vw - 32px))}.loader b{font-size:15px;color:#ff8a2a}
.loader .bar{height:6px;background:#2a2a30;border-radius:3px;margin:10px 0;overflow:hidden}.loader .bar i{display:block;height:100%;width:0;background:#ff8a2a;transition:width .2s}
.loader pre{margin:0;height:240px;overflow-y:auto;white-space:pre-wrap;opacity:.85;line-height:1.5;padding-bottom:4px}
.lbl{font:11px ui-monospace,monospace;color:#fff;background:rgba(25,25,25,.72);padding:1px 6px;border-radius:3px;white-space:nowrap}
.lbl.vm{font-size:13px;font-weight:700;background:rgba(0,0,0,.82);padding:2px 8px;margin-top:14px}   /* (cuelga del borde de la muralla: VM_DROP) */
/* Etiqueta de servicio: bloque del nombre relleno con el color del edificio (y su categoría), y columnas
   recibe / envía con cabecera del color del otro extremo y, debajo, su lista de anexos / edificios */
.lbl.svc{display:flex;flex-wrap:wrap;align-items:stretch;padding:0;overflow:hidden;background:#fff;color:#111;border-radius:9px;
  box-shadow:0 0 0 2px var(--c,#999),0 4px 12px rgba(0,0,0,.45);animation:lblPop .35s cubic-bezier(.3,1.6,.5,1)}
.lbl.svc .nm{display:flex;flex-direction:column;justify-content:center;padding:2px 9px 3px 8px;font:800 12px/1.1 ui-monospace,monospace;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 80%,#000));
  color:var(--ct,#fff);text-shadow:0 1px 0 color-mix(in srgb,var(--c) 50%,#000)}
.lbl.svc .nm small{font:700 8px/1.2 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;opacity:.85;text-shadow:none}
.lbl.svc .col{display:flex;flex-direction:column;align-items:stretch;border-left:2px solid rgba(0,0,0,.12)}
.lbl.svc .col b.io{flex:1;display:flex;align-items:center;justify-content:center;padding:2px 8px;font:800 10px ui-monospace,monospace;letter-spacing:.02em;
  color:var(--bt,#fff);background:linear-gradient(180deg,color-mix(in srgb,var(--b) 65%,#fff),var(--b) 60%,color-mix(in srgb,var(--b) 80%,#000));
  pointer-events:auto;cursor:pointer;transition:filter .12s,transform .12s}
.lbl.svc .col b.io{box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}  /* (canto: una cabecera blanca, la de las nubes, no se funde con la etiqueta) */
.lbl.svc .col b.io:hover{filter:brightness(1.15) saturate(1.2)}
.lbl.svc .col b.io:active{transform:scale(.92)}
.lbl.svc .col b.off{animation:lblBlink 1s ease-in-out infinite}
.lbl.svc .col b.lit{box-shadow:inset 0 -3px 0 rgba(0,0,0,.35),inset 0 0 0 2px #fff,inset 0 0 8px #fff;animation:lblPulse 1.1s ease-in-out infinite}
.lbl.svc .col b.lit::after{content:"✕";margin-left:6px;padding:0 3px;border-radius:50%;background:rgba(255,255,255,.85);color:#111;font-size:8px}  /* (pulsar otra vez cierra) */
.lbl.svc.full .col b.io,.lbl.svc .col.open b.io{flex:0 0 auto}
.lbl.svc .peers{display:none;flex:1;padding:3px 6px 4px;background:color-mix(in srgb,var(--b) 16%,#fff);font:600 10px/1.45 ui-monospace,monospace;color:#1b1b1b}
.lbl.svc .peers i{display:flex;align-items:center;gap:5px;font-style:normal;animation:lblIn .3s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--k,0) * 45ms)}
.lbl.svc .peers i::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--p);box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(0,0,0,.3),0 0 5px var(--p)} /* (el anillo oscuro: que se vea también el blanco de las nubes) */
.lbl.svc.full .peers,.lbl.svc .col.open .peers{display:block}
.lbl.svc b.loc{display:flex;align-items:center;padding:2px 8px;font:800 10px ui-monospace,monospace;background:#e9e6df;color:#555;border-left:2px solid rgba(0,0,0,.12)}
/* Descripción del servicio: al pulsar el bloque del nombre, debajo de toda la etiqueta (width 0 + min-width 100%:
   ocupa el ancho de la etiqueta sin ensancharla con su texto; abierta, la etiqueta tiene un ancho mínimo) */
.lbl.svc .nm[data-info]{pointer-events:auto;cursor:pointer}
.lbl.svc .nm[data-info] small::after{content:" ⓘ";opacity:.8}
.lbl.svc .nm[data-info]:hover{filter:brightness(1.1)}
.lbl.svc .desc{display:none;flex:0 0 auto;width:0;min-width:100%;box-sizing:border-box;white-space:normal;padding:4px 8px 5px;
  font:600 10px/1.4 ui-monospace,monospace;color:#1b1b1b;background:color-mix(in srgb,var(--c) 14%,#fff);border-top:2px solid var(--c)}
.lbl.svc.info{min-width:230px}
.lbl.svc.info .col,.lbl.svc.info > b.loc{flex-grow:1}
.lbl.svc.info .desc{display:block;animation:lblIn .3s cubic-bezier(.3,1.6,.5,1) both}
@keyframes lblPop{from{opacity:0}}  /* (solo opacidad: la posición la lleva el transform de CSS2DRenderer) */
@keyframes lblIn{from{transform:translateX(-6px) scale(.8);opacity:0}}
@keyframes lblPulse{50%{filter:brightness(1.3) saturate(1.3)}}
@keyframes lblBlink{50%{opacity:.25}}
.lbl.veh{background:rgba(255,255,255,.92);color:#111;border:1px solid #333;line-height:1.35;text-align:center}
:root{--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--bar-h:64px}
.lil-gui{--background-color:rgba(20,20,26,.9);--text-color:#ececec;--title-background-color:#ff8a2a;--title-text-color:#141414;
  --widget-color:#2e2e38;--hover-color:#3b3b48;--focus-color:#4a4a5a;--number-color:#7fd1ff;--string-color:#b7f07a;
  --font-family:ui-monospace,Menlo,monospace;--font-size:12px;--input-font-size:12px;--padding:6px;--widget-height:22px;
  --widget-border-radius:4px;--name-width:46%}
@media (pointer:coarse){.lil-gui{--widget-height:32px;--font-size:13px;--input-font-size:16px;--padding:7px}}
.lil-gui.root{border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35);backdrop-filter:blur(4px)}
.lil-gui.root>.title{font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px}
@media (pointer:coarse){.lil-gui.root>.title{padding:10px 12px}.lil-gui .lil-gui>.title{padding-top:8px;padding-bottom:8px}}
.lil-gui .lil-gui>.title{color:#ffb070;font-weight:700}
.lil-gui .controller.function button{transition:transform .12s,background .12s}
@media (hover:hover){.lil-gui .controller.function:hover button{transform:translateX(3px);background:#ff8a2a33}}
.menuBtn{position:fixed;left:calc(8px + var(--safe-l));top:calc(8px + var(--safe-t));z-index:20;width:40px;height:40px;padding:0;
  font:700 18px ui-monospace,monospace;background:#141414;color:#fff;border:2px solid #141414;border-radius:12px;cursor:pointer;
  box-shadow:0 3px 0 #000;transition:transform .12s,background .12s}
.menuBtn .txt{display:none}
.menuBtn:active{background:#ff8a2a;color:#111}
.hud{position:fixed;top:calc(8px + var(--safe-t));left:calc(56px + var(--safe-l));right:calc(8px + var(--safe-r));z-index:10;display:flex;gap:4px;
  font:700 11px ui-monospace,monospace;pointer-events:none;flex-wrap:wrap;justify-content:center}
.chip{background:rgba(18,18,22,.88);color:#fff;padding:5px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.25);position:relative;overflow:hidden}
.chip .bar{position:absolute;left:0;bottom:0;height:3px;background:#ff8a2a;transition:width .25s linear}
.chip.alert{background:#c62828;animation:pulse 1s ease-in-out infinite}.chip.ok{background:#1f7a4a}
.chip.hm.on{background:#0e6d8f;box-shadow:0 0 0 2px #7fd1ff88,0 4px 12px rgba(0,0,0,.25)}
.chip.res{font-weight:500;opacity:.92;font-size:10px;padding:4px 8px}
.chip.scope{background:#ff8a2a;color:#141414;font-size:10px;padding:4px 8px}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.toolbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;gap:4px;padding:6px calc(8px + var(--safe-r)) calc(6px + var(--safe-b)) calc(8px + var(--safe-l));
  background:rgba(18,18,22,.94);box-shadow:0 -6px 20px rgba(0,0,0,.3);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.toolbar::-webkit-scrollbar{display:none}
.tool{flex:1 0 54px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:5px 4px;
  border:0;border-radius:11px;cursor:pointer;background:#2e2e38;color:#eee;font:600 10px ui-monospace,monospace;touch-action:manipulation;
  transition:transform .12s,background .15s,box-shadow .15s}
.tool .ic{font-size:22px;line-height:1}.tool .k{display:none;opacity:.55;font-size:10px}
.tool:active{transform:scale(.94)}
.tool.on{background:#ff8a2a;color:#141414;box-shadow:0 0 0 3px #ff8a2a55}
.tool.on .k{opacity:.8}
@media (hover:hover) and (pointer:fine){.tool .k{display:inline}.tool:hover{transform:translateY(-3px);background:#3b3b48}.tool.on{transform:translateY(-3px)}
  .menuBtn:hover{background:#ff8a2a;color:#111;transform:translateY(-2px)}}
.toasts{position:fixed;left:8px;right:8px;bottom:calc(var(--bar-h) + 10px + var(--safe-b));z-index:15;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{font:700 12px ui-monospace,monospace;padding:8px 14px;border-radius:10px;background:#141414;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.3);
  max-width:100%;text-align:center;animation:toastIn .25s ease-out, toastOut .4s ease-in 2.6s forwards}
.toast.good{background:#1f7a4a}.toast.bad{background:#c62828}.toast.info{background:#0e6d8f}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}
.vmPop{position:fixed;z-index:30;left:0;right:0;bottom:0;max-height:70dvh;overflow-y:auto;background:rgba(18,18,22,.97);color:#eee;
  border-radius:16px 16px 0 0;padding:16px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  font:13px ui-monospace,monospace;box-shadow:0 -12px 30px rgba(0,0,0,.45);animation:sheetIn .2s ease-out}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
.vmPop h3{margin:0 40px 4px 0;font-size:15px;color:#ffb070}.vmPop .req{opacity:.85;margin-bottom:8px}
.vmPop .isl{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #333}
.vmPop button{font:700 13px ui-monospace,monospace;border:0;border-radius:10px;min-height:44px;padding:8px 16px;cursor:pointer;background:#ff8a2a;color:#141414;touch-action:manipulation}
.vmPop button:disabled{background:#3a3a44;color:#888;cursor:not-allowed}
.vmPop .x{position:absolute;top:8px;right:8px;width:40px;min-height:40px;padding:0;font-size:18px;background:none;color:#aaa}
.drawer{position:fixed;left:0;right:0;bottom:0;z-index:9;max-height:72dvh;overflow-y:auto;display:none;flex-direction:column;gap:10px;
  padding:12px calc(10px + var(--safe-r)) calc(var(--bar-h) + 12px + var(--safe-b)) calc(10px + var(--safe-l));
  background:rgba(12,12,16,.55);backdrop-filter:blur(6px);border-radius:16px 16px 0 0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.drawer.open{display:flex}
@media (max-width:899px){.drawer .lil-gui.root{position:static!important;inset:auto!important;width:auto!important;max-height:none!important;overflow:visible!important;flex:none}}
@media (min-width:900px){
  .menuBtn{left:auto;top:auto;right:15px;bottom:12px;width:auto;height:auto;padding:8px 14px;font-size:13px;border-radius:10px;box-shadow:0 4px 0 #000}
  .menuBtn .txt{display:inline}
  .hud{left:50%;right:auto;top:12px;transform:translateX(-50%);gap:8px;font-size:13px;max-width:calc(100vw - 32px)}
  .chip{padding:7px 12px}.chip.res,.chip.scope{font-size:13px;padding:7px 12px}
  .toolbar{left:50%;right:auto;bottom:14px;transform:translateX(-50%);gap:6px;padding:8px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);
    overflow:visible;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px)}
  .tool{flex:0 0 auto;min-width:62px;min-height:0;padding:7px 8px;font-size:11px}
  .toasts{left:50%;right:auto;bottom:auto;top:64px;transform:translateX(-50%)}
  .vmPop{right:auto;bottom:auto;min-width:250px;max-width:320px;max-height:none;border-radius:12px;padding:12px;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.45);animation:toastIn .18s ease-out}
  .vmPop button{min-height:0;padding:6px 10px;font-size:12px;border-radius:8px}.vmPop .x{top:6px;right:8px;width:auto;min-height:0;padding:2px;font-size:13px}
  .drawer{display:contents}
  body.nopanels .drawer{display:none}
}
canvas{display:block;touch-action:none}

/* Tutorial: tarjeta arriba (móvil: a lo ancho), sombra con huecos sobre la escena y marcas sobre lo señalado */
.tutOn .lbl.svc{display:none!important}   /* (durante el tutorial, sin etiquetas de servicio) */
.tutOn .lbl.svc.tutKeep{display:flex!important}   /* (salvo la que enseña) */
.tutShade[hidden],.tutMarks[hidden],.tut[hidden]{display:none}   /* (hidden: que ninguna regla de canvas lo anule) */
.tutShade{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
.tutMarks{position:fixed;inset:0;z-index:3;pointer-events:none}
.tutMarks span{position:absolute;left:0;top:0;padding:3px 9px;border-radius:12px;background:#fff;color:#111;font:800 12px ui-monospace,monospace;
  white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.4);animation:lblPop .35s ease-out}
.tutMarks span::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#fff}
.tut{position:fixed;z-index:30;top:calc(12px + var(--safe-t));left:50%;transform:translateX(-50%);width:min(460px,calc(100vw - 32px));box-sizing:border-box;
  background:rgba(20,20,26,.94);color:#ececec;border-radius:14px;padding:12px 16px 12px;box-shadow:0 10px 30px rgba(0,0,0,.45);
  font:14px/1.45 system-ui,sans-serif;backdrop-filter:blur(4px);animation:lblPop .3s ease-out}
.tut .tutTop{display:flex;justify-content:space-between;align-items:center;font:700 11px ui-monospace,monospace;color:#ffb070;letter-spacing:.04em}
.tut .tutTop button{background:none;border:0;color:#aaa;font-size:16px;cursor:pointer;padding:2px 4px}
.tut h3{margin:6px 0 4px;font:800 18px/1.25 system-ui,sans-serif;color:#fff}
.tut p{margin:0 0 8px}
.tut p.sub{font-weight:700;color:#fff;background:rgba(255,138,42,.14);border-radius:8px;padding:6px 9px;animation:lblPop .35s ease-out}
.tut p.task{font:800 13px system-ui,sans-serif;color:#ffb070;margin:2px 0 6px}
.tut p.task.ok{color:#7be08a}
.tut p.term{font-size:12px;color:#9fb3c8;border-left:3px solid #ff8a2a;padding-left:8px}
.tut .tutNav{display:flex;align-items:center;gap:8px;margin-top:6px}
.tut .dots{flex:1;display:flex;gap:5px}
.tut .dots i{width:7px;height:7px;border-radius:50%;background:#555}
.tut .dots i.on{background:#ff8a2a}
.tut .tutNav button{border:0;border-radius:8px;padding:8px 12px;font:700 13px system-ui,sans-serif;cursor:pointer;background:#2e2e38;color:#ececec}
.tut .tutNav button.main{background:#ff8a2a;color:#141414}
@media (pointer:coarse){.tut .tutNav button{padding:11px 16px;font-size:15px}}