/* ============================================================
   card-core.css — カードの「不変の土台」
   サイズ・比率・3Dフリップ機構・面の配置だけを定義する。
   見た目（色・フレーム・装飾）は一切ここに書かない。
   デザイン差し替えは skins/<名前>/skin.css の交換だけで行い、
   このファイルと card.js のDOM構造には手を入れない約束。
   （差し替え基準は docs/04_card-skin-spec.md 参照）
   ============================================================ */

.catl-card {
  /* サイズの基準。JSが size に応じて上書きする */
  --card-w: 240px;
  /* 種別のアクセント色。JSが config.types[].accent を注入する */
  --accent: var(--brand);

  width: var(--card-w);
  aspect-ratio: 5 / 7; /* TCGの実カード比（63:88）にほぼ一致。全スキン共通 */
  /* この font-size が縮尺の心臓部。スキン側は寸法を必ず em で書く */
  font-size: calc(var(--card-w) * 0.058);
  position: relative;
  /* 3D回転の遠近感。値が小さいほどダイナミックにめくれる */
  perspective: 1200px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------- フリップ機構 ----------------
   JS（cardRenderer.flipCard）は .is-flipped の付け外ししかしない。
   回転アニメ自体はここが担い、スキンは装飾だけを担う */
.card-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 560ms var(--ease-spring);
  will-change: transform;
}
.catl-card.is-flipped .card-flipper {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* iPhone/Safari系で backface-visibility が甘くなる時の保険。
     めくり終わる頃に反対面を visibility でも隠し、裏面に表面の文字が残るのを防ぐ。 */
  transition: visibility 0s linear 280ms;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-face.front {
  visibility: visible;
  transform: rotateY(0deg) translateZ(0.1px);
  -webkit-transform: rotateY(0deg) translateZ(0.1px);
}
.card-face.back {
  visibility: hidden;
  transform: rotateY(180deg) translateZ(0.1px);
  -webkit-transform: rotateY(180deg) translateZ(0.1px);
}
.catl-card.is-flipped .card-face.front,
.catl-card:not(.is-flipped) .card-face.back {
  visibility: hidden;
}
.catl-card:not(.is-flipped) .card-face.front,
.catl-card.is-flipped .card-face.back {
  visibility: visible;
  transition-delay: 0s;
}

/* ---------------- compact形態（S5-B） ----------------
   横長チップ。フリップ機構なし・表面相当のみ。スキンは装飾してよいが
   必須ではない（この素の見た目だけで成立する）。docs/04 参照 */
.catl-card.is-compact {
  aspect-ratio: auto;
  height: auto;
  perspective: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.7em;
  border-radius: 0.55em;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-left: 0.3em solid var(--accent);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 16%, var(--card-frame)) 0%,
    var(--card-frame-2) 100%);
  color: var(--card-text);
}
.catl-card.is-compact .compact-icon {
  font-size: 1.05em;
  flex: none;
}
.catl-card.is-compact .compact-title {
  flex: 1;
  min-width: 0;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catl-card.is-compact .card-badge {
  flex: none;
  font-size: 0.6em;
  font-weight: 800;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 25%, transparent);
}
/* 状態のさりげない反映（スキンに依存しない最低限） */
.catl-card.is-compact.is-foil { border-left-color: #a78bfa; }
.catl-card.is-compact.is-hall { border-left-color: #d4af37; }
.catl-card.is-compact.is-hall .compact-title::after { content: " 👑"; font-size: 0.9em; }