/*
 * カード。全種類を縦長 5:7 にそろえる。画像があれば枠に収め(contain)、無ければ名前と効果文の文字のカードで代用する。
 * 未公開のキャラの裏面は、全員同じ(キャラ・陣営を示すクラス・属性・文言を持たない)。
 */
.ccard, .card {
  --cw: 150px;
  position: relative; width: var(--cw); aspect-ratio: 5 / 7; flex: none;
  background: linear-gradient(160deg, var(--paper), var(--paper-2)); color: var(--paper-ink);
  border: 3px solid var(--paper-edge); border-radius: 12px; padding: 8px; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; font-size: .78rem; line-height: 1.35;
}
.ccard--large { --cw: 210px; font-size: .86rem; }
.ccard--small, .card--small { --cw: 88px; font-size: .62rem; padding: 4px; border-width: 2px; border-radius: 8px; }
.ccard__top { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.ccard__name, .card__name { font-family: var(--serif); font-weight: 800; font-size: 1.05em; line-height: 1.2; }
.ccard__hp { font-weight: 700; white-space: nowrap; }
.ccard__ability { font-weight: 700; color: #6b2d12; }
.ccard__text, .card__effect { margin: 0; font-size: .95em; overflow: auto; }
.ccard__win { margin-top: auto; border-top: 1px solid var(--paper-edge); padding-top: 4px; font-size: .9em; }
.ccard .faction { font-size: .9em; }
.ccard--raider .faction { color: #1c5bb8; }
.ccard--shadow .faction { color: #6a37c4; }
.ccard--citizen .faction { color: #8a5d00; }
.ccard--raider { border-color: #3d79d6; }
.ccard--shadow { border-color: #7f52d6; }
.ccard--citizen { border-color: #c48d1a; }
.ccard--small .ccard__text, .ccard--small .ccard__win, .ccard--small .ccard__ability { display: none; }

/* 画像があるとき */
.ccard__img, .card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #1a1a2a; }
.ccard--img > :not(.ccard__img), .card--img > :not(.card__img) { position: relative; z-index: 1; }
.ccard--img .ccard__top, .ccard--img .ccard__text, .ccard--img .ccard__win, .ccard--img .ccard__ability,
.card--img .card__name, .card--img .card__effect { visibility: hidden; } /* 画像に書いてあるので、文字は読み上げ用にだけ残す */

/* 裏面(未公開・山札・推理カードの裏)。全員同じ見た目 */
.ccard--back, .card--back {
  background: repeating-linear-gradient(45deg, #26357a 0 10px, #1d2a66 10px 20px); border-color: #7f8bc4; color: #cbd3ee;
  align-items: center; justify-content: center; text-align: center;
}
.ccard--back::after, .card--back::after {
  content: "?"; font-family: var(--serif); font-size: 2.2em; font-weight: 800; opacity: .8;
}
.card--back-white { background: repeating-linear-gradient(45deg, #e9e2cf 0 10px, #ddd3b8 10px 20px); color: #4a3f25; border-color: var(--paper-edge); }
.card--back-black { background: repeating-linear-gradient(45deg, #2a2a33 0 10px, #1f1f27 10px 20px); }
.card--back-deduction { background: repeating-linear-gradient(45deg, #4b2a63 0 10px, #3b1f50 10px 20px); }

/* 山札 */
.decks { display: flex; gap: 10px; flex-wrap: wrap; }
.deck { display: grid; gap: 2px; justify-items: center; font-size: .85rem; color: var(--muted); }
.deck .card { --cw: 64px; }
.deck__count { font-weight: 700; color: var(--text); }

/* 装備(小さく並べる。ホバー/タップで拡大) */
.equipment { display: flex; flex-wrap: wrap; gap: 4px; }
.echip { position: relative; display: inline-block; }
.echip__btn {
  min-height: 32px; padding: 2px 8px; font-size: .78rem; font-weight: 600; background: var(--paper); color: var(--paper-ink);
  border: 2px solid var(--paper-edge); border-radius: 8px;
}
.echip__pop {
  display: none; position: fixed; z-index: 30; width: 190px; /* 位置は popover_controller.js が、開くたびに決める */
}
.echip__pop .card { --cw: 190px; font-size: .85rem; box-shadow: 0 12px 28px rgba(0, 0, 0, .6); }
.echip:hover .echip__pop, .echip:focus-within .echip__pop, .echip[data-open="true"] .echip__pop { display: block; }

/* 引いた直後の使い捨てカードの演出 */
.card-toast {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 40; display: none; text-align: center;
}
.card-toast[data-show="true"] { display: block; animation: toast-pop 3.6s ease both; }
.card-toast__text {
  margin: 0 auto 8px; max-width: 320px; padding: 6px 12px; border: 2px solid var(--turn); border-radius: 12px;
  background: rgba(10, 14, 36, .95); font-weight: 700;
}
.card-toast .card { --cw: 200px; margin: 0 auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .7); }
@keyframes toast-pop {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.85); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; }
}
#card-toast-live[data-show="true"] { pointer-events: auto; cursor: pointer; }