/* ===== Glitch Button Effect (mono, autosplit to 1/2/3/4 lines) ===== */

:root{
  --glitchFont: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}

/* celek – už žádný clipping glowe, necháme trošku bleednout */
.gbtn{
  position:relative;
  isolation:isolate;
  cursor:default;
  border:none; background:transparent;
  padding-block:6px; /* malý breath pro glow */
  color:#eaf2ff;
  letter-spacing:0;   /* nemícháme se šířkou 1ch */
  font: 800 clamp(26px,6vw,58px)/1.06 var(--glitchFont);
  contain: layout paint;
  overflow: visible;  /* glow neusekáváme */
  will-change: transform;
}

/* hlavní nápis + barevné vrstvy – flex + wrap, šířku budeme řídit JSem přes max-width:Nch */
.label, .layer{
  display:flex;
  flex-wrap: wrap;
  gap:0;                          /* ať přesně sedí 1ch = 1 znak */
  align-items:center; justify-content:center;
  white-space:normal;
  margin:0 auto;
}

/* žár zjemněný, aby byl čitelný */
.label{
  position:relative; z-index:3;
  text-shadow:
    0 0 1px #fff,
    0 0 8px rgba(255,255,255,.45),
    0 0 18px rgba(16,215,255,.28),
    0 0 26px rgba(255,42,109,.22);
}

/* barevné vrstvy (chromatic), bez ořezu */
.layer{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  mix-blend-mode:screen; filter:url(#g-displace);
  place-items:center;
}

.layer.red  { color:#ff2a6d; text-shadow:0 0 10px #ff2a6d, 0 0 18px #ff2a6d }
.layer.cyan { color:#10d7ff; text-shadow:0 0 10px #10d7ff, 0 0 18px #10d7ff }

/* KAŽDÉ PÍSMENO = pevný box 1ch → žádné cukání, mezera je také 1ch */
.char{ display:inline-block; width:1ch; text-align:center; }
.char--space{ display:inline-block; width:1ch; }

/* glitch stripes – držíme uvnitř textu, ať to nerozbíjí okolní UI */
.stripes{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.gl-stripe{
  position:absolute; left:0; width:100%;
  height:8px;
  background:
    linear-gradient(90deg,
      rgba(16,215,255,0) 0%,
      rgba(16,215,255,.28) 12%,
      rgba(255,255,255,.38) 47%,
      rgba(255,42,109,.28) 88%,
      rgba(255,42,109,0) 100%);
  box-shadow:
    0 0 12px rgba(16,215,255,.28),
    0 0 16px rgba(255,42,109,.22);
  transform:translateX(0);
}

/* volitelný hover – decentní */
.gbtn:hover .label .char{
  text-shadow:
    0 0 2px #fff,
    0 0 12px rgba(255,255,255,.6),
    0 0 24px rgba(255,42,109,.28),
    0 0 30px rgba(16,215,255,.28);
}