/* ui normal box with headers */
.ui-box{
  --ui-color: rgb(120,210,255);
  --ui-border-w: 1px;
  --ui-bg-top:    color-mix(in srgb, var(--ui-color) 12%, rgb(10,16,24));
  --ui-bg-bottom: color-mix(in srgb, var(--ui-color)  5%, rgb(6,10,16));
  --head-h: 22px;
  --head-overlap: 3px;
  --pulse-speed: 10s;
  --beam-len: 100px;
  --beam-overlap: 80ms;
  --beam-core: color-mix(in srgb, var(--ui-color) 92%, white);
  --beam-tail: color-mix(in srgb, var(--ui-color) 30%, rgb(40,55,70));
  --sweep-speed: 6.2s;
  --sweep-w: 220px;
  --sweep-boost: 34px;
  --glow-bleed: 0.5px;
  --glow-alpha: .55;
  --crt-squash-x: .55;
  --crt-squash-y: .18;

  position: relative;
  overflow: visible;  

  color: rgba(220,240,255,.92);
  background: linear-gradient(to bottom, var(--ui-bg-top), var(--ui-bg-bottom));

  text-align: left;
}

.ui-box::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  padding: var(--ui-border-w);
  z-index: 2;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ui-color) 55%, rgb(230,235,240)) 0%,
    color-mix(in srgb, var(--ui-color) 22%, rgb(35,45,60)) 45%,
    color-mix(in srgb, var(--ui-color) 12%, rgb(16,22,32)) 100%
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ui-box__clip{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  border-radius: var(--ui-radius);
}
.ui-box{
  --boxW: 0px;
  --boxH: 0px;

  --beamLenH: 220px;
  --beamLenV: 220px;

  --beam-thick: 1.4px;
  --beam-tail: color-mix(in srgb, var(--ui-color) 65%, rgb(60,80,100));
  --beam-head: color-mix(in srgb, var(--ui-color) 92%, white);
  --beam-alpha: .95;

  --beam-speed: 120;
  --beam-tail-stop: 48%;
  --beam-head-stop: 56%;
}

.ui-box__clip .ui-beam{
  position:absolute;
  opacity: var(--beam-alpha);
  will-change: transform;

  box-shadow:
    0 0 6px  color-mix(in srgb, var(--ui-color) 45%, transparent),
    0 0 12px color-mix(in srgb, var(--ui-color) 22%, transparent);

  animation-duration: var(--pulse-speed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.ui-box__clip .ui-beam--top{
  left:0; top:0;
  height: var(--beam-thick);
  width: var(--beamLenH);
  z-index: 3;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--beam-tail) var(--beam-tail-stop),
    var(--beam-head) var(--beam-head-stop),
    transparent 100%
  );
  transform: translateX(calc(-1 * var(--beamLenH)));
  animation-name: uiBeamTop;
}
.ui-box__clip .ui-beam--right{
  right:0; top:0;
  width: var(--beam-thick);
  height: var(--beamLenV);
  z-index: 3;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--beam-tail) var(--beam-tail-stop),
    var(--beam-head) var(--beam-head-stop),
    transparent 100%
  );
  transform: translateY(calc(-1 * var(--beamLenV)));
  animation-name: uiBeamRight;
}
.ui-box__clip .ui-beam--bottom{
  left:0; bottom:0;
  height: var(--beam-thick);
  width: var(--beamLenH);  
  z-index: 3;
  background: linear-gradient(270deg,
    transparent 0%,
    var(--beam-tail) var(--beam-tail-stop),
    var(--beam-head) var(--beam-head-stop),
    transparent 100%
  );
  transform: translateX(calc(var(--boxW) + var(--beamLenH)));
  animation-name: uiBeamBottom;
}
.ui-box__clip .ui-beam--left{
  left:0; top:0;
  width: var(--beam-thick);
  height: var(--beamLenV);
  z-index: 3;
  background: linear-gradient(0deg,
    transparent 0%,
    var(--beam-tail) var(--beam-tail-stop),
    var(--beam-head) var(--beam-head-stop),
    transparent 100%
  );
  transform: translateY(calc(var(--boxH) + var(--beamLenV)));
  animation-name: uiBeamLeft;
}

