/* Generated by scripts/extract_broken_tile_shapes.py.
   Source: examples/broken_tiles.png
   These polygons trace thresholded, connected stone fragments; do not hand-edit. */

.tile-shape {
  clip-path: var(--tile-clip);
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

/* Text/control shapes use an absolutely inset safe rectangle. Container
   query units make block insets follow rendered height; 10px is the
   mandatory clearance between the furthest content edge and the mask. */
.tile-shape--content {
  position: relative;
  container-type: size;
  padding: 0 !important;
  overflow: hidden;
}

.tile-shape--content > .tile-safe-content {
  position: absolute;
  z-index: 1;
  top: calc(var(--tile-safe-top) * 1cqh + 10px);
  right: calc(var(--tile-safe-right) * 1cqw + 10px);
  bottom: calc(var(--tile-safe-bottom) * 1cqh + 10px);
  left: calc(var(--tile-safe-left) * 1cqw + 10px);
  min-width: 0;
  min-height: 0;
}

/* source-bounds: 55,29 60x91; aspect: 0.659; safe-rect-insets: 31% 17% 27% 45% */
.tile-shape-01 {
  --tile-clip: polygon(38.3% 0.0%, 83.3% 29.7%, 91.7% 45.1%, 98.3% 93.4%, 90.0% 95.6%, 66.7% 97.8%, 0.0% 17.6%, 10.0% 7.7%);
  --tile-source-aspect: 0.659;
  --tile-safe-top: 31;
  --tile-safe-right: 17;
  --tile-safe-bottom: 27;
  --tile-safe-left: 45;
}

/* source-bounds: 495,86 50x49; aspect: 1.020; safe-rect-insets: 7% 19% 45% 21% */
.tile-shape-02 {
  --tile-clip: polygon(50.0% 0.0%, 82.0% 6.1%, 96.0% 49.0%, 96.0% 98.0%, 78.0% 98.0%, 2.0% 40.8%, 4.0% 8.2%);
  --tile-source-aspect: 1.020;
  --tile-safe-top: 7;
  --tile-safe-right: 19;
  --tile-safe-bottom: 45;
  --tile-safe-left: 21;
}

/* source-bounds: 117,99 71x45; aspect: 1.578; safe-rect-insets: 10% 11% 40% 16% */
.tile-shape-03 {
  --tile-clip: polygon(81.7% 0.0%, 91.5% 0.0%, 98.6% 53.3%, 56.3% 86.7%, 26.8% 97.8%, 0.0% 11.1%);
  --tile-source-aspect: 1.578;
  --tile-safe-top: 10;
  --tile-safe-right: 11;
  --tile-safe-bottom: 40;
  --tile-safe-left: 16;
}

/* source-bounds: 231,118 46x28; aspect: 1.643; safe-rect-insets: 35% 29% 11% 10% */
.tile-shape-04 {
  --tile-clip: polygon(26.1% 0.0%, 73.9% 35.7%, 95.7% 60.7%, 97.8% 75.0%, 73.9% 89.3%, 0.0% 96.4%, 8.7% 35.7%);
  --tile-source-aspect: 1.643;
  --tile-safe-top: 35;
  --tile-safe-right: 29;
  --tile-safe-bottom: 11;
  --tile-safe-left: 10;
}

/* source-bounds: 417,120 41x30; aspect: 1.367; safe-rect-insets: 31% 25% 14% 9% */
.tile-shape-05 {
  --tile-clip: polygon(48.8% 0.0%, 73.2% 16.7%, 95.1% 46.7%, 95.1% 60.0%, 70.7% 93.3%, 29.3% 96.7%, 7.3% 86.7%, 0.0% 36.7%);
  --tile-source-aspect: 1.367;
  --tile-safe-top: 31;
  --tile-safe-right: 25;
  --tile-safe-bottom: 14;
  --tile-safe-left: 9;
}

/* source-bounds: 589,128 59x32; aspect: 1.844; safe-rect-insets: 31% 15% 17% 13% */
.tile-shape-06 {
  --tile-clip: polygon(61.0% 0.0%, 72.9% 0.0%, 83.1% 21.9%, 98.3% 75.0%, 94.9% 81.2%, 83.1% 96.9%, 0.0% 81.2%, 0.0% 62.5%, 10.2% 31.2%);
  --tile-source-aspect: 1.844;
  --tile-safe-top: 31;
  --tile-safe-right: 15;
  --tile-safe-bottom: 17;
  --tile-safe-left: 13;
}

/* source-bounds: 649,132 45x59; aspect: 0.763; safe-rect-insets: 3% 20% 40% 17% */
.tile-shape-07 {
  --tile-clip: polygon(31.1% 0.0%, 86.7% 0.0%, 97.8% 5.1%, 91.1% 44.1%, 57.8% 98.3%, 33.3% 83.1%, 6.7% 47.5%, 0.0% 5.1%);
  --tile-source-aspect: 0.763;
  --tile-safe-top: 3;
  --tile-safe-right: 20;
  --tile-safe-bottom: 40;
  --tile-safe-left: 17;
}

/* source-bounds: 20,140 46x65; aspect: 0.708; safe-rect-insets: 17% 23% 16% 29% */
.tile-shape-08 {
  --tile-clip: polygon(65.2% 0.0%, 84.8% 26.2%, 97.8% 98.5%, 28.3% 84.6%, 0.0% 18.5%);
  --tile-source-aspect: 0.708;
  --tile-safe-top: 17;
  --tile-safe-right: 23;
  --tile-safe-bottom: 16;
  --tile-safe-left: 29;
}

/* source-bounds: 228,145 48x47; aspect: 1.021; safe-rect-insets: 9% 36% 15% 7% */
.tile-shape-09 {
  --tile-clip: polygon(89.6% 0.0%, 97.9% 0.0%, 97.9% 6.4%, 60.4% 95.7%, 6.2% 87.2%, 0.0% 8.5%);
  --tile-source-aspect: 1.021;
  --tile-safe-top: 9;
  --tile-safe-right: 36;
  --tile-safe-bottom: 15;
  --tile-safe-left: 7;
}

/* source-bounds: 427,192 44x35; aspect: 1.257; safe-rect-insets: 9% 7% 33% 26% */
.tile-shape-10 {
  --tile-clip: polygon(84.1% 0.0%, 95.5% 2.9%, 95.5% 65.7%, 63.6% 97.1%, 27.3% 71.4%, 0.0% 11.4%);
  --tile-source-aspect: 1.257;
  --tile-safe-top: 9;
  --tile-safe-right: 7;
  --tile-safe-bottom: 33;
  --tile-safe-left: 26;
}

/* source-bounds: 502,203 57x55; aspect: 1.036; safe-rect-insets: 12% 9% 38% 37% */
.tile-shape-11 {
  --tile-clip: polygon(49.1% 0.0%, 93.0% 10.9%, 98.2% 18.2%, 98.2% 36.4%, 93.0% 61.8%, 33.3% 98.2%, 1.8% 83.6%, 0.0% 74.5%, 42.1% 1.8%);
  --tile-source-aspect: 1.036;
  --tile-safe-top: 12;
  --tile-safe-right: 9;
  --tile-safe-bottom: 38;
  --tile-safe-left: 37;
}

/* source-bounds: 39,207 43x56; aspect: 0.768; safe-rect-insets: 3% 24% 14% 18% */
.tile-shape-12 {
  --tile-clip: polygon(2.3% 0.0%, 76.7% 1.8%, 97.7% 82.1%, 27.9% 98.2%, 18.6% 92.9%);
  --tile-source-aspect: 0.768;
  --tile-safe-top: 3;
  --tile-safe-right: 24;
  --tile-safe-bottom: 14;
  --tile-safe-left: 18;
}

/* source-bounds: 114,222 48x75; aspect: 0.640; safe-rect-insets: 28% 41% 14% 18% */
.tile-shape-13 {
  --tile-clip: polygon(20.8% 0.0%, 97.9% 54.7%, 45.8% 98.7%, 18.8% 93.3%, 0.0% 10.7%);
  --tile-source-aspect: 0.640;
  --tile-safe-top: 28;
  --tile-safe-right: 41;
  --tile-safe-bottom: 14;
  --tile-safe-left: 18;
}

/* source-bounds: 239,226 59x53; aspect: 1.113; safe-rect-insets: 25% 37% 22% 22% */
.tile-shape-14 {
  --tile-clip: polygon(89.8% 0.0%, 98.3% 0.0%, 98.3% 7.5%, 79.7% 56.6%, 49.2% 98.1%, 0.0% 64.2%, 5.1% 41.5%, 33.9% 11.3%);
  --tile-source-aspect: 1.113;
  --tile-safe-top: 25;
  --tile-safe-right: 37;
  --tile-safe-bottom: 22;
  --tile-safe-left: 22;
}

/* source-bounds: 204,235 62x77; aspect: 0.805; safe-rect-insets: 14% 42% 31% 16% */
.tile-shape-15 {
  --tile-clip: polygon(27.4% 0.0%, 58.1% 13.0%, 98.4% 59.7%, 79.0% 98.7%, 27.4% 83.1%, 0.0% 51.9%, 17.7% 1.3%);
  --tile-source-aspect: 0.805;
  --tile-safe-top: 14;
  --tile-safe-right: 42;
  --tile-safe-bottom: 31;
  --tile-safe-left: 16;
}

/* source-bounds: 372,236 49x36; aspect: 1.361; safe-rect-insets: 18% 41% 18% 9% */
.tile-shape-16 {
  --tile-clip: polygon(10.2% 0.0%, 98.0% 30.6%, 81.6% 61.1%, 51.0% 91.7%, 18.4% 94.4%, 0.0% 72.2%);
  --tile-source-aspect: 1.361;
  --tile-safe-top: 18;
  --tile-safe-right: 41;
  --tile-safe-bottom: 18;
  --tile-safe-left: 9;
}

/* source-bounds: 519,243 60x54; aspect: 1.111; safe-rect-insets: 23% 25% 37% 27% */
.tile-shape-17 {
  --tile-clip: polygon(53.3% 0.0%, 80.0% 16.7%, 98.3% 40.7%, 76.7% 63.0%, 26.7% 98.1%, 0.0% 44.4%);
  --tile-source-aspect: 1.111;
  --tile-safe-top: 23;
  --tile-safe-right: 25;
  --tile-safe-bottom: 37;
  --tile-safe-left: 27;
}

/* source-bounds: 466,245 53x53; aspect: 1.000; safe-rect-insets: 20% 24% 31% 25% */
.tile-shape-18 {
  --tile-clip: polygon(43.4% 0.0%, 98.1% 32.1%, 88.7% 54.7%, 54.7% 98.1%, 0.0% 47.2%, 1.9% 37.7%);
  --tile-source-aspect: 1.000;
  --tile-safe-top: 20;
  --tile-safe-right: 24;
  --tile-safe-bottom: 31;
  --tile-safe-left: 25;
}

/* source-bounds: 147,268 40x83; aspect: 0.482; safe-rect-insets: 15% 19% 3% 28% */
.tile-shape-19 {
  --tile-clip: polygon(65.0% 0.0%, 77.5% 1.2%, 95.0% 59.0%, 95.0% 98.8%, 27.5% 97.6%, 12.5% 72.3%, 0.0% 24.1%);
  --tile-source-aspect: 0.482;
  --tile-safe-top: 15;
  --tile-safe-right: 19;
  --tile-safe-bottom: 3;
  --tile-safe-left: 28;
}

/* source-bounds: 630,279 47x54; aspect: 0.870; safe-rect-insets: 20% 14% 29% 21% */
.tile-shape-20 {
  --tile-clip: polygon(76.6% 0.0%, 95.7% 35.2%, 97.9% 64.8%, 42.6% 98.1%, 21.3% 74.1%, 0.0% 25.9%);
  --tile-source-aspect: 0.870;
  --tile-safe-top: 20;
  --tile-safe-right: 14;
  --tile-safe-bottom: 29;
  --tile-safe-left: 21;
}

/* source-bounds: 185,282 61x83; aspect: 0.735; safe-rect-insets: 14% 34% 36% 8% */
.tile-shape-21 {
  --tile-clip: polygon(29.5% 0.0%, 54.1% 3.6%, 98.4% 38.6%, 54.1% 98.8%, 6.6% 63.9%, 0.0% 6.0%);
  --tile-source-aspect: 0.735;
  --tile-safe-top: 14;
  --tile-safe-right: 34;
  --tile-safe-bottom: 36;
  --tile-safe-left: 8;
}

/* source-bounds: 284,309 97x67; aspect: 1.448; safe-rect-insets: 36% 32% 13% 14% */
.tile-shape-22 {
  --tile-clip: polygon(82.5% 0.0%, 99.0% 41.8%, 95.9% 49.3%, 62.9% 95.5%, 17.5% 98.5%, 0.0% 52.2%, 4.1% 40.3%);
  --tile-source-aspect: 1.448;
  --tile-safe-top: 36;
  --tile-safe-right: 32;
  --tile-safe-bottom: 13;
  --tile-safe-left: 14;
}

/* source-bounds: 156,341 54x56; aspect: 0.964; safe-rect-insets: 23% 41% 9% 4% */
.tile-shape-23 {
  --tile-clip: polygon(64.8% 0.0%, 98.1% 28.6%, 55.6% 98.2%, 3.7% 98.2%, 0.0% 23.2%);
  --tile-source-aspect: 0.964;
  --tile-safe-top: 23;
  --tile-safe-right: 41;
  --tile-safe-bottom: 9;
  --tile-safe-left: 4;
}

/* source-bounds: 499,369 58x38; aspect: 1.526; safe-rect-insets: 14% 14% 16% 33% */
.tile-shape-24 {
  --tile-clip: polygon(50.0% 0.0%, 81.0% 7.9%, 98.3% 23.7%, 84.5% 97.4%, 37.9% 92.1%, 8.6% 52.6%, 0.0% 18.4%, 15.5% 2.6%);
  --tile-source-aspect: 1.526;
  --tile-safe-top: 14;
  --tile-safe-right: 14;
  --tile-safe-bottom: 16;
  --tile-safe-left: 33;
}