/* One generated atlas supplies every character. Numbers stay in the map layer. */
.hk-sticker { display: block; width: 100%; aspect-ratio: 1; flex-shrink: 0; pointer-events: none; }
.hk-sticker svg { display: block; width: 100%; height: 100%; overflow: hidden; fill: none; stroke: none; }
.hk-sticker image { image-rendering: auto; }
.sidebar-top h1 { margin: 0 0 7px; font-size: 31px; white-space: nowrap; }
.sidebar-top .intro { margin-bottom: 0; }
.crew-preview { display: flex; align-items: center; gap: 5px; width: 100%; background: transparent; padding: 6px 0 0; text-align: left; }
.crew-preview-art { display: flex; align-items: center; width: 120px; min-width: 120px; padding-left: 2px; }
.crew-preview-art .hk-sticker { width: 49px; filter: drop-shadow(0 3px 2px #0005); }
.crew-preview-art .hk-sticker + .hk-sticker { margin-left: -17px; }
.crew-preview-art .hk-sticker:nth-child(1) { transform: rotate(-9deg); }
.crew-preview-art .hk-sticker:nth-child(2) { transform: translateY(-4px) rotate(8deg); }
.crew-preview-art .hk-sticker:nth-child(3) { transform: rotate(-5deg); }
.crew-preview-copy { color: #fff0d1; font-size: 11px; line-height: 1.5; }
.crew-preview-copy strong { display: block; font-weight: 600; }
.crew-preview-copy small { display: block; color: #cbb1ff; font-size: 9px; }
.progress-row { margin-top: 12px; }
.sticker-wall-button {
  min-height: 42px; display: flex; align-items: center; gap: 7px; background: #281e35; color: #fff0d1;
  border: 1px solid #725a83; border-radius: 8px; padding: 3px 11px 3px 5px;
  text-align: left; font-size: 12px; font-weight: 500;
}
.sticker-wall-button .hk-sticker { width: 32px; transform: rotate(-7deg); }
.detail-heading { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 10px; align-items: center; margin: 0 0 8px; padding-right: 28px; }
.detail-heading .detail-topline { padding-right: 0; line-height: 1.6; }
.detail-heading h2 { margin-bottom: 0; }
.detail-heading .hk-sticker { width: 104px; transform: rotate(5deg); filter: drop-shadow(0 3px 2px #0004); }
.haunt-quip { border-top: 1px dashed #725d81; padding-top: 10px; margin: 13px 0 0; color: #d9c7ec; font-size: 10px; line-height: 1.55; }
.haunt-quip strong { color: #f6c38c; font-size: 9px; font-weight: 600; display: block; margin-bottom: 2px; }
.toast.has-sticker { display: flex; align-items: center; gap: 10px; padding: 9px 15px 9px 8px; background: #fff0d1; color: #291b36; }
.toast.has-sticker .hk-sticker { width: 50px; }
.toast.has-sticker > span:last-child { max-width: 250px; line-height: 1.5; }
.leaflet-control-zoom-out svg { vertical-align: middle; }
#sticker-dialog { width: 1000px; padding: 20px 28px 24px; background: #21162d; border: 1px solid #826697; }
#sticker-dialog .dialog-heading { align-items: flex-start; position: sticky; top: -20px; padding: 14px 0; background: #21162df7; z-index: 2; }
#sticker-dialog h2 { font-size: 34px; margin: 0 0 5px; color: #ffaf62; }
#sticker-dialog .wall-intro { margin: 0; color: #d3c5df; max-width: 550px; }
#close-stickers { flex-shrink: 0; width: 44px; height: 44px; background: #3d2c4d; }
.sticker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; margin: 24px 0 30px; }
.sticker-tile { min-width: 0; margin: 0; text-align: center; }
.sticker-tile > .hk-sticker { width: 100%; max-width: 250px; margin: 0 auto 16px; transition: transform .18s ease; filter: drop-shadow(0 6px 3px #09041266); }
.sticker-tile:nth-child(4n+1) > .hk-sticker { transform: rotate(-4deg); }
.sticker-tile:nth-child(4n+3) > .hk-sticker { transform: rotate(4deg); }
.sticker-tile:hover > .hk-sticker { transform: translateY(-5px) rotate(0); }
.sticker-tile strong { display: block; color: #fff0d1; font-size: 15px; margin-bottom: 5px; }
.sticker-tile figcaption > span { display: block; color: #c9b9d7; font-size: 12px; line-height: 1.5; max-width: 240px; margin: auto; }
.wall-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 17px; border-top: 1px solid #5e466d; }
.wall-footer p { margin: 0; max-width: 470px; font-size: 10px; color: #c9b9d7; }
.wall-download { background: #cbb1ff; color: #241732; text-decoration: none; white-space: nowrap; padding: 11px 14px; border-radius: 6px; font-size: 11px; font-weight: 600; }
@media (max-width: 1000px) and (min-width: 701px) { .sidebar-top h1 { font-size: 29px; } .crew-preview-copy { font-size: 10px; } }
@media (max-width: 700px) {
  .sticker-wall-button { min-height: 44px; padding: 0 4px; font-size: 12px; background: transparent; border: 0; }
  .sticker-wall-button .hk-sticker { width: 30px; }
  .detail-heading { grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
  .detail-heading .hk-sticker { width: 96px; }
  .detail-heading h2 { font-size: 25px; }
  .haunt-quip { margin-top: 10px; padding-top: 8px; font-size: 10px; }
  #sticker-dialog { padding: 12px 20px 22px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
  #sticker-dialog .dialog-heading { top: -12px; padding: 12px 0; }
  #sticker-dialog h2 { font-size: 30px; }
  #sticker-dialog .wall-intro { font-size: 11px; }
  .sticker-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 12px; }
  .sticker-tile > .hk-sticker { max-width: 280px; }
  .wall-footer { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
  .wall-download { display: block; }
}
@media (prefers-reduced-motion: reduce) { .sticker-tile > .hk-sticker { transition: none; } .sticker-tile:hover > .hk-sticker { transform: none; } }