.ui-box.no-light-pulse .ui-box__clip{ display:none; }

.ui-box .ui-head-single,
.ui-box .ui-head-multi{
  --cut-tr: 22px;

  position:absolute;
  left: 14px;
  right: 14px;
  top: calc(-1 * var(--head-overlap));
  height: var(--head-h);

  display:flex;
  align-items:center;
  gap: 8px;

  padding: 0 6px;
  padding-right: calc(6px + var(--cut-tr)); 

  font-size: 14px;
  line-height: 1;
  color: rgba(230,245,255,.92);

  border: var(--ui-border-w) solid transparent;

  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ui-color) 10%, rgb(12,18,26)),
      color-mix(in srgb, var(--ui-color)  6%, rgb(8,12,18))
    ) padding-box,
    linear-gradient(135deg,
      color-mix(in srgb, var(--ui-color) 55%, rgb(230,235,240)) 0%,
      color-mix(in srgb, var(--ui-color) 22%, rgb(35,45,60)) 45%,
      color-mix(in srgb, var(--ui-color) 12%, rgb(16,22,32)) 100%
    ) border-box;

  clip-path: polygon(
    0 0,
    calc(100% - var(--cut-tr)) 0,
    100% 100%,
    0 100%
  );

  z-index: 20;
  isolation: isolate;
}

.ui-box .ui-head-single::after,
.ui-box .ui-head-multi::after{
  content:"";
  position:absolute;
  top: 0;
  right: 0;

  width: calc(var(--cut-tr) + var(--ui-border-w));
  height: 100%;

  pointer-events:none;
  z-index: 31;
  clip-path: polygon(
    0 0,
    100% 100%,
    0 100%
  );

  background: linear-gradient(to bottom left,
    transparent calc(50% - (var(--ui-border-w) * 0.6)),
    color-mix(in srgb, var(--ui-color) 55%, rgb(0,5,0)) 50%,
    transparent calc(50% + (var(--ui-border-w) * 0.6))
  );
}

.ui-box .ui-head__hex{
  position:absolute;
  inset: var(--ui-border-w);
  right: calc(var(--ui-border-w) + 1px);
  pointer-events:none;
  z-index: 25;
  clip-path: inherit;
  --hex-w: 16px;
  --hex-h: 9px;
  --hex-grey: rgba(100,100,100,.30);
  --hex-sweep: color-mix(in srgb, var(--ui-color) 90%, white);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 50%, #000 72%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0 50%, #000 72%, #000 100%);
}

.ui-box .ui-head__hex::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hex-grey);

  -webkit-mask-image: url("/images/client/hexagon_si.svg");
  mask-image: url("/images/client/hexagon_si.svg");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: var(--hex-w) var(--hex-h);
  mask-size: var(--hex-w) var(--hex-h);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.ui-box .ui-head__hex::after{
  content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(90deg,
    transparent 0%,
    transparent 35%,
    var(--hex-sweep) 50%,
    transparent 65%,
    transparent 100%
  );
  opacity: .95;

  -webkit-mask-image: url("/images/client/hexagon_si.svg");
  mask-image: url("/images/client/hexagon_si.svg");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: var(--hex-w) var(--hex-h);
  mask-size: var(--hex-w) var(--hex-h);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;

  transform: translateX(calc(-1 * (var(--sweep-w) + var(--sweep-boost))));
  animation: ui-hex-sweep var(--sweep-speed) linear infinite;
}

@keyframes ui-hex-sweep{
  to{ transform: translateX(calc(100% + var(--sweep-w) + var(--sweep-boost))); }
}

.ui-box .ui-head-backlight{
  position:absolute;
  left:  calc(50px - var(--glow-bleed));
  right: calc(50px - var(--glow-bleed));
  top:   calc(-1 * var(--head-overlap) - var(--glow-bleed));
  height: calc(2px + var(--head-h) + (2 * var(--glow-bleed)));

  pointer-events:none;
  z-index: 15;
  overflow: hidden;
}

