/* Card frame (RSP-45, design G): white card with an ink outline; colour only in the art and the code badge.
   Zones have a minimum size (status name 2 lines, creature 1, move 1, card line 3) and grow when the text is bigger,
   e.g. with the phone's larger font setting (WCAG 1.4.4), so text never leaves the card. Cards in one grid row
   stretch to the same height; the card line takes the extra space and stays centred.
   The card keeps its print look in dark mode too (white card, ink text), like a real card on a dark table. */
.card{
  --cf-ink:#33202F; --cf-pill:#E9E5F0;
  --cf-pad:8px; --cf-badge:44px; --cf-code:15px; --cf-st:10.5px; --cf-name:17px; --cf-move:11px; --cf-line:13px; --cf-lh:1.35;
  position:relative; display:flex; flex-direction:column; width:100%; text-align:left;
  background:#FFFFFF; color:var(--cf-ink); border:2.5px solid var(--cf-ink); border-radius:18px; padding:var(--cf-pad);
  box-shadow:0 2px 0 rgb(51 32 47 / .12); font-family:var(--body); cursor:pointer; transition:transform .15s
}
@media (min-width:600px){.card{--cf-pad:12px; --cf-badge:60px; --cf-code:19px; --cf-st:15px; --cf-name:21px; --cf-move:14px; --cf-line:14px; --cf-lh:1.4; border-radius:20px}}
.card:hover{transform:translateY(-3px)}
.card > span{display:block}

/* Art window: the -art.jpg crop now; a transparent creature image later, same slot. */
.cf-art img{display:block; width:100%; aspect-ratio:640/573; object-fit:cover; border:2.5px solid var(--cf-ink); border-radius:12px; background:#F3F1F7}

/* Status row: the badge overlaps the art's bottom-left corner; the status name always sits under the badge,
   centred across the full card width like the panel below, in a zone of at least 2 lines (centred vertically). Same layout on every card and at any
   text size: long words like UNPROCESSABLE never squeeze next to the badge, nothing breaks inside a word.
   Only the badge reaches up into the art, so the name never covers it. */
.cf-status{display:flex !important; flex-direction:column; align-items:flex-start; gap:3px; padding:0 2px; position:relative}
/* The badge grows with the digits when the text is bigger, so the code never touches the circle. */
/* Class symbol (RSP-124): a white circle in the bottom-right corner, just under the art (never on it, so it hides no
   part of any picture), so classes differ by shape as well as colour. It stays clear of the digits and of the status name.
   Sized from the badge (same font size, same max()), so it grows with the badge at larger text sizes. */
.cf-badgerow{display:flex; align-self:flex-start; margin-top:calc(var(--cf-badge) * -.45)}
.cf-sym{position:absolute; top:3px; right:2px; font-size:var(--cf-code); --cf-b:max(var(--cf-badge), 2.9em); width:calc(var(--cf-b) * .5); height:calc(var(--cf-b) * .5);
  border-radius:50%; background:#FFFFFF; border:2px solid var(--cf-ink); color:var(--cf-ink); display:grid !important; place-items:center}
.cf-sym .cls-sym{width:62%; height:62%; display:block}
.cf-code{flex:none; width:max(var(--cf-badge), 2.9em); height:max(var(--cf-badge), 2.9em); border-radius:50%; border:2.5px solid var(--cf-ink); display:grid; place-items:center; font:800 var(--cf-code)/1 var(--mono); color:var(--cf-ink)}
.cf-name{width:100%; min-height:calc(var(--cf-st) * 1.1 * 2); display:flex; align-items:center; justify-content:center; text-align:center; font:800 var(--cf-st)/1.1 var(--display); text-transform:uppercase; letter-spacing:.02em; overflow-wrap:break-word; hyphens:none}
/* Open panel under a dashed divider: creature name, move pill, card line (at least 3 lines, centred vertically). */
.cf-panel{flex:1; display:flex !important; flex-direction:column; align-items:center; gap:5px; margin-top:8px; padding:8px 2px 2px; border-top:2px dashed var(--cf-ink); text-align:center}
.cf-creature{max-width:100%; font:800 var(--cf-name)/1.1 var(--display); overflow-wrap:break-word}
.cf-move{max-width:100%; background:var(--cf-pill); border-radius:12px; padding:2px 8px; font:700 var(--cf-move)/1.3 var(--display); overflow-wrap:break-word}
.cf-line{flex:1; width:100%; min-height:calc(var(--cf-line) * var(--cf-lh) * 3); display:flex; align-items:center; justify-content:center; font-size:var(--cf-line); line-height:var(--cf-lh); color:var(--cf-ink); overflow-wrap:break-word}

/* The same card on top of the card detail: not a button, always the 240px desktop sizes. */
.card.cf-static{--cf-pad:12px; --cf-badge:60px; --cf-code:19px; --cf-st:15px; --cf-name:21px; --cf-move:14px; --cf-line:14px; --cf-lh:1.4; max-width:260px; margin:4px auto 0; cursor:default; transform:none}
@media (max-width:480px){.card.cf-static{margin-top:34px}}   /* room for the close button on phones */

/* A card that scales with its box (Traps pairs): phone proportions, every size relative to a 165px card. The box sets the width. */
.cf-box{container-type:inline-size; min-width:0}
.cf-box > .card{--u:calc(100cqi / 165); --cf-pad:calc(8 * var(--u)); --cf-badge:calc(44 * var(--u)); --cf-code:calc(15 * var(--u)); --cf-st:calc(10.5 * var(--u));
  --cf-name:calc(17 * var(--u)); --cf-move:calc(11 * var(--u)); --cf-line:calc(13 * var(--u)); --cf-lh:1.35; max-width:none; margin:0; border-radius:calc(18 * var(--u))}
.cf-box .cf-art img{border-radius:calc(12 * var(--u))}
.cf-box .cf-status{gap:calc(3 * var(--u))}
.cf-box .cf-panel{gap:calc(5 * var(--u)); margin-top:calc(8 * var(--u)); padding-top:calc(8 * var(--u))}
.cf-box .cf-move{padding:calc(2 * var(--u)) calc(8 * var(--u))}

/* "Known" check on the top-right corner, clear of all text. */
.card .badge{position:absolute; z-index:1; top:-9px; right:-9px; width:28px; height:28px; display:grid; place-items:center; background:#1E7A50; color:#fff; font:800 15px/1 var(--body); border:3px solid var(--bg); border-radius:50%; pointer-events:none}

/* Text only for screen readers. */
.sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}