/* ═══════════════════════════════════════════════════════════════════════
   fg-cards.css  —  Field Guide condition card popup for SRS concept panel
   Namespaced with .fg-* to avoid collision with card-demo-v2.html classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── MASTERY BORDER DATA-URIS ────────────────────────────────────────── */
:root {
  --b-locked:   url("data:image/png;base64,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");
  --b-new:      url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAK8klEQVR4nOWbSYwjVxnHfy4vVd7L+97Ty2Q4gHIA5QBCSBDlEHFAcODAEolFkcKRQzhEiqIoHBIJjnAZcmEicYiEUAQc0OQQCSENSpDCZCHp7ulxe2m3992uctkcqurZnWlkIeie8eQvWa5+78n9vq++73vf9uBTDof1vbivu7h/cLjsp7duHTDTZ4wnU/K5FPV6i8FwjGEYuJxOWu0e0UiI0XhCo9EmnY7jVWSGwzG6PiOsBlHDQXr9IYvFgk6nz3AwIpmK4Xa7GI0m1OstDGNOOBTAI7sJhQI0mx0y6QThcACPx81gOKJebzMYjJgbcyLREMGAH1n2oOs6g+GYu3cr5PMpotEwB/vHJJNRkqkYvd6AXneAP+ADoFZrUCxWCIdDbBXSOCQJp1Oi1erxnW99CQDBgKOjMk99+ytrWXb9tzfJZpMs5gsymQSTqQZAuXxKqVRjsTDHk4kISiGNLHvYPygiezy4nE4AxpMpuVySO0dlFosF//roiFDITyymok017hyVGY/HGHOD4ShGoZDm4PCYyUTD7/fi8ym4XS7KpRputwtNn9Fu9yjerfDD735tLQ3v/qsmngUD+v0hAD974dd4PArzucHcMJCcTiTJiaZNePmFZ/jx9x9f+w/uN9bRUDw+EWsFA+LxCAAej4Lb5eb5Z38gFr34yg3x/Ld/3MXldFI8rhIOBQDQ9RmD4QivInNwUAJgZzeHNtVxSA5CwQDT6ZThGIJbbzZJmcnAJS8RZKTRZbSINlVAi8r8RZKKLPnFBHkWv2dvuFjz3e7yW/3iQFMXZ2nrUaH3jX4yDI5cqVvXzAcFvFxloNm3kO6s/4hLEPsWCkNxb1aFzKq8Bel8qXVGphLGKsEqVJEMTbKvxGF1GXZJ9lDz0aA4bM8jyBkjQhagXhxIQ1UXJGmfZ7DlFhXiXHbwKhQOQyh3Hq1yrpxgL6m7Blt5pUdFXxOZbJmr3ZidZnGjPpg7GS1bYYhb3I30uNPpNbWn/kOuX6mE4wQRvJj2iBMFNRbWJu5H8LUBdYqFr24U1sB4hJIXAqwD+1gFm3eTCqq5N8RP7Mf1KgCDPGrv9gIvCCbqMQegCqQ8PtVCDNdcoivMCXapkEAVVl+p1Bxf/1HvhXk7I0gCoXs4BNfsCGD6fIKbLbfJxlf+uF+kPRZlVcGKR0GdqLlbJJpQE7rAz1h5lZDHn0LMGKdkj4sTdBTyRJB0MHc3MoSLp/R/jl43i6Q+2iuDyqJVbp5t7Ea3/5X0kAD0SJJqIm3y+C5ADo5kxrLvwLgMkN6hXGjLN4o3SuUqkFuNIaVRFj6Rc3k4j8pbPTWYMGLlPSapzQqJPTklCKBQpyCGnqGEjKc43X9lZ1aLWH/X9dZ8kRxDipH/fWf3GKiCcCSmQs0MPTirCsA4FGi6rJFlNdS5i/g0BFM+YV8fM2lxKN2vDCIZ/OlF0q+GXb0J0aEEhDoLlnkTqXPSSJB8UfoCAAHkHg9HQikQVMcg5LlNS6U5AAAAASUVORK5CYII=");
  --b-learning: url("data:image/png;base64,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");
  --b-familiar: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAI/UlEQVR4nOWbTWxc1RXHf/e+r3kz47EzIU4cxwQnaUMhVWgkqi5od1SIRaVuWol+qZEqtYVFhYKglHwAhSTiQyygUFUKi0KldlW1m6pdVVSVCqUKbYCQ5sMYQrCJHWdm3rzve7t4nsm8ceKwwGPy+t/Yc/x855zzzj33PPvX5NBcwmi5/d++ZWe+zTg4+qakwtAv/et7+OutwlnY8ZfOtId4Oy3d+OMWkhbUj/0PPMP/AgVKfyZiImXX+wfeDXRtaFf1yvZ1LHBBHDX25S3uUira48GcMdtSptLCFsC4G5z0ZHKffGgLLwaOjb063olmzowAcLZGGkJwg8jANQfHkB+7RD+2QgVa+TioP5JvxsBAMn8k92BRDtFTHvo2RA0JM0Ee4ODd6yFLBuUbq6iPlcDKRAfhYjzISJR6KoJCvSwBRUT+eZFdKjQ24fg7Qbh2ZDSzVXScyFm3UKHitaxFuXtZeSoA40Yeeehrk79uoazcWbT0UeQt+zr2tiRd9zTfZPp2z+HigmGwBi/v2tg9Os92N+5ZLD65wF0yUBf58Dil2YjK+RUi+BoA2ejQ+P1JmbVoPqFoexZIbL/G3WQ0230lIewBPFcjD1RQrsmxAq1vYY800Kd9TGqJmkrQScaFLRP+gztrKJvqoFjQCvBuPFnXRX0nx9EfPXxS5//+hDpjTXkO03kVx7tDRyRSw76Tz8FS5LMRQhTIDe56PEyeEn25s6HiCAlPN0mWUgw11jYW1z0DVWQIKbbYAj0iI2c8dGmJDnTRpYksiwRjoGuWaSnPIxtFcR8RPP1BtWdVag7ECuomuj1LrQT5LRHOheDQfdtUzERfore6KJrFmI2QG9wEed8iBRYkvBYk9IWF7WxjFiIEO0ENVlFHLtI840Ww4/C2b7oWYXyuRfbVa/WZOzf0kfaMH9WIe0FafC+rNPH3RUuIX2FYkMjZ3kUoaVSXIW/VGbQH1c2YRQA4aL2oUiC5CfxoAN0u3GZrQ3uEiAJYZ7bVzIcbNM0k/fS0UpA4PuFfcW7m00GRJQlclxNGWPiZMYJQfhcBIk8IK7n71gFv+ABVoGJCkqvhLBP1ZSHnnNVjwi3vA6/YE/fXd3WfU3mwBvJ/7sO4JgBbOPNECL5cMMG1C5pPeqFuZXIrgzgZVuRlJYkqBdVFi0VCG8OJBcpqEuBYQfpTRmRF7NiDVNpB1B3U4ICwEH1AoNIHFO48nIcNhRgjD9MRkGYGMtBqmS7kLpF0mK0OFuS5c5bYkFzJFPi0iHk6mzH7d5OcDZ4DnRNVS1FLUktRQ0ZLHrMJJtZmZbfFHk6wLRcthcJrfJ/R5wJJXBBZBzFKkiPFUEwAAAABJRU5ErkJggg==");
  --b-near:     url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAI9UlEQVR4nO2b7YscVRbGf3Xrvfplumd6kkwMu+IH/xQJBEGyBDLqxnETkbDZbGQ3CtmYjWNW1jcMEghZlcSsOoIgCyKIf0o+LNmgCc5kerqru6q63u7dD9XdMxkzyW40PZOODzR0UXWL5zz33lP3nHuuxr1D/YS29wPa/Wq03lANUJf/fgi/m5BmEl3XqFVsbMdmudnFMjRmHtmBkgpd1wnDEKUU3U6HH5o9klQyXbepll16cYwuBI7rkOeSMIhQQLubkmYKxxZM1Rwq1Sod3yfLcvwgI0kl9YqJUmAYGr/7y8Uht//HRuNuxh/ct5vJqgdA0w/56ItvFECrE5OkEssU2JZOqxOz3XGYmZkiiWNaKys4joPnldA0Dcu2yPOMUpRR8TSqFY96vU6v16MXRfh+QC4L7p5jsmuHR5ZlWLZNpVJBKkW5XCHPMoKoTRhlZJkkySSNCftufDcU4U4CqIP7dvPrmRqn3v8cgPmj+5nb+wSXvvyWXTsb5FmGbhj0oghdxIBCSUWpXEYX+vBFvV6PXq9H2w9RElxPJ+7FZHmGaZo4jkOtXsf3fVZaHVb8GIgpewa249DpdGi3OySpJMsVJUenVrEQAkxDoPp9Prf3iR/xPbhv911F2FCAl1/4jQLUB/Nz6sLpOQWow7N7FMUw23K/AbcLp+fUB/MF34ENGxl5xyng2sVtTdPIpeTMsVlOnl3g0V89/r8IOHKcX/iaM8dmyaVC1wWwasNGEOuu1yqKbQrOnTzAoVcv0o0ybq5E94H2z4ubKxHdKOPQqxc5d/IAtjk08RbbBlg7L9TBfbuZqpXwbAPLFJx4b4E3//w0vViytBJw7pOvtmzvD3D12hWOPPsk0/USji148Z3PeOOlWZJUEsYZy62Aj774Bvq2DwT4kcM7d/IAQZTxyrufDV++1Y0f4Oq1K8P/b/7paUquwZEzl4HCMf7nRmsownCCTFY9Tr3/OR/Mz6FpGodevchrf9gPPDiGDzDge/XaFXqJ5JV3L/Ph68+jlOKFU5c4fnDv8Nn1PgApIUklbx1/hqWVYHSs7xOWVgLeOv4MSSqR8sf3hwI0/ZD5o/t58fQlmn7C9cUHY87fCY/+6nHOffIV1xcDmn7Ci6cvMX90P00/HD5zixOc2/sErm1yfuHr4QvGAQOfcHh2D1GccunLb2G9E1zbYFwMX4+1zrEPzQDU2RO/pdVJqFcs/vjGPzeB2ujwj9fmiBOJ0DV+P/+xMgAcS/DItLvZ3EaCiYkShmESBoWDFwD1WgUhNPwg21Ryo4DQBFJKsiwH+rGA4zjkeY4fpJtKbhQIw5BcSiYnJ4G+AEtLywgNJqv2HRuPA0zTJOysxjQGQJzkrHRSJsrmphEbFcIoplKyse2isw2A6cYErtNF5lstzffzw7ZNNG11+SMAelHEzMwM09sam0ZsVLjZDNE0jRs3bgDDKZARxzF5nm8quVGgVrEIwh7L7QToj4A8VzSXmzju+K8FojgnyRRJVkRGAqBSdogSSdzraS+9IdJb6wEwnUwr6QXGzkgsgbIAhAYUllE3dKQKng9whiOUeV3AKeU8F2lxP5dOuW5WJXR7HZI0n/n++pqgLxIi8zjZnbpEUUTVYFgmrfl+p1z7/OaARHF17J1zAGyducTxrfOHP6oV4/jWebbOXAIWvEJpCdSNvGrSbLfIsuqFwnXdoNlu5dfGktKYqs53g7JMmlYvLZymmagOF7xCuTI0z5f5rsedm9cqs/4ht2V3bl7DLxIhpdqnEIA8JxbusIooeJOXCSAjbzO5feNqpWa/wJtvvMXtG1d5970P97k8YQTTJBZJkSojDIJ9J2H3RYJVW/tPo7AF5WW+qA57ByuIvuyHqA8ygWVeX9g1VqDcRlc0Tf31sz9y9vxlJFkmnkWomkqj1WRtvUuW5VmYvd2BSEPreh3TMmm2Gli2yWw249HDx+iGjud6hEFAmmZ0eh2Ge0N0vY6qaQz3BpiWyfrmOp7nkyYJdV2n22vx64/OcXzrPHXdPHDT1L/VNfb8trlcdrKsMBwMsG0bu2HT67UZOVPGozFxFFPX6xx5fZM0STEtA9M0cKceuzsDNE3Fsi0GT/YYO2OiKKLRahDO83eWbRFHMe1uG1lWGDkjQMJzXUbOGM+bC9awRNvcqe/87IVtc2V80zg5//wft87++KdXcKcuSZLQardI05SNjT6qpvLwH18y3BtgNxr017psf7mDqqq89q1NarUa49GEycQlTRJmswhn4KAbOs1WE62mEUcRzXaThm3hOGN2d54QzWbzXsQa9XqNP/3hF1+rdbZg/rlNxhV67eOr4FkqfVm9NNBXIwP4Fx9J6jtVgnUjAAAAAElFTkSuQmCC");
  --b-mastered: url("data:image/png;base64,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");
}