.ui-box .ui-head-backlight::before{
  content:"";
  position:absolute;
  left: 0;
  top: -40%;
  bottom: -40%;
  width: var(--sweep-w);

  transform: translateX(calc(-1 * (var(--sweep-w) + var(--sweep-boost)))) scale(1);
  transform-origin: 50% 50%;

  background-image:
    linear-gradient(90deg,
      transparent 70%,
      color-mix(in srgb, var(--ui-color) 55%, white) 91%,
      transparent 99%
    );

  opacity: 0;
  animation: ui-backlight-sweep var(--sweep-speed) linear infinite;
  animation-delay: -2.5s;
}

@keyframes ui-backlight-sweep{
  0%{
    transform: translateX(calc(-1 * (var(--sweep-w) + var(--sweep-boost)))) scale(1);
    opacity: 0;
  }
  10%{ opacity: var(--glow-alpha); }

  98.4%{
    transform: translateX(calc(100% + var(--sweep-w) + var(--sweep-boost))) scale(1);
    opacity: var(--glow-alpha);
  }
  99.6%{
    transform: translateX(calc(100% + var(--sweep-w) + var(--sweep-boost)))
               scaleX(var(--crt-squash-x)) scaleY(var(--crt-squash-y));
    opacity: var(--glow-alpha);
  }
  100%{
    transform: translateX(calc(100% + var(--sweep-w) + var(--sweep-boost)))
               scaleX(0.05) scaleY(0.02);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .ui-box .ui-head__hex::after,
  .ui-box .ui-head-backlight::before{
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ui special box */

.ui-box-special{
  --ui-corner-size: 260px;
  --ui-border-w: 1px;
  --ui-radius: 0px;

  /* Background (OPAQUE) */
  --ui-bg-top: rgb(26, 40, 54);
  --ui-bg-bottom: rgb(12, 18, 26);

  /* Grid / Hex */
  --raster-size: 8px;
  --grid-line: 1;
  --raster-color: rgba(170,235,255,.55);
  --hex-stretch: 1.95;

  /* Glow */
  --ui-accent: rgba(120,210,255,1);
  --ui-accent-soft: rgba(120,210,255,.22);

  position: relative;
  overflow: hidden;
  border-radius: var(--ui-radius);
  padding: 14px;
  margin-bottom: 10px;
  color: rgba(220,240,255,.92);

  --corner-x: 100%;
  --corner-y: 100%;

  background:
    radial-gradient(circle at var(--corner-x) var(--corner-y),
      rgba(120,210,255,.22) 0%,
      rgba(120,210,255,.10) 35%,
      rgba(120,210,255,0) 72%),
    linear-gradient(to bottom, var(--ui-bg-top), var(--ui-bg-bottom));
}

.ui-box-special > *{
  position: relative;
  z-index: 3;
}

.ui-box-special[data-corner="br"]{ --corner-x: 100%; --corner-y: 100%; }
.ui-box-special[data-corner="tr"]{ --corner-x: 100%; --corner-y: 0%; }
.ui-box-special[data-corner="bl"]{ --corner-x: 0%;   --corner-y: 100%; }
.ui-box-special[data-corner="tl"]{ --corner-x: 0%;   --corner-y: 0%; }

.ui-box-special::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 4;
  border-radius: inherit;
  padding: var(--ui-border-w);

  background: linear-gradient(135deg,
    rgba(120,210,255,.55) 0%,
    rgba(120,210,255,.18) 45%,
    rgba(120,210,255,.08) 100%);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events:none;
}

.ui-box-special__fx{
  position:absolute;
  z-index: 2;

  width: var(--ui-corner-size);
  height: var(--ui-corner-size);
  pointer-events:none;

  contain: strict;
  will-change: contents;
}

/* keep your over-border positioning */
.ui-box-special[data-corner="br"] .ui-box-special__fx{ right:-2px; bottom:-2px; left:auto; top:auto; }
.ui-box-special[data-corner="tr"] .ui-box-special__fx{ right:-2px; top:-2px; left:auto; bottom:auto; }
.ui-box-special[data-corner="bl"] .ui-box-special__fx{ left:-2px;  bottom:-2px; right:auto; top:auto; }
.ui-box-special[data-corner="tl"] .ui-box-special__fx{ left:-2px;  top:-2px; right:auto; bottom:auto; }

@media (prefers-reduced-motion: reduce){
  .ui-box-special__fx{ display:block; }
}

.ui-box-mainboard{
  --ui-corner-size: 260px;
  --ui-border-w: 1px;
  --ui-radius: 0px;

  /* Background (OPAQUE) */
  --ui-bg-top: rgb(26, 40, 54);
  --ui-bg-bottom: rgb(12, 18, 26);

  /* Grid / Hex */
  --raster-size: 8px;
  --grid-line: 1;
  --raster-color: rgba(170,235,255,.55);
  --hex-stretch: 1.95;

  /* Glow */
  --ui-accent: rgba(120,210,255,1);
  --ui-accent-soft: rgba(120,210,255,.22);

  position: relative;
  overflow: hidden;  
  --corner-x: 100%;
  --corner-y: 100%;
}

.ui-box-mainboard > *{
  position: relative;
  z-index: 2;
}

.mainboard{
  position: relative;
  overflow: hidden;
}

/* Canvas hinter deinem Content */
.mainboard > .mainboard__fx{
  position:absolute;
  z-index: 1;
  inset:0;
  pointer-events:none;
}

.mainboard > *{
  position: relative;  
}

/* Tuning per CSS vars */
.mainboard{
  --mb-grid: 22;                 /* Rastergröße in CSS px */
  --mb-tile: 228;                /* 0 = kein Tile, sonst Tilegröße in px (repeat) */

  --mb-density: 1.15;            /* 0.8..1.4 */
  --mb-pulse: 4;                 /* parallele Pulse */

  --mb-dpr: 1.5;                 /* max devicePixelRatio */
  --mb-maxpx: 1024;              /* Hard cap pro Tile-Canvas (px) */

  /* Farben: alles eher graublau, damit Text drauf lesbar bleibt */
  --mb-trace: rgba(120,150,165,0.22);
  --mb-trace-soft: rgba(120,150,165,0.12);
  --mb-via: rgba(150,175,190,0.18);

  --mb-chip-fill: rgba(210,220,230,0.09);
  --mb-chip-stroke: rgba(200,220,235,0.16);
  --mb-chip-text: rgba(235,245,255,0.35);

  --mb-glow: rgba(120,210,255,0.55);   /* Pulse glow */
  --mb-glow2: rgba(140,120,255,0.35);  /* selten lila */
}

.mainboard svg, .mainboard canvas{
  opacity: 0.6;
}

/* Canvas-Layer für mainboard + riegel */
.mainboard,
.riegel {
  position: relative; /* falls noch nicht gesetzt */
  overflow: hidden;   /* wichtig: nichts außerhalb */
}

.mainboard__fx,
.riegel__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
}

/* -----------------------------------------------------------
   SI Build Button (schräg + Glow + animierter Rahmen + Pulse)
   Benötigt: --ui-color (und optional --ui-bg)
   Usage:
     <button class="si-build-button ok">...</button>
     <button class="si-build-button no">...</button>
     <button class="si-build-button trader">...</button>
     (trader + ok/no geht auch: .trader zeigt Icon, Farbe kommt von ok/no)
----------------------------------------------------------- */

.si-build-button{
  /* Basics */
  --skew: -14deg;
  --ui-bg-fallback: rgba(0,0,0,0.75);
  --state: var(--ui-color);
  --edge: color-mix(in oklab, var(--ui-color) 55%, var(--state) 45%);
  --pad-y: 3px;
  --pad-x: 18px;
  position: relative;
  display: inline-block;
  padding: var(--pad-y) var(--pad-x);
  color: #fff;
  border: 1px solid var(--edge);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--state) 18%, transparent),
      transparent 55%),
    linear-gradient(180deg,
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.82)),
    var(--ui-bg, var(--ui-bg-fallback));
  box-shadow:
    0 0 6px rgba(0,0,0,1),
    0 0 18px color-mix(in oklab, var(--state) 38%, transparent),
    inset 0 0 10px color-mix(in oklab, var(--state) 20%, transparent);
  cursor: pointer;
  user-select: none;
  text-decoration: none;

  transform: skewX(var(--skew));
  transform-origin: center;
  overflow: hidden;
  isolation: isolate;

  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* Inhalt wieder “gerade ziehen” */
