/* One painted clipboard plate. Buttons are bitmap hotspots. */

.result-panel,
.result-panel:not(.is-empty-result),
.result-panel.is-empty-result {
  width: min(430px, calc(100vw - 12px), calc((100dvh - 10px) * 9 / 16));
}

.result-panel form,
.result-panel:not(.is-empty-result) form,
.result-panel.is-empty-result form {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 0 !important;
  max-height: calc(100dvh - 8px);
  aspect-ratio: 9 / 16;
  padding: 0 !important;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: url("./assets/art/a17/result/panel_settlement_blank.png?v=15") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 18px 28px rgba(25,10,4,.55));
}

.result-panel .panel-kicker {
  display: none !important;
}

.result-panel h2,
.result-panel .result-grade {
  display: none !important;
}

/* 9:16 bands — assets/art/a17/result/layout-settlement-9x16.json */
.result-panel .result-new,
.result-panel:not(.is-empty-result) .result-new {
  position: absolute;
  top: 25.5%;
  left: 50%;
  z-index: 6;
  display: block;
  width: 48%;
  height: 7%;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  object-fit: contain;
  transform: translateX(-50%);
  mix-blend-mode: multiply;
}

.result-panel .result-new[hidden] {
  display: none !important;
}

.result-panel .result-cards,
.result-panel .result-empty {
  position: absolute;
  top: 30%;
  left: 11%;
  right: 11%;
  z-index: 5;
  width: auto;
  height: 29%;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0;
  transform: none;
}

.result-panel:has(.result-new[hidden]) .result-cards {
  top: 17%;
  height: 42%;
}

.result-panel:not(.is-empty-result) .result-cards {
  display: flex;
  align-items: flex-start;
  justify-content: center !important;
  flex-wrap: nowrap;
  gap: 3.4%;
  box-sizing: border-box;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none;
}

.result-panel:not(.is-empty-result) .mini-card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 33%;
  min-width: 0;
  max-height: 100%;
  aspect-ratio: auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transform: none !important;
  filter: drop-shadow(3px 7px 8px rgba(48, 22, 8, .38)) !important;
}

.result-panel:not(.is-empty-result) .mini-card .card-art,
.result-panel:not(.is-empty-result) .mini-card img.card-art {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center top;
  background: transparent;
  border-radius: 4px;
}

.result-panel .result-card-blurb {
  margin: 4px 2px 0;
  color: #3d2718;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(11px, 3.1vw, 14px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .03em;
  text-align: center;
}

.result-panel:not(.is-empty-result) .mini-card > b {
  display: none;
}

.result-cards[data-count="1"] {
  top: 31%;
  height: 36%;
  overflow: hidden !important;
}

.result-cards[data-count="1"] .mini-card {
  width: 32%;
  transform: none !important;
}

.result-panel:has(.result-cards[data-count="1"]) .result-kill {
  top: 69%;
  height: 14%;
}

