/* The piece card (scripts/piececard.js): dialogcard.js's card (css/valuedialog.css's .pg-vd: the dark face, the head,
   ✕, the phone's sizes) with a piece's picture and its texts; the owner's colour (--pg-vd-c, set by piececard.js) for
   the border, the owner's name, the piece's kind and the texts' bold words. As wide as the rune dialog on a computer;
   on a phone dialogcard.js sets the width. The texts scroll in .pg-pc-body (its height set by piececard.js). */

.pg-vd.pg-pc { width: 290px; }
/* It never turns over: no 3D (10.10.2026: on Omri's Android phone it closed, or vanished, as it opened, while the Power
   and points dialog, the same card with no scrolling part, works there; a scrolling part inside a 3D face with its
   back hidden is drawn wrong by some phones' Chrome). */
.pg-vd.pg-pc { perspective: none; }
.pg-pc .pg-vd-card { transform-style: flat; transition: none; }
.pg-pc .pg-vd-face { -webkit-backface-visibility: visible; backface-visibility: visible; }

.pg-pc-top { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.pg-pc-pic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 72px;
    padding: 6px;
    border-radius: 8px;
    background: #23262e;
}
.pg-pc-pic img { display: block; max-width: 120px; max-height: 110px; }
.pg-pc-id { min-width: 0; }
.pg-pc .pg-pc-name { color: #f4f2ee; font-size: 18px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pg-pc .pg-pc-kind { margin-top: 2px; color: var(--pg-vd-c, #f0c24b); font-size: 13px; font-weight: 600; }
.pg-pc .pg-pc-stats { margin-top: 4px; color: #c9c7c2; font-size: 14px; }

.pg-pc-body { overflow-y: auto; overscroll-behavior: contain; margin-right: -6px; padding-right: 6px; }
.pg-pc-section + .pg-pc-section { margin-top: 12px; }
.pg-pc-section .pg-vd-label { display: block; margin-bottom: 4px; }
.pg-pc .pg-pc-text { color: #e8e6e1; font-size: 15px; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.pg-pc-text + .pg-pc-text { margin-top: 8px; }
.pg-pc-text b, .pg-pc-text strong { color: var(--pg-vd-c, #f0c24b); }

.pg-vd-phone .pg-pc-text { font-size: 16px; }
.pg-vd-phone .pg-pc-name { font-size: 20px; }
.pg-vd-phone .pg-pc-stats { font-size: 15px; }

/* An empire card's unit (SetupTable.php, AlliedEldersLib.php, SetupElderRaces.php) opens the card too. */
.pc-unit[data-pc] { cursor: pointer; }
/* Under the names of the gifts that affect a piece: they're its owner's to earn, not its abilities. */
.pg-pc .pg-pc-note { margin-top: 6px; color: #9a988f; font-size: 13px; line-height: 1.4; }