.si-build-button > *{
  transform: skewX(calc(-1 * var(--skew)));
  display: block;
  text-align: center;
  text-shadow: 0 0 2px #000, 0 0 8px rgba(0,0,0,0.85);
}

/* Zwei-Zeilen Layout */
.si-build-button .si-build-button__top{
  font-size: 9px;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2px;
  text-align: center;
}

.si-build-button .si-build-button__time{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .6px;
  line-height: 1.05;
  text-align: center;
}

/* Kleine “Caps” wie bei deinen Buttons */
.si-build-button::marker{ content: ""; }
.si-build-button::before,
.si-build-button::after{
  content:"";
  position:absolute;
  width: 9px; height: 9px;
  background: var(--edge);
  pointer-events:none;
  z-index: 1;
}
.si-build-button::before{
  left:-1px; bottom:-1px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.si-build-button::after{
  right:-1px; top:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Hover / Active */
.si-build-button:hover{
  filter: brightness(1.18);
  transform: skewX(var(--skew)) translateY(-2px);
  box-shadow:
    0 0 7px rgba(0,0,0,1),
    0 0 26px color-mix(in oklab, var(--state) 55%, transparent),
    inset 0 0 12px color-mix(in oklab, var(--state) 26%, transparent);
}
.si-build-button:active{
  transform: skewX(var(--skew)) translateY(0px);
  filter: brightness(1.05);
}

/* Focus */
.si-build-button:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--edge) 70%, white 20%);
  outline-offset: 2px;
}

