/* V0.18 visual repair: approved exercise-book results, compact album, rarity effects. */

/* Give airborne cards room to project beyond their physical centre without being
   cut by the old central canvas rectangle. UI stays above the canvas via z-index. */
@media (min-aspect-ratio: 4 / 5) {
  .a15-main-shell .game-frame {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

@media (max-aspect-ratio: 4 / 5) {
  .a15-main-shell .game-frame {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

/* Settlement chrome lives in styles-result-v021.css. Do not re-style the result panel here. */

/* Shared rarity feedback: visible in result thumbnails, album pockets and detail. */
.mini-card.rarity-rare,
.collection-item.rarity-rare:not(.is-locked) .card-frame,
.card-detail-art.rarity-rare {
  filter: drop-shadow(0 0 8px rgba(174, 92, 255, .86)) drop-shadow(0 0 18px rgba(116, 37, 211, .48));
}
.mini-card.rarity-hidden,
.collection-item.rarity-hidden:not(.is-locked) .card-frame,
.card-detail-art.rarity-hidden {
  filter: drop-shadow(0 0 9px rgba(255, 211, 82, .9)) drop-shadow(0 0 20px rgba(221, 139, 16, .58));
}
.mini-card.rarity-rare::after,
.mini-card.rarity-hidden::after,
.card-detail-art.rarity-rare::after,
.card-detail-art.rarity-hidden::after {
  content: "";
  position: absolute;
  inset: 2%;
  z-index: 3;
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 22%, rgba(255,255,255,.58) 42%, transparent 58%);
  background-size: 220% 100%;
  mix-blend-mode: screen;
  animation: card-rarity-shine 2.8s ease-in-out infinite;
}
.mini-card.rarity-rare::before,
.card-detail-art.rarity-rare::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -1;
  border: 2px solid rgba(180, 107, 255, .78);
  border-radius: 12px;
  box-shadow: inset 0 0 15px rgba(151, 70, 255, .44);
  pointer-events: none;
}
.mini-card.rarity-hidden::before,
.card-detail-art.rarity-hidden::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -1;
  border: 2px solid rgba(255, 211, 92, .9);
  border-radius: 12px;
  box-shadow: inset 0 0 18px rgba(255, 177, 29, .54);
  pointer-events: none;
}
@keyframes card-rarity-shine {
  0%, 28% { background-position: 170% 0; opacity: 0; }
  45% { opacity: .82; }
  68%, 100% { background-position: -60% 0; opacity: 0; }
}

/* Card detail: keep the full 2:3 card inside its page and centre both columns. */
.card-detail-panel { width: min(640px, calc(100% - 20px)); }
.card-detail-panel form {
  min-height: 430px;
  padding: 42px 48px 44px 58px;
  overflow: hidden;
}
.card-detail-layout {
  grid-template-columns: minmax(160px, 40%) minmax(0, 1fr);
  gap: 28px;
  min-height: 330px;
  margin-top: 10px;
  padding-left: 10px;
  align-items: center;
}
.card-detail-art {
  position: relative;
  justify-self: center;
  box-sizing: border-box;
  width: min(100%, 216px);
  margin-left: 8px;
  aspect-ratio: 2 / 3;
  padding: 0;
  isolation: isolate;
}
.card-detail-art img.card-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: contain;
}
.card-detail-art .rarity-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: contain;
}

/* Compact single-title collection header and one-row filters. */
.album-panel .collection-shell {
  grid-template-rows: 48px 34px minmax(410px, 1fr) 52px;
  gap: 4px;
  padding-top: 8px;
}
.collection-hero {
  box-sizing: border-box;
  width: min(300px, 40vw);
  min-height: 44px;
  height: 44px;
  margin: 0;
  padding: 5px 50px 7px;
  border: 2px solid rgba(110, 55, 23, .55);
  border-radius: 9px;
  background:
    linear-gradient(rgba(255,244,204,.82), rgba(218,177,107,.9)),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(85,42,18,.05) 9px);
  box-shadow: inset 0 0 0 2px rgba(255,237,181,.5), 0 4px 7px rgba(44,17,5,.25);
  filter: none;
}
.album-panel .collection-hero h2 {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1;
  white-space: nowrap;
}
.collection-summary {
  display: none;
}
.collection-filterbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(940px, 96%);
  min-width: 0;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.collection-filterbar::-webkit-scrollbar { display: none; }
.collection-filter-divider {
  flex: 0 0 1px;
  height: 20px;
  background: rgba(119, 61, 25, .4);
}
.collection-status-tabs,
.collection-series-tabs {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  gap: 5px;
}
.collection-status-tabs button,
.collection-series-tabs button {
  box-sizing: border-box;
  width: auto;
  min-width: 66px;
  min-height: 28px;
  height: 28px;
  padding: 3px 10px;
  border: 1px solid rgba(121, 64, 28, .48);
  border-radius: 999px;
  color: #75401e;
  background: linear-gradient(#f9e9ba, #d9ab61);
  box-shadow: inset 0 1px rgba(255,255,255,.65);
  font-size: 12px;
  line-height: 1;
}
.collection-status-tabs button[aria-selected="true"],
.collection-series-tabs button[aria-pressed="true"] {
  min-height: 28px;
  color: #fff3cc;
  background: linear-gradient(#7b9638, #4c6e27);
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 2px 4px rgba(66,32,10,.25);
}
.collection-series-tabs button b {
  min-width: 17px;
  margin-left: 5px;
  padding: 1px 4px;
  border-radius: 9px;
  background: rgba(255,255,255,.23);
  font-size: 10px;
}
.collection-book { min-height: 410px; }
.collection-book-toolbar #collection-total { display: none; }

@media (max-width: 540px) {
  .card-detail-panel form { min-height: 390px; padding: 38px 28px 32px 46px; }
  .card-detail-layout { grid-template-columns: minmax(132px, 40%) 1fr; gap: 16px; min-height: 300px; padding-left: 12px; }
  .card-detail-art { width: min(100%, 168px); margin-left: 6px; }

  .album-panel .collection-shell {
    grid-template-rows: 42px 32px minmax(0, 1fr) 46px;
    padding-top: max(5px, env(safe-area-inset-top));
  }
  .collection-hero {
    width: min(245px, 68vw);
    min-height: 38px;
    height: 38px;
    padding: 3px 40px 6px;
  }
  .album-panel .collection-hero h2 { font-size: 19px; }
  .collection-filterbar { justify-content: flex-start; width: 96%; gap: 6px; }
  .collection-status-tabs button,
  .collection-series-tabs button { min-width: 58px; height: 26px; min-height: 26px; padding: 2px 8px; font-size: 11px; }
  .collection-status-tabs button[aria-selected="true"],
  .collection-series-tabs button[aria-pressed="true"] { min-height: 26px; }
  .collection-book { min-height: 0; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .album-panel .collection-shell {
    grid-template-columns: 170px 1fr;
    grid-template-rows: 32px 30px minmax(0, 1fr) 34px;
  }
  .collection-hero {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 160px;
    height: 52px;
    min-height: 52px;
    padding: 5px 35px 7px;
  }
  .album-panel .collection-hero h2 { font-size: 17px; }
  .collection-filterbar { grid-column: 2; grid-row: 1 / 3; width: 100%; }
  .collection-book { grid-column: 1 / 3; grid-row: 3; }
  .collection-actions { grid-column: 1 / 3; grid-row: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .mini-card::after,
  .card-detail-art::after { animation: none !important; }
}