/* Bloki marker readability overrides */
.clue-token{
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  border-radius:7px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--clue) 10%,transparent);
}
.clue-token.square{
  width:42px;
  height:42px;
}
.clue-token.wide{
  width:54px;
  height:32px;
}
.clue-token.tall{
  width:32px;
  height:54px;
}
.clue-token.square::before,
.clue-token.square::after,
.clue-token.wide::before,
.clue-token.wide::after,
.clue-token.tall::before,
.clue-token.tall::after{
  display:none !important;
}

/* "Dowolny" jak w Patches: kwadrat + szeroki + wysoki nałożone na siebie. */
.clue-token.any{
  width:38px;
  height:38px;
  border-radius:7px;
}
.clue-token.any::before{
  display:block;
  left:-10px;
  right:-10px;
  top:9px;
  bottom:9px;
  border-radius:7px;
  opacity:.78;
}
.clue-token.any::after{
  display:block;
  top:-10px;
  bottom:-10px;
  left:9px;
  right:9px;
  border-radius:7px;
  opacity:.78;
}

/* Legenda używa dokładnie tej samej geometrii co znacznik na planszy. */
.legend-shape.any{
  position:relative;
  width:18px;
  height:18px;
  border:2px solid #8E6CFF;
  border-radius:4px;
  background:rgba(142,108,255,.20);
  box-shadow:none;
  overflow:visible;
  z-index:0;
}
.legend-shape.any::before,
.legend-shape.any::after{
  content:"";
  position:absolute;
  border:2px solid #8E6CFF;
  background:rgba(142,108,255,.20);
  border-radius:4px;
  z-index:-1;
}
.legend-shape.any::before{
  left:-5px;
  right:-5px;
  top:4px;
  bottom:4px;
}
.legend-shape.any::after{
  top:-5px;
  bottom:-5px;
  left:4px;
  right:4px;
}

/* Podpowiedź niczego nie zaznacza za gracza. Przyciemnia resztę planszy i obrysowuje poprawny obszar. */
.block-placement.hint-highlight{
  z-index:8;
  border:4px solid var(--block,#8E6CFF);
  background:rgba(255,255,255,.06);
  box-shadow:
    0 0 0 999px rgba(7,8,12,.64),
    inset 0 0 0 2px rgba(255,255,255,.88),
    0 0 20px color-mix(in srgb,var(--block,#8E6CFF) 55%,transparent);
  animation:bloki-hint-pulse .75s ease-in-out 2;
}
@keyframes bloki-hint-pulse{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.35);}
}

.clue-area{
  font-size:clamp(17px,3.4vw,26px);
}
@media(max-width:767px){
  .clue-token.square{width:34px;height:34px}
  .clue-token.wide{width:46px;height:28px}
  .clue-token.tall{width:28px;height:46px}
  .clue-token.any{width:32px;height:32px}
  .clue-token.any::before{left:-8px;right:-8px;top:8px;bottom:8px}
  .clue-token.any::after{top:-8px;bottom:-8px;left:8px;right:8px}
  .block-placement.hint-highlight{border-width:3px}
}