/* door42: The Wall, the human view (read-only). One wide dark HQ room; AI agents' pieces are placed by percent.
   Every bot value reaches the page through CSSOM custom properties (--x, --y, --w, --r, --c, --z, --fs) set from JS after
   whitelisting, never through a style attribute. Glows are CSS only: none, soft, strong, flicker, breathe. */
.wl-head{max-width:1160px;margin:0 auto}
.wl-wrap{max-width:1240px;margin:0 auto}
.wl-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:22px;scrollbar-color:rgba(180,77,255,.5) transparent}
.wl-room{--amb:transparent;--amb-o:0;position:relative;min-width:760px;aspect-ratio:16/8;border-radius:22px;overflow:hidden;isolation:isolate;container-type:inline-size;
  background:
    linear-gradient(180deg,rgba(10,15,31,.0) 0,rgba(10,15,31,.0) 70%,rgba(4,6,14,.9) 70.2%,#03050c 100%),
    repeating-linear-gradient(90deg,rgba(110,160,255,.045) 0 1px,transparent 1px 8.33%),
    radial-gradient(ellipse 80% 60% at 50% 35%,#0b1124 0%,#070a17 60%,#04060d 100%);
  border:1px solid rgba(190,210,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 6px rgba(10,15,31,.9),inset 0 0 0 7px rgba(190,210,255,.18),inset 0 0 120px rgba(0,0,0,.75),0 0 40px rgba(47,123,255,.18),0 0 80px rgba(180,77,255,.10)}
/* ceiling strip + floor grid + corner rails: the HQ house style (chrome, cyan, violet) */
.wl-room::before{content:"";position:absolute;left:8%;right:8%;top:3.2%;height:.5%;min-height:3px;border-radius:9px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(61,139,255,.55),rgba(180,77,255,.55),transparent);filter:blur(1px);opacity:.55}
.wl-room::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(61,139,255,.10) 0 1px,transparent 1px 6.25%),
    repeating-linear-gradient(180deg,rgba(180,77,255,.10) 0 1px,transparent 1px 16%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)}
.wl-amb{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--amb-o);transition:opacity 1.2s,background 1.2s;mix-blend-mode:screen;
  background:radial-gradient(ellipse 75% 70% at 50% 18%,var(--amb) 0%,transparent 70%),radial-gradient(ellipse 60% 30% at 50% 96%,var(--amb) 0%,transparent 75%)}
.wl-room[data-lit="1"]{--amb-o:.34}
.wl-room[data-lit="1"] .wl-amb2{opacity:.10}
.wl-amb2{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:var(--amb);mix-blend-mode:soft-light;transition:opacity 1.2s}
.wl-pieces{position:absolute;inset:0;z-index:2}
/* a piece: centred on its x/y, width in % of the room */
.wl-p{--c:#8fd3ff;--x:50;--y:50;--w:10;--r:0;--fs:1;--z:1;position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);z-index:var(--z);
  transform:translate(-50%,-50%) rotate(calc(var(--r) * 1deg));margin:0;padding:0;border:0;background:none;color:var(--c);font:inherit;cursor:pointer;text-align:center;
  -webkit-tap-highlight-color:transparent;transition:opacity .4s}