/* Zustände */
.si-build-button.ok{ --state: #35c950; }
.si-build-button.no{
  --state: #e74c3c;
  cursor: not-allowed;
}

/* Trader: Icon unten rechts (Platzhalter gelbe Box).
   Wenn ok/no drauf ist, bleibt deren Farbe; Trader färbt nur, wenn sonst nix gesetzt. */
.si-build-button.trader:not(.ok):not(.no){ --state: #f1c40f; }

.si-build-button.trader .si-build-button__trader-badge{ display:none; } /* optional falls du später lieber ein echtes Element nutzt */

.si-build-button.trader::selection{ background: transparent; }

.si-build-button.trader::after{
  /* Achtung: ::after ist schon “cap” oben rechts.
     Deshalb nehmen wir ein extra Layer über background mit ::after? -> wir nutzen stattdessen ::after nicht doppelt.
     Lösung: Badge auf ::before2 via box-shadow trick geht nicht.
     Daher: wir hängen Badge an .si-build-button__badge per zusätzlichem Pseudo auf dem Button: */
}

/* Trader Badge über ein zusätzliches Pseudo-Element per background-layer */
.si-build-button.trader{
  --_badgeSize: 18px;
}
.si-build-button.trader .si-build-button__badge{
  display:none; /* falls du’s als Element reinsetzen willst */
}

/* Workaround: wir nutzen ein “echtes” zusätzliches Pseudo über eine innere Maske */
.si-build-button.trader .si-build-button__top{
  position: relative;
}
.si-build-button.trader .si-build-button__top::after{
  content:"";
  position:absolute;
  right: -10px;
  bottom: -42px;
  width: var(--_badgeSize);
  height: var(--_badgeSize);
  background: #f1c40f;           /* Platzhalter */
  border: 1px solid rgba(0,0,0,0.75);
  box-shadow: 0 0 8px rgba(0,0,0,0.8);
  border-radius: 2px;
  transform: skewX(calc(-1 * var(--skew))); /* weil parent-content schon unskewed ist */
  z-index: 3;
}

/* -----------------------------------------------------------
   Animation: “beweglicher Rahmen” + Pulse
----------------------------------------------------------- */

/* Pulse (sehr subtil) */
@keyframes siBuildPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--state) 35%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--state) 0%, transparent); }
}

/* Rotierender Highlight-Rand (moving frame) */
.si-build-button .si-build-button__frame{
  display:none; /* nur falls du mal ein echtes inneres Frame-Element willst */
}

.si-build-button{
  /* immer leicht pulsen – wenn dir zu viel ist: wegnehmen */
  animation: siBuildPulse 1.8s ease-in-out infinite;
}

/* Damit die Caps wieder da sind, zeichnen wir sie als extra Layer auf dem Button */
.si-build-button .si-build-button__caps{
  display:none; /* nicht nötig */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .si-build-button{
    animation: none;
  }
  .si-build-button::before{
    animation: none;
  }
}