/* CHUNITHM card renderer: 768 x 1052 logical canvas, scaled to its container. */
.chu-card {
  position: relative;
  width: 100%;
  aspect-ratio: 768 / 1052;
  overflow: hidden;
  background: #ffffff;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

.chu-card__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 768px;
  height: 1052px;
  transform-origin: top left;
  transform: scale(var(--chu-scale, 1));
}

.chu-card__layer,
.chu-card__slot img,
.chu-card__figures img {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.chu-card__layer--fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chu-card__slot {
  position: absolute;
  transform-origin: center;
  z-index: 50;
}

.chu-card__slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chu-card__figures {
  position: absolute;
  transform-origin: center;
  overflow: visible;
  z-index: 60;
}

.chu-card__figures img {
  position: absolute;
  width: 37px;
  height: 40px;
  object-fit: cover;
}

.chu-card__text {
  position: absolute;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #ffffff;
  font-family: 'SEGA MaruGothic DB', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.chu-card__text--cardnumber {
  font-size: 17px;
  line-height: 1.5;
}

.chu-card__text--skilldesc {
  display: block;
  overflow: hidden;
  font-size: 24px;
  line-height: 1.2;
  text-align: left;
  white-space: pre-wrap;
}

.chu-card__watermark {
  position: absolute;
  z-index: 90;
  inset: -12%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  transform: rotate(-28deg);
  pointer-events: none;
  opacity: 0.5;
}

.chu-card__watermark span {
  width: 50%;
  padding: 18px 0;
  text-align: center;
  font-family: 'SEGA MaruGothic DB', sans-serif;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

@media (max-width: 440px) {
  .chu-card__watermark span { font-size: 40px; padding: 12px 0; }
}

.chu-card--list .chu-card__canvas {
  /* The two-layer list preview still uses the same logical canvas. */
}

@media (prefers-reduced-motion: reduce) {
  .chu-card__canvas {
    transition: none;
  }
}