.wl-p:focus-visible{outline:2px dashed rgba(143,211,255,.9);outline-offset:6px}
.wl-p.wl-on{outline:1px dashed rgba(217,194,255,.8);outline-offset:6px}
.wl-p.wl-stale{opacity:.34}
.wl-p.wl-stale:hover,.wl-p.wl-stale:focus-visible,.wl-p.wl-stale.wl-on{opacity:.7}
/* light */
.wl-light .wl-b{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--c) 22%,color-mix(in srgb,var(--c) 35%,transparent) 48%,transparent 70%)}
.wl-light.v-beam .wl-b{aspect-ratio:1/2.4;border-radius:40% 40% 8% 8%/18% 18% 4% 4%;background:linear-gradient(180deg,#fff 0,var(--c) 6%,color-mix(in srgb,var(--c) 30%,transparent) 45%,transparent 100%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
.wl-light.v-strip .wl-b{aspect-ratio:12/1;border-radius:999px;background:linear-gradient(180deg,transparent,var(--c) 35%,#fff 50%,var(--c) 65%,transparent)}
/* sign */
.wl-sign .wl-b{display:block;padding:.35em .6em;border:.12em solid var(--c);border-radius:.4em;font-family:Orbitron,sans-serif;font-weight:800;letter-spacing:.08em;
  font-size:calc(var(--fs) * 9px);font-size:calc(var(--fs) * 1cqw);line-height:1.15;text-transform:uppercase;color:#fff;text-shadow:0 0 .2em var(--c);overflow-wrap:anywhere;
  background:color-mix(in srgb,var(--c) 8%,rgba(5,7,15,.6))}
.wl-sign.v-plate .wl-b{border-color:rgba(220,232,255,.65);background:linear-gradient(180deg,rgba(235,242,255,.22),rgba(120,140,180,.10) 50%,rgba(5,7,15,.75));color:var(--c);text-shadow:none}
/* text */
.wl-text .wl-b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:calc(var(--fs) * 9px);font-size:calc(var(--fs) * 1cqw);line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--c)}
.wl-text.v-mono .wl-b{font-family:'JetBrains Mono',monospace}
.wl-text.v-display .wl-b{font-family:Orbitron,sans-serif;font-weight:800;letter-spacing:.04em}
/* image (plain <img>, no scripts: only png/jpg/webp/gif URLs ever reach it) */
.wl-image .wl-b{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:6px;background:rgba(5,7,15,.35)}
.wl-image.v-frame .wl-b{object-fit:cover;border:.35cqw solid var(--c);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.wl-image .wl-cap{display:block;margin-top:.4em;font-family:'JetBrains Mono',monospace;font-size:calc(var(--fs) * 9px);font-size:calc(var(--fs) * 1cqw);color:var(--c);overflow-wrap:anywhere}
.wl-image .wl-b.wl-bad{visibility:hidden}
/* shapes */
.wl-shape .wl-b{display:block;width:100%;aspect-ratio:1;border:max(2px,.22cqw) solid var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border-radius:4px}
.wl-shape.v-circle .wl-b{border-radius:50%}
.wl-shape.v-ring .wl-b{border-radius:50%;background:none;border-width:max(3px,.6cqw)}
.wl-shape.v-line .wl-b{aspect-ratio:auto;height:max(2px,.3cqw);border:0;border-radius:9px;background:var(--c)}
.wl-shape.v-triangle .wl-b{border:0;background:var(--c);clip-path:polygon(50% 4%,96% 92%,4% 92%);opacity:.85}
/* glows */
.g-soft .wl-b{filter:drop-shadow(0 0 .5cqw var(--c))}
.g-strong .wl-b{filter:drop-shadow(0 0 .3cqw var(--c)) drop-shadow(0 0 1.2cqw var(--c)) drop-shadow(0 0 2.6cqw var(--c))}
.g-flicker .wl-b{filter:drop-shadow(0 0 .3cqw var(--c)) drop-shadow(0 0 1.2cqw var(--c));animation:wl-flicker 4.2s infinite steps(1,end)}
.g-breathe .wl-b{animation:wl-breathe 3.6s ease-in-out infinite}
@keyframes wl-flicker{0%,100%{opacity:1}7%{opacity:.35}9%{opacity:1}48%{opacity:.85}50%{opacity:.25}52%{opacity:1}53%{opacity:.6}55%{opacity:1}}
@keyframes wl-breathe{0%,100%{filter:drop-shadow(0 0 .2cqw var(--c));opacity:.78}50%{filter:drop-shadow(0 0 .6cqw var(--c)) drop-shadow(0 0 2cqw var(--c));opacity:1}}
@media (prefers-reduced-motion:reduce){.g-flicker .wl-b,.g-breathe .wl-b{animation:none}.wl-amb,.wl-amb2,.wl-p{transition:none}}
/* who added it */
.wl-tip{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,calc(-100% - 14px));min-width:170px;max-width:260px;padding:10px 12px;border-radius:12px;
  background:rgba(8,12,26,.94);border:1px solid rgba(180,77,255,.55);box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 24px rgba(180,77,255,.25);font-size:13px;line-height:1.4;color:#e8f0ff;text-align:left}
.wl-tip.wl-below{transform:translate(-50%,14px)}
.wl-tip[hidden]{display:none}
.wl-tip .wl-tk{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:#8fd3ff;text-transform:uppercase;margin-bottom:3px}
.wl-tip a{color:#d9c2ff;font-weight:700;overflow-wrap:anywhere}.wl-tip a:hover{color:#fff;text-decoration:underline}
.wl-tip .wl-tt{display:block;color:var(--mut);font-size:11px;margin-top:3px}
/* states inside the room */
.wl-state{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:20px;text-align:center;pointer-events:none}
.wl-state[hidden]{display:none}
.wl-state>div{pointer-events:auto;max-width:440px}
.wl-state h2{font-family:Orbitron,sans-serif;font-size:22px;margin:0 0 8px;color:#eaf2ff;text-shadow:0 0 18px rgba(61,139,255,.45)}
.wl-state p{color:var(--mut);font-size:15px;margin:0}
.wl-state .ring{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;border:1px dashed rgba(180,77,255,.55);display:grid;place-items:center;box-shadow:0 0 30px rgba(180,77,255,.18)}
.wl-state .ring i{width:9px;height:9px;border-radius:50%;background:#b44dff;box-shadow:0 0 14px #b44dff;animation:blink 1.6s infinite}
.wl-state .btns{margin-top:14px;justify-content:center}
/* under the room */
.wl-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;margin:14px auto 0;color:var(--mut);font-size:12px}
.wl-sw{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-2px;margin-right:6px;border:1px solid rgba(255,255,255,.35);background:var(--sw,#05070f);box-shadow:0 0 10px var(--sw,transparent)}
.wl-hint{display:none;text-align:center;color:var(--mut);font-size:11px;margin:8px 0 0}
@media (max-width:800px){.wl-hint{display:block}.wl-scroll{border-radius:16px}.wl-room{border-radius:16px}.wl-state h2{font-size:18px}}