.result-panel:not(.is-empty-result) .result-cards[data-count="2"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  justify-items: stretch;
  top: 33.5%;
  left: 50%;
  right: auto !important;
  width: 72% !important;
  min-width: 0 !important;
  height: 34%;
  gap: 10px;
  flex-wrap: unset;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

.result-panel:not(.is-empty-result) .result-cards[data-count="2"] .mini-card {
  width: 100% !important;
  max-width: none;
  transform: none !important;
}

.result-panel:not(.is-empty-result) .result-cards[data-count="2"] .mini-card .card-art {
  width: 100%;
  height: auto !important;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center top;
}

.result-panel:not(.is-empty-result) .result-cards[data-count="2"] .result-card-blurb {
  min-height: 2.5em;
}

.result-panel:has(.result-cards[data-count="2"]) .result-kill {
  top: 69%;
  height: 14%;
}

.result-panel:not(.is-empty-result) .result-cards[data-count="3"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  align-content: start;
  justify-items: center;
  top: 33.5%;
  left: 50%;
  right: auto !important;
  width: 74% !important;
  min-width: 0 !important;
  height: 32%;
  flex-wrap: unset;
  gap: 6px;
  transform: translateX(-50%) !important;
}

.result-panel:not(.is-empty-result) .result-cards[data-count="3"] .mini-card {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  transform: none !important;
}

.result-panel:has(.result-cards[data-count="3"]) .result-kill {
  top: 67%;
  height: 14%;
}

.result-cards[data-count="3"] .result-card-blurb {
  display: none;
}

.result-cards.is-many {
  flex-wrap: wrap;
  align-content: center;
  gap: 2.4% 3%;
  overflow: hidden;
}

.result-cards.is-many .mini-card {
  width: 46%;
  transform: none;
  margin: 0;
}

.result-cards.is-many .result-card-blurb {
  display: none;
}

.result-panel .result-kill,
.result-panel:not(.is-empty-result) .result-kill,
.result-panel.is-empty-result .result-kill {
  position: absolute !important;
  top: 60%;
  left: 50%;
  z-index: 8;
  display: block;
  width: 82%;
  height: 17.5%;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: contain;
  background: none;
  transform: translateX(-50%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.result-panel.is-empty-result .result-kill {
  top: 30%;
  height: 28%;
  width: 86%;
}

.result-kill[hidden],
.result-new[hidden] {
  display: none !important;
}

.result-panel .mini-card.rarity-rare,
.result-panel .mini-card.rarity-hidden {
  filter: drop-shadow(3px 7px 8px rgba(48, 22, 8, .38));
}

.result-panel .result-actions,
.result-panel:not(.is-empty-result) .result-actions,
.result-panel.is-empty-result .result-actions {
  display: grid !important;
  position: absolute !important;
  left: 8.4% !important;
  right: 8.4% !important;
  top: auto !important;
  bottom: 3.6% !important;
  z-index: 20;
  width: auto;
  height: 10.2%;
  margin: 0;
  overflow: hidden;
  grid-template-columns: 1fr 1fr !important;
  gap: 4.6% !important;
  pointer-events: auto;
}

.result-panel .result-actions button,
.result-panel .result-actions #result-collection,
.result-panel .result-actions #result-again,
.result-panel #result-collection,
.result-panel #result-again,
.result-panel #result-again.primary-action,
.result-panel.is-empty-result .result-actions button,
.result-panel.is-empty-result #result-collection,
.result-panel.is-empty-result #result-again {
  min-height: 0 !important;
  height: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-image: none !important;
  border-image-source: none !important;
  border-image-width: 0 !important;
  color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  overflow: hidden;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.result-panel #result-collection:hover,
.result-panel #result-again:hover,
.result-panel #result-again.primary-action:hover,
.result-panel #result-collection:active,
.result-panel #result-again:active,
.result-panel .result-actions button:focus,
.result-panel .result-actions button:focus-visible,
.result-panel #result-collection:focus,
.result-panel #result-collection:focus-visible,
.result-panel #result-again:focus,
.result-panel #result-again:focus-visible,
.result-panel:not(.is-empty-result) .result-actions button:focus-visible,
.result-panel.is-empty-result .result-actions button:focus-visible {
  border-image: none !important;
  border-image-source: none !important;
  background: transparent !important;
  background-image: none !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

.result-panel .panel-close,
.result-panel.is-empty-result .panel-close {
  display: none !important;
}

.result-panel.is-empty-result form {
  aspect-ratio: 9 / 16;
  background: url("./assets/art/a17/result/panel_settlement_blank.png?v=15") center / 100% 100% no-repeat !important;
}

.result-panel.is-empty-result .panel-kicker,
.result-panel.is-empty-result .result-empty,
.result-panel.is-empty-result .result-kill {
  visibility: visible;
  pointer-events: none;
}

.result-panel.is-empty-result .result-empty {
  display: flex;
  top: 59%;
  left: 12%;
  right: 12%;
  height: 8%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.result-panel.is-empty-result .result-empty-cards {
  display: none !important;
}

.result-panel.is-empty-result .result-empty-blurb {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(13px, 3.6vw, 16px);
}

.result-panel form,
.result-panel:not(.is-empty-result) form,
.result-panel.is-empty-result form {
  min-height: 0 !important;
}

@media (max-width: 540px) {
  .result-panel .result-card-blurb { font-size: 14px; }
  .result-panel:not(.is-empty-result) .result-cards {
    justify-content: center !important;
    padding-inline: 0 !important;
  }
}