/* Mycelium — the Field Guide card face (chosen direction).
   Shared by the style lab and the mechanics view so there is exactly one
   definition of the card. Geometry per spec §7: 300 x 420, 1 : 1.4.

   Zones A/B/C/E are FIXED height; only D (body) flexes and clips. That is
   what guarantees the science always sits in the same place on every card. */

.card{width:300px;height:420px;display:flex;flex-direction:column;overflow:hidden;
      position:relative;flex:0 0 auto}
.ic,.gi{display:block;flex:0 0 auto}

.fg{background:#f4eede;color:#2b2a24;border:1px solid #b9ac8c;border-radius:3px;
    font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
    box-shadow:0 10px 26px rgba(0,0,0,.45)}

/* --- Zone A: header --- */
.fg .c-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;
            padding:13px 15px 9px;border-bottom:1px solid #cdbf9b}
.fg .c-type{color:var(--cc)}
.fg .c-titles{min-width:0;flex:1}
.fg .c-titles h3{margin:0;line-height:1.12;font-size:19.5px;font-weight:600;letter-spacing:.2px;
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg .c-role{margin:0;font-family:system-ui,sans-serif;font-size:9.5px;letter-spacing:1.6px;
            text-transform:uppercase;color:#7d7460;margin-top:2px}
.fg .c-tier{font-family:system-ui,sans-serif;font-size:10px;letter-spacing:1px;
            border:1px solid #b9ac8c;color:#6b6350;padding:3px 7px;border-radius:2px}

/* --- Zone B: art plate --- */
.fg .c-art{position:relative;flex:0 0 auto;overflow:hidden;
           height:142px;margin:10px 15px 0;border:1px solid #cdbf9b}
.fg .c-art svg.scene{display:block;width:100%;height:100%}
.fg .c-kind{position:absolute;display:grid;place-items:center;
            right:7px;top:7px;width:30px;height:30px;background:#f4eede;
            border:1px solid #b9ac8c;border-radius:50%;color:var(--cc)}
.fg .c-pts{position:absolute;display:flex;align-items:center;gap:4px;
           left:7px;top:7px;background:#f4eede;border:1px solid #b9ac8c;
           padding:3px 8px;border-radius:2px;font-size:13px;font-weight:700;color:var(--cc)}

/* --- Zone C: stat strip (16px icon floor, per spec §6.4) --- */
.fg .c-stats{display:flex;align-items:center;flex:0 0 auto;overflow:hidden;
             margin:0 15px;padding:8px 0;gap:12px;border-bottom:1px solid #cdbf9b;
             font-family:system-ui,sans-serif;font-size:10.5px;color:#5f5847}
.fg .c-stat{display:flex;align-items:center;gap:5px;white-space:nowrap}
.fg .c-stat .ic,.fg .c-stat .gi{color:#8d846c}

/* --- Zone D: body (the only flexing zone) --- */
.fg .c-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden;
            padding:9px 15px 0;gap:7px}
.fg .c-keys{display:flex;gap:5px;flex-wrap:wrap}
.fg .chip{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
          font-family:system-ui,sans-serif;font-size:9.5px;letter-spacing:.7px;
          text-transform:uppercase;border:1px solid var(--cc);color:var(--cc);
          padding:2.5px 7px;border-radius:2px}
.fg .c-ab{margin:0;font-size:13.6px;line-height:1.45}
.fg .c-bond{display:flex;align-items:center;gap:6px;font-size:11.2px;line-height:1.34;
            color:#6b6350;font-style:italic;border-left:2px solid var(--cc);padding-left:8px}

/* --- Zone E: footer, clamped to exactly two lines --- */
.fg .c-fact{flex:0 0 auto;display:flex;gap:7px;align-items:flex-start;
            margin:auto 15px 0;padding:9px 0 12px;border-top:1px solid #cdbf9b;
            font-size:11.4px;line-height:1.4;color:#6b6350;font-style:italic}
.fg .c-fact p{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
              overflow:hidden}
.fg .c-fact .ic,.fg .c-fact .gi{color:var(--cc);margin-top:1px}
/* the honesty flag REPLACES the fact styling rather than adding a block */
.fg .c-fact.honest{color:#9a5a2f;background:#efe3ce;font-style:normal}
.fg .c-fact.honest .ic,.fg .c-fact.honest .gi{color:#9a5a2f}

/* --- state: WITHERED --- a card whose support is missing.
   Deliberately NOT styled as death. It is desaturated and dimmed, not struck
   out, because it is still on the board and will recover if the missing piece
   returns. Amber rather than red: a warning, not a fatality. */
.fg.dead{filter:saturate(.28) brightness(.86);opacity:.72}
.fg.dead:after{content:"WITHERED";position:absolute;top:50%;left:50%;
               transform:translate(-50%,-50%) rotate(-9deg);
               font-family:system-ui,sans-serif;font-size:18px;font-weight:800;
               letter-spacing:4px;color:#9a6a2f;border:2px solid #9a6a2f;
               padding:6px 16px;background:rgba(244,238,222,.88)}
.fg.dead:before{content:"0 Vigour · ability off · recovers if support returns";
                position:absolute;left:0;right:0;bottom:0;z-index:2;
                font-family:system-ui,sans-serif;font-size:9.5px;letter-spacing:.6px;
                text-align:center;padding:5px 4px;color:#7a5a2a;
                background:rgba(224,200,150,.94);border-top:1px solid #9a6a2f}