/* Misiunile de călărie */
.ca-page h1 { margin: 0 0 10px; font: 800 34px/1.1 Cinzel, serif; color: #f2e6c9; }
.ca-page .lead { max-width: 680px; }
.ca-h3 { margin: 22px 0 10px; font: 700 15px/1.3 Inter, sans-serif; color: #f2e6c9; }

/* capul paginii */
.ca-cap { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center;
  margin: 10px 0 18px; padding: 18px 20px; border-radius: 20px;
  background: radial-gradient(ellipse at 12% 50%, rgba(245,197,66,.09), transparent 62%), rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.08); }
.ca-cap::before, .ca-cap::after { content: ""; position: absolute; width: 24px; height: 24px;
  border: 2px solid rgba(245,197,66,.3); pointer-events: none; }
.ca-cap::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-radius: 9px 0 0 0; }
.ca-cap::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-radius: 0 0 9px 0; }
.ca-npc { width: 100%; height: auto; max-height: 230px; object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.65)); }
.ca-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ca-chip { padding: 6px 13px; border-radius: 999px; font: 600 12.5px/1 Inter, sans-serif; color: #8d95a8;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.ca-chip b { font-weight: 800; color: #f5c542; }

/* cuprins */
.ca-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.ca-nav a { padding: 7px 13px; border-radius: 999px; text-decoration: none;
  font: 600 12.5px/1 Inter, sans-serif; color: #8d95a8;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ca-nav a:hover { color: #f5c542; border-color: rgba(245,197,66,.45); background: rgba(245,197,66,.08); }

/* caii */
.ca-lista { display: grid; gap: 11px; }
.ca-c { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center;
  padding: 13px 16px 13px 13px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.ca-c-im { display: grid; place-items: center; height: 120px; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 90%, rgba(245,197,66,.12), transparent 65%), rgba(0,0,0,.28); }
.ca-c-im img { max-width: 100%; max-height: 118px; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.ca-c-b header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.ca-c-b header b { font: 700 16px/1.3 Inter, sans-serif; color: #f2e6c9; }
.ca-tag { padding: 3px 9px; border-radius: 999px; font: 700 10px/1.3 Inter, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: #f5c542;
  background: rgba(245,197,66,.12); border: 1px solid rgba(245,197,66,.28); }
.ca-c-b p { margin: 7px 0 0; font: 500 13px/1.55 Inter, sans-serif; color: #a9b2c4; }
.ca-c-f { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ca-pil { padding: 4px 10px; border-radius: 999px; font: 600 11.5px/1 Inter, sans-serif; color: #8d95a8;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); }
.ca-pil.hr { color: #7bd389; border-color: rgba(123,211,137,.26); background: rgba(123,211,137,.08); }

/* variantele cu breasla */
.ca-vari { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 11px; }
.ca-var { padding: 12px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.06); }
.ca-var > u { display: block; margin-bottom: 9px; text-decoration: none; font: 800 9.5px/1.3 Inter, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #6b7488; }
.ca-var-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ca-var-r figure { margin: 0; text-align: center; }
.ca-var-r img { width: 100%; height: 84px; object-fit: contain; }
.ca-var-r figcaption { margin-top: 3px; font: 500 10.5px/1.2 Inter, sans-serif; color: #6b7488; }

/* sansele de imblanzire */
.ca-sanse { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); gap: 7px; }
.ca-sans { padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07); }
.ca-sans.plin { background: rgba(123,211,137,.08); border-color: rgba(123,211,137,.28); }
.ca-sans b { font: 800 17px/1 Inter, sans-serif; color: #f5c542; }
.ca-sans.plin b { color: #7bd389; }
.ca-sans s { display: block; margin-top: 2px; text-decoration: none; font: 500 11px/1 Inter, sans-serif; color: #6b7488; }
.ca-sans-b { height: 4px; margin-top: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.ca-sans-b i { display: block; height: 100%; background: linear-gradient(90deg, #cfa544, #f5c542); }
.ca-sans.plin .ca-sans-b i { background: linear-gradient(90deg, #4f9f63, #7bd389); }

/* starile calului */
.ca-stari { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 9px; }
.ca-stare { padding: 12px; border-radius: 13px; text-align: center;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.ca-stare img { height: 34px; object-fit: contain; image-rendering: pixelated; }
.ca-stare b { display: block; margin-top: 7px; font: 700 13px/1.3 Inter, sans-serif; color: #f2e6c9; }
.ca-stare span { display: block; margin-top: 3px; font: 500 11.5px/1.45 Inter, sans-serif; color: #8d95a8; }

/* obiecte, hrana si iarba */
.ca-obi-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 8px; }
.ca-obi { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.065); }
.ca-obi img { flex: none; width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.ca-obi > span { min-width: 0; }
.ca-obi b { display: block; font: 700 13px/1.3 Inter, sans-serif; color: #e8ecf6; }
.ca-obi i { display: block; margin-top: 2px; font: 500 11.5px/1.4 Inter, sans-serif; font-style: normal; color: #8d95a8; }
.ca-obi.mare { background: rgba(245,197,66,.08); border-color: rgba(245,197,66,.26); }
.ca-obi.mare b { color: #f5c542; }

/* misiunile mari */
.ca-mis { display: grid; gap: 13px; }
.ca-m { position: relative; padding: 16px 18px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.ca-m > header { display: flex; align-items: center; gap: 12px; }
.ca-nr { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  font: 800 15px/1 Cinzel, serif; color: #f5c542;
  background: rgba(245,197,66,.1); border: 1px solid rgba(245,197,66,.3); }
.ca-m header > div { flex: 1; min-width: 0; }
.ca-m header b { display: block; font: 700 16px/1.3 Inter, sans-serif; color: #f2e6c9; }
.ca-m header i { display: block; font-style: normal; margin-top: 2px; font: 500 12px/1 Inter, sans-serif; color: #7f879a; }
.ca-m-cal { flex: none; height: 62px; object-fit: contain; opacity: .9; }
.ca-m-g { display: grid; grid-template-columns: 1.2fr 1fr; gap: 11px; margin: 14px 0 0; }
.ca-m-g > div { padding: 11px 13px; border-radius: 12px; background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.055); }
.ca-m-g u { display: block; margin-bottom: 8px; text-decoration: none; font: 800 9.5px/1.3 Inter, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #6b7488; }
.ca-m-cond dl { margin: 0; display: grid; gap: 5px; }
.ca-m-cond dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ca-m-cond dt { font: 500 12px/1.4 Inter, sans-serif; color: #8d95a8; }
.ca-m-cond dd { margin: 0; font: 700 12.5px/1.4 Inter, sans-serif; color: #e8ecf6; text-align: right; }
.ca-sarcina { margin: 12px 0 0; padding: 11px 13px; border-radius: 12px;
  font: 600 13.5px/1.5 Inter, sans-serif; color: #f2e6c9;
  background: rgba(245,197,66,.07); border: 1px solid rgba(245,197,66,.24); }
.ca-sarcina u { display: block; margin-bottom: 4px; text-decoration: none; font: 800 9.5px/1.3 Inter, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #cfa544; }
.ca-det { margin: 11px 0 0; padding: 0 0 0 17px; display: grid; gap: 5px; }
.ca-det li { font: 500 12.5px/1.55 Inter, sans-serif; color: #a9b2c4; }
.ca-det li::marker { color: #4f5666; }
.ca-atentie { margin: 11px 0 0; padding: 9px 12px; border-radius: 10px;
  font: 600 12px/1.5 Inter, sans-serif; color: #ffc9a0;
  background: rgba(255,106,61,.09); border: 1px solid rgba(255,106,61,.26); }

/* regulile si pasii */
.ca-reguli { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 9px; margin-bottom: 14px; }
.ca-reguli > div { padding: 11px 13px; border-radius: 12px; background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.06); }
.ca-reguli b { display: block; font: 700 12.5px/1.3 Inter, sans-serif; color: #f5c542; }
.ca-reguli span { display: block; margin-top: 4px; font: 500 12px/1.5 Inter, sans-serif; color: #a9b2c4; }
.ca-pasi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 7px; }
.ca-pas { display: flex; align-items: center; gap: 11px; padding: 9px 13px; border-radius: 11px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.065); }
.ca-pas > b { flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px;
  font: 800 12.5px/1 Inter, sans-serif; color: #f5c542;
  background: rgba(245,197,66,.1); border: 1px solid rgba(245,197,66,.26); }
.ca-pas span { font: 500 12.5px/1.35 Inter, sans-serif; color: #cbd3e3; }
.ca-pas i { font-style: normal; font-weight: 800; color: #f2e6c9; }
.ca-note { margin-top: 14px; display: grid; gap: 7px; }
.ca-note p { margin: 0; padding: 9px 13px; border-radius: 11px;
  font: 500 12.5px/1.55 Inter, sans-serif; color: #a9b2c4;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.055); }
.ca-note b { color: #f2e6c9; }

/* tabele */
.ca-tw { overflow-x: auto; border-radius: 13px; border: 1px solid rgba(255,255,255,.07); }
.ca-t { width: 100%; border-collapse: collapse; font: 500 12.5px/1.4 Inter, sans-serif; }
.ca-t th, .ca-t td { padding: 8px 12px; text-align: left; white-space: nowrap; }
.ca-t thead th { position: sticky; top: 0; font: 800 9.5px/1.3 Inter, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #6b7488; background: #11131c; border-bottom: 1px solid rgba(255,255,255,.08); }
.ca-t thead th img { width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; margin-right: 4px; }
.ca-t tbody th { font: 800 13px/1 Inter, sans-serif; color: #f5c542; }
.ca-t tbody td { color: #a9b2c4; }
.ca-t tbody td b { color: #e8ecf6; font-weight: 700; }
.ca-t tbody tr:nth-child(even) { background: rgba(255,255,255,.022); }
.ca-t tbody tr:hover { background: rgba(245,197,66,.06); }
.ca-t.mic th, .ca-t.mic td { padding: 6px 11px; }
.ca-doua-tab { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.ca-doua-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* taste */
.ca-taste { display: grid; gap: 6px; }
.ca-tasta { display: flex; align-items: center; gap: 11px; padding: 7px 11px; border-radius: 10px;
  background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.06); }
.ca-tasta kbd { flex: none; padding: 4px 9px; border-radius: 7px; font: 700 11.5px/1 Inter, sans-serif;
  color: #f2e6c9; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.ca-tasta span { font: 500 12.5px/1.4 Inter, sans-serif; color: #a9b2c4; }

/* abilitati */
.ca-ab-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 8px; }
.ca-ab { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.065); }
.ca-ab img { flex: none; width: 32px; height: 32px; object-fit: contain; border-radius: 7px; image-rendering: pixelated; }
.ca-ab > span { flex: 1; min-width: 0; }
.ca-ab b { display: block; font: 700 12.5px/1.3 Inter, sans-serif; color: #e8ecf6; }
.ca-ab i { display: block; margin-top: 2px; font-style: normal; font: 500 11.5px/1.4 Inter, sans-serif; color: #8d95a8; }
.ca-ab > s { flex: none; text-decoration: none; padding: 4px 9px; border-radius: 999px;
  font: 700 10.5px/1 Inter, sans-serif; color: #f5c542;
  background: rgba(245,197,66,.1); border: 1px solid rgba(245,197,66,.26); }
.ca-grupe { display: grid; gap: 14px; }
.ca-grup > u { display: block; margin-bottom: 8px; text-decoration: none; font: 800 9.5px/1.3 Inter, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: #cfa544; }

@media (max-width: 860px) {
  .ca-doua-tab, .ca-doua-col { grid-template-columns: 1fr; }
  .ca-m-g { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ca-cap { grid-template-columns: 104px 1fr; gap: 14px; padding: 14px; }
  .ca-npc { max-height: 150px; }
  .ca-page h1 { font-size: 26px; }
  .ca-c { grid-template-columns: 1fr; }
  .ca-c-im { height: 150px; }
  .ca-m-cal { display: none; }
}