/*
 * PUZLI Bloki: readable geometric clue language.
 * Works with the existing 6x6 puzzle / solver, no rule or state changes.
 * Loaded last to override older marker and mobile-fit styles.
 */
body.game-bloki .clue-cell {
  background:repeating-linear-gradient(135deg,#174e58 0,#174e58 10px,#195861 10px,#195861 11px)!important;
}

/* Solid, recognisable silhouette instead of stacked glowing outlines. */
body.game-bloki .bloki-cell .clue-token {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  flex:none;
  width:min(62%,47px);
  height:min(62%,47px);
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  padding:0;
  overflow:visible;
  border:2px solid color-mix(in srgb,var(--clue) 75%,#fff 25%);
  border-radius:6px;
  color:#fff;
  background:color-mix(in srgb,var(--clue) 55%,#0b2432);
  box-shadow:0 2px 7px rgba(0,0,0,.18);
}
body.game-bloki .bloki-cell .clue-token.square {width:min(62%,47px);height:min(62%,47px)}
body.game-bloki .bloki-cell .clue-token.wide {width:min(81%,61px);height:min(47%,32px)}
body.game-bloki .bloki-cell .clue-token.tall {width:min(47%,32px);height:min(81%,61px)}
body.game-bloki .bloki-cell .clue-token.any {width:min(54%,40px);height:min(54%,40px)}
body.game-bloki .bloki-cell .clue-token.square::before,
body.game-bloki .bloki-cell .clue-token.square::after,
body.game-bloki .bloki-cell .clue-token.wide::before,
body.game-bloki .bloki-cell .clue-token.wide::after,
body.game-bloki .bloki-cell .clue-token.tall::before,
body.game-bloki .bloki-cell .clue-token.tall::after {
  content:none!important;
}
/* Dashed horizontal + vertical halos signal that 'any' accepts either. */
body.game-bloki .bloki-cell .clue-token.any::before,
body.game-bloki .bloki-cell .clue-token.any::after {
  content:"";
  display:block;
  position:absolute;
  z-index:0;
  opacity:.85;
  border:2px dashed color-mix(in srgb,var(--clue) 88%,#fff 12%);
  border-radius:7px;
  background:color-mix(in srgb,var(--clue) 15%,transparent);
  pointer-events:none;
}
body.game-bloki .bloki-cell .clue-token.any::before {
  left:-25%;right:-25%;top:19%;bottom:19%;
}
body.game-bloki .bloki-cell .clue-token.any::after {
  top:-25%;bottom:-25%;left:19%;right:19%;
}
body.game-bloki .bloki-cell .clue-area {
  position:relative;
  z-index:2;
  font:800 clamp(13px,3.9vw,23px)/1 ui-monospace,Consolas,monospace;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
}
body.game-bloki .bloki-cell .clue-dot {
  z-index:2;
  width:7px;
  height:7px;
  background:#fff;
}

/* Legible two-column legend uses the exact same silhouettes as board clues. */
body.game-bloki .bloki-legend {
  max-width:600px;
  margin:10px auto 0;
  padding:12px 14px;
  border:1px solid #2b7881;
  background:rgba(9,43,54,.94);
  border-radius:8px;
  color:#e5f6f3;
}
body.game-bloki .bloki-legend>strong {
  display:block;
  margin:0 0 10px;
  font-size:14px;
  font-weight:800;
  line-height:1.25;
  color:#f0fffd;
}
body.game-bloki .legend-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 18px;
}
body.game-bloki .legend-grid .legend-item {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  min-height:32px;
  gap:10px;
  padding:0;
  color:#e4f2f0;
  font-size:13px;
  font-weight:650;
  line-height:1.2;
  white-space:normal;
  text-align:left;
}
body.game-bloki .legend-grid .legend-shape {
  position:relative;
  display:block;
  flex:none;
  border:1.5px solid #84ddd1;
  border-radius:3px;
  background:rgba(92,217,197,.44);
  box-shadow:none;
}
body.game-bloki .legend-grid .legend-shape.square {width:23px;height:23px}
body.game-bloki .legend-grid .legend-shape.tall {width:15px;height:29px;margin:0 4px}
body.game-bloki .legend-grid .legend-shape.wide {width:29px;height:15px}
body.game-bloki .legend-grid .legend-shape.any {width:21px;height:21px;margin:0 4px}
body.game-bloki .legend-grid .legend-shape.any::before,
body.game-bloki .legend-grid .legend-shape.any::after {
  content:"";
  position:absolute;
  z-index:0;
  border:1.5px dashed #84ddd1;
  background:rgba(92,217,197,.14);
  border-radius:3px;
}
body.game-bloki .legend-grid .legend-shape.any::before {left:-5px;right:-5px;top:4px;bottom:4px}
body.game-bloki .legend-grid .legend-shape.any::after {top:-5px;bottom:-5px;left:4px;right:4px}
body.game-bloki .bloki-legend>small {
  display:block;
  margin:8px 0 0;
  color:#b6d6d1;
  text-align:left;
  font-size:12px;
  line-height:1.25;
}

@media (max-width:767px) {
  body.game-bloki {
    --mobile-board-size:min(calc(100vw - 20px),calc(100dvh - 362px));
  }
  body.game-bloki .game-shell .bloki-legend {
    box-sizing:border-box;
    height:auto;
    max-height:none;
    min-height:0;
    margin:6px auto 0;
    padding:9px 10px;
    overflow:visible;
  }
  body.game-bloki .game-shell .bloki-legend>strong {
    display:block;
    margin:0 0 6px;
    font-size:12px;
  }
  body.game-bloki .game-shell .bloki-legend>small {
    display:block;
    margin:6px 0 0;
    font-size:11px;
    line-height:1.2;
  }
  body.game-bloki .game-shell .legend-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px 7px;
  }
  body.game-bloki .game-shell .legend-grid .legend-item {
    min-height:29px;
    justify-content:flex-start;
    gap:8px;
    font-size:11px;
    line-height:1.12;
    white-space:normal;
  }
  body.game-bloki .game-shell .legend-grid .legend-shape.square {width:20px;height:20px}
  body.game-bloki .game-shell .legend-grid .legend-shape.tall {width:14px;height:26px;margin:0 3px}
  body.game-bloki .game-shell .legend-grid .legend-shape.wide {width:26px;height:14px}
  body.game-bloki .game-shell .legend-grid .legend-shape.any {width:18px;height:18px;margin:0 3px}
  body.game-bloki .bloki-cell .clue-area {
    font-size:clamp(12px,3.7vw,21px);
  }
}

@media (max-width:767px) and (max-height:620px) {
  body.game-bloki {--mobile-board-size:min(calc(100vw - 20px),calc(100dvh - 360px))}
  body.game-bloki .game-shell .bloki-legend {padding:6px 9px}
  body.game-bloki .game-shell .bloki-legend>strong {margin-bottom:4px}
  body.game-bloki .game-shell .bloki-legend>small {margin-top:4px}
  body.game-bloki .game-shell .legend-grid .legend-item {min-height:26px;font-size:10.5px}
}