/* v10k: Hajin / X01 area-tile filter pills. Scoped to area hubs. */

.area-hub-filter{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  min-width:0;
  min-height:36px; /* reserved height so the row does not jump when pressed */
}
.area-hub-filter__toggles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
.area-hub-filter__toggle{
  appearance:none;
  margin:0;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.82);
  font:700 .68rem/1 "Chakra Petch",system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:none;
  text-shadow:none;
}
.area-hub-filter__toggle:hover,
.area-hub-filter__toggle:focus-visible{
  color:#fff;
}
.area-hub-filter__toggle:focus-visible{
  outline:2px solid #4DC8FF;
  outline-offset:2px;
}
.area-hub-filter__toggle--x01{
  color:#C8C0FF;
  border-color:rgba(122,108,255,.5);
}
.area-hub-filter__toggle--hajin{
  color:#7EEFE4;
  border-color:rgba(0,200,180,.5);
}
.area-hub-filter__toggle--x01[aria-pressed="true"],
.area-hub-filter__toggle--x01.is-active{
  color:#E8E4FF;
  border-color:#7A6CFF;
  background:rgba(122,108,255,.18);
  box-shadow:0 0 12px -4px rgba(122,108,255,.85);
}
.area-hub-filter__toggle--hajin[aria-pressed="true"],
.area-hub-filter__toggle--hajin.is-active{
  color:#EDFFFC;
  border-color:#7EEFE4;
  background:rgba(0,200,180,.16);
  box-shadow:0 0 12px -4px rgba(0,200,180,.85);
}

/* display:grid on .tiles-areas otherwise wins over [hidden] */
[data-area-group][hidden],
[data-area-heading][hidden]{
  display:none !important;
}


/* v10l: zoom the 6 new Hajin area tiles to fill the 16:9 frame.
   Pin positions were measured on the 1600×900 sources. Images are not cropped. */
.tiles-areas .tile .thumb.thumb--area-zoom{
  overflow:hidden;
}
.tiles-areas .tile .thumb.thumb--area-zoom img{
  object-fit:cover !important;
  object-position:var(--area-pin-x) var(--area-pin-y) !important;
  transform-origin:var(--area-pin-x) var(--area-pin-y);
  transform:scale(var(--area-zoom)) !important;
}

/* Heavenly Luck Casino — pin at 666.6, 324.5. Min scale to hide letterbox: 1.779. */
.tiles-areas .tile .thumb.thumb--area-zoom-heavenly-luck-casino{
  --area-pin-x:41.66%;
  --area-pin-y:36.06%;
  --area-zoom:1.85;
}
/* Cheongun Village — pin at 855.8, 214.2. Min scale: 1.660; extra zoom to match X01 tightness. */
.tiles-areas .tile .thumb.thumb--area-zoom-cheongun-village{
  --area-pin-x:53.49%;
  --area-pin-y:23.80%;
  --area-zoom:2.05;
}
/* Cheonwang Peak Array — pin at 757.2, 379.3. Min scale: 1.931. */
.tiles-areas .tile .thumb.thumb--area-zoom-cheonwang-peak-array{
  --area-pin-x:47.33%;
  --area-pin-y:42.14%;
  --area-zoom:2;
}
/* Mirae General Hospital — pin at 637.7, 491.3. Min scale: 2.232. */
.tiles-areas .tile .thumb.thumb--area-zoom-mirae-general-hospital{
  --area-pin-x:39.86%;
  --area-pin-y:54.59%;
  --area-zoom:2.28;
}
/* Songdo Wharf — pin at 474.5, 318.3. Min scale: 2.920 (pin sits close to the left edge). */
.tiles-areas .tile .thumb.thumb--area-zoom-songdo-wharf{
  --area-pin-x:29.66%;
  --area-pin-y:35.37%;
  --area-zoom:2.95;
}

/* 14th Political Prison — the area label sits far below the pin, so a
   pin-origin scale high enough to hide the letterbox would crop the name.
   Frame the full content width (x 289–1311) at 16:9, origin top-left,
   starting at y 250 so the pin, compound walls, and label all stay in view. */
.tiles-areas .tile .thumb.thumb--area-zoom-14th-political-prison{
  --area-zoom:1.5656;
  --area-crop-x:-18.0625%;
  --area-crop-y:-27.7778%;
}
.tiles-areas .tile .thumb.thumb--area-zoom-14th-political-prison img{
  object-position:center center !important;
  transform-origin:0 0;
  transform:scale(var(--area-zoom)) translate(var(--area-crop-x), var(--area-crop-y)) !important;
}