/* =========================
   Character Display
========================= */

.display-row {
  margin: 18px 0 26px;
}

.display-row-title {
  font-size: 14px;
  letter-spacing: .18em;
  color: #5266b4;
  margin-bottom: 10px;
}

.display-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}

.display-list__item {
  width: 78px;
}

/* アイコン外側：影と浮き担当 */
.display-icon {
  display: block;
  width: 78px;
  aspect-ratio: 1 / 1;

  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.45))
    drop-shadow(0 3px 5px rgba(0,0,0,.32));

  transition:
    transform .2s ease,
    filter .2s ease;
}

.display-icon:hover {
  transform: translateY(-4px) scale(1.04);

  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.7))
    drop-shadow(0 12px 18px rgba(0,0,0,.42));
}

/* アイコン内側：形・切り抜き担当 */
.display-icon__shape {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;

  background: rgba(255,255,255,.18);

  border: 1px solid rgba(180,190,255,.55);

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -3px 6px rgba(0,0,0,.28);
}
.display-icon__shape {
  position: relative;
}

.display-icon__shape::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.45),
      rgba(255,255,255,0) 40%
    );

  pointer-events: none;
}
.display-icon__shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TRPGキャラ：八角形 */
.shape-octagon {
  clip-path: polygon(
    30% 0%, 70% 0%,
    100% 30%, 100% 70%,
    70% 100%, 30% 100%,
    0% 70%, 0% 30%
  );
}

/* 創作キャラ：菱形 */
.shape-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 企画キャラ：丸 */
.shape-round {
  border-radius: 50%;
}
/* =========================
   Display Page
========================= */

.display-warning {
  margin: 0 0 28px;
  padding: 12px 16px;

  background: rgba(120,150,255,.08);
  border: 1px solid rgba(120,150,255,.24);

  color: #5d6fc4;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.8;
}

.display-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.display-links a {
  padding: 6px 14px;
  border: 1px solid rgba(82,102,180,.35);
  color: #5266b4;
  background: rgba(255,255,255,.45);
  font-size: 12px;
  letter-spacing: .12em;
  text-decoration: none;
}

.display-links a:hover {
  background: rgba(120,150,255,.12);
}
/* =========================
   Display Gallery
========================= */

.display-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 22px;

  align-items: start;
}

.display-stand {
  position: relative;
  display: block;

  padding: 12px;

  background: rgba(255,255,255,.08);

  border: 1px solid rgba(255,255,255,.18);

  box-shadow:
    0 8px 20px rgba(0,0,0,.18);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.display-stand:hover {
  transform: translateY(-4px);

  box-shadow:
    0 14px 28px rgba(0,0,0,.24);
}

.display-stand img {
  display: block;
  width: 100%;
  height: auto;
}

/* ネタバレ */
.spoiler-stand {
  overflow: hidden;
}

.spoiler-stand img {
  filter: blur(14px) brightness(.72);
  transition: .25s ease;
}

.spoiler-stand:hover img {
  filter: blur(8px) brightness(.86);
}

.spoiler-stand span {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  color: #fff;
  font-size: 14px;
  letter-spacing: .14em;

  text-shadow:
    0 2px 10px rgba(0,0,0,.9);

  pointer-events: none;
}

/* スマホ */
@media screen and (max-width: 700px) {

  .display-gallery {
    grid-template-columns: 1fr;
    gap: 18px;
  }

}