/* ── SYSTEM COLORS — all 15 B1 systems ──────────────────────────────── */
.fg-sys-CARDIO  { --sys-hue: rgba(220,60,60,0.10);   --sys-name-color: #c04040; }
.fg-sys-PULM    { --sys-hue: rgba(60,140,220,0.10);  --sys-name-color: #4080b0; }
.fg-sys-GI      { --sys-hue: rgba(60,180,80,0.10);   --sys-name-color: #408040; }
.fg-sys-ENDO    { --sys-hue: rgba(255,140,40,0.10);  --sys-name-color: #b06020; }
.fg-sys-NEURO   { --sys-hue: rgba(160,60,220,0.10);  --sys-name-color: #9040b0; }
.fg-sys-MSK     { --sys-hue: rgba(180,120,60,0.10);  --sys-name-color: #8a5830; }
.fg-sys-RENAL   { --sys-hue: rgba(60,200,200,0.10);  --sys-name-color: #208888; }
.fg-sys-GU      { --sys-hue: rgba(255,200,60,0.10);  --sys-name-color: #c89a30; }
.fg-sys-HEME    { --sys-hue: rgba(200,40,40,0.12);   --sys-name-color: #a03030; }
.fg-sys-ID      { --sys-hue: rgba(80,180,80,0.10);   --sys-name-color: #306830; }
.fg-sys-DERM    { --sys-hue: rgba(220,160,40,0.10);  --sys-name-color: #906820; }
.fg-sys-IMMUNE  { --sys-hue: rgba(80,100,220,0.10);  --sys-name-color: #4050a8; }
.fg-sys-ENT     { --sys-hue: rgba(100,200,220,0.10); --sys-name-color: #307888; }
.fg-sys-PSYCH   { --sys-hue: rgba(180,80,180,0.10);  --sys-name-color: #884488; }
.fg-sys-REPRO   { --sys-hue: rgba(220,80,140,0.10);  --sys-name-color: #a03468; }

/* ── CARD SHELL ──────────────────────────────────────────────────────── */
.fg-card {
  width: 110px;
  height: 154px;
  position: relative;
  display: flex;
  flex-direction: column;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* ── BORDER-IMAGE per mastery tier ───────────────────────────────────── */
.fg-mastery-0 { border: 9px solid transparent; border-image: var(--b-locked)   10 fill / 10px stretch; }
.fg-mastery-1 { border: 9px solid transparent; border-image: var(--b-new)      10 fill / 10px stretch; }
.fg-mastery-2 { border: 9px solid transparent; border-image: var(--b-learning) 10 fill / 10px stretch; }
.fg-mastery-3 { border: 9px solid transparent; border-image: var(--b-familiar) 10 fill / 10px stretch; }
.fg-mastery-4 { border: 9px solid transparent; border-image: var(--b-near)     10 fill / 10px stretch; }
.fg-mastery-5 { border: 9px solid transparent; border-image: var(--b-mastered) 10 fill / 10px stretch; animation: fg-goldPulse 2.8s ease-in-out infinite; }

@keyframes fg-goldPulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,210,80,0.3)); }
  50%       { filter: drop-shadow(0 0 10px rgba(255,210,80,0.7)); }
}

/* ── SYSTEM HUE OVERLAY ──────────────────────────────────────────────── */
.fg-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sys-hue, transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── LOCKED STATE ────────────────────────────────────────────────────── */
.fg-mastery-0 .card-art-emoji { filter: grayscale(1) brightness(0.5) !important; }
.fg-mastery-0 .card-name      { color: #5a5060 !important; }
.fg-mastery-0 .card-bar-fill  { width: 0 !important; }

/* ── INNER CONTENT ───────────────────────────────────────────────────── */
.fg-card .card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 2px 2px;
}

/* System bar */
.fg-card .card-sys-bar {
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 1px;
}
.fg-card .card-sys-emoji {
  font-size: 8px;
  line-height: 1;
  opacity: 0.75;
}
.fg-card .card-sys-label {
  font-family: 'Cinzel', serif;
  font-size: 5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sys-name-color, #aaa);
  opacity: 0.9;
}

/* Art zone */
.fg-card .card-art-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fg-card .card-art-emoji {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8));
}

/* Name zone */
.fg-card .card-name-zone {
  padding: 2px 3px 1px;
}
.fg-card .card-name {
  font-family: 'Cinzel', serif;
  font-size: 7px;
  font-weight: 600;
  color: #e8c88a;
  letter-spacing: 0.2px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fg-card .card-tag {
  font-family: 'Cinzel', serif;
  font-size: 5px;
  letter-spacing: 0.8px;
  color: #8a7050;
  margin-top: 1px;
  text-transform: uppercase;
}

/* Mastery bar */
.fg-card .card-bar-zone {
  margin: 2px 0 1px;
  height: 5px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.fg-card .card-bar-fill {
  position: absolute;
  inset: 1px auto 1px 1px;
  background: linear-gradient(90deg, #a07030, #ffd060);
  transition: width 0.4s ease;
  background-size: 200% 100%;
}
.fg-mastery-5 .card-bar-fill {
  background: linear-gradient(90deg, #ffa030, #fff080, #ffa030);
  background-size: 200% 100%;
  animation: fg-shimmer 2s linear infinite;
}
@keyframes fg-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position:  100% 0; }
}

/* ── POPUP WRAPPER ───────────────────────────────────────────────────── */
.fg-card-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0 4px;
}

.fg-card-popup.fg-popup--discover {
  animation: fg-popup-spring 0.42s cubic-bezier(0.16,1,0.3,1) both;
}
.fg-card-popup.fg-popup--update {
  animation: fg-popup-fade 0.28s ease both;
}

@keyframes fg-popup-spring {
  from { opacity: 0; transform: translateY(16px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fg-popup-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── DISCOVER BADGE ──────────────────────────────────────────────────── */
.fg-discover-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(200,145,58,0.14);
  color: #e0aa50;
  border: 1px solid rgba(200,145,58,0.35);
  animation: fg-badge-pop 0.38s 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes fg-badge-pop {
  from { opacity: 0; transform: scale(0.6) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── LEVEL CHIP (for updates / mastery bump) ─────────────────────────── */
.fg-level-chip {
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--chip-color, #888);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── KEY RULE ────────────────────────────────────────────────────────── */
.fg-key-rule {
  max-width: 200px;
  font-size: 0.7rem;
  color: var(--text2, #aaa);
  line-height: 1.5;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
  padding: 0 4px;
}