.vocation-details{display:grid;gap:1.25rem;margin-top:2rem;min-width:0}.vocation-details>article{scroll-margin-top:2rem}.vocation-detail-grid,.vocation-gear-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.vocation-detail-grid section{padding:.75rem;border:1px solid #735486;border-radius:.5rem}.vocation-familiar{float:right;max-width:120px;max-height:120px;image-rendering:pixelated;margin:0 0 1rem 1rem}.vocation-gear{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border:1px solid #735486;border-radius:.5rem;min-width:0}.vocation-gear img{flex:none;image-rendering:pixelated}.vocation-gear h4,.vocation-gear p{margin:.2rem 0;overflow-wrap:anywhere}.vocation-table-scroll{max-width:100%;overflow-x:auto}.vocation-details table{width:100%;border-collapse:collapse;min-width:420px}.vocation-details td,.vocation-details th{text-align:left;padding:.65rem;border-bottom:1px solid #735486}.vocation-details .portal-tags{flex-wrap:wrap}@media(max-width:720px){.vocation-detail-grid,.vocation-gear-grid{grid-template-columns:1fr}.vocation-familiar{max-width:88px;max-height:88px}.vocation-gear img{width:48px;height:48px}}

 /* R196: three choices per family; scoped and readable on small screens. */
.vocation-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}
.vocation-option{min-width:0;border:1px solid #66513a;border-radius:10px;padding:16px;background:rgba(0,0,0,.14)}
.vocation-option img{display:block;max-width:100%;height:160px;width:auto;margin:0 auto;object-fit:contain;image-rendering:pixelated}
.vocation-option h4{margin:0 0 8px}.vocation-role{color:#e2c279;font-weight:bold}
@media(max-width:850px){.vocation-options{grid-template-columns:1fr}.vocation-option img{height:128px}}

/* R213: abilities use their true 32px display size, independent of the portrait rule. */
.vocation-option .vocation-ability-icon{width:32px;height:32px;min-width:32px;margin:0;object-fit:contain;image-rendering:pixelated}
.vocation-ability{display:flex;align-items:flex-start;gap:10px;margin:12px 0;min-width:0}
.vocation-ability>div{min-width:0}.vocation-ability p{margin:4px 0;overflow-wrap:anywhere}
.vocation-abilities,.vocation-talents{margin-top:12px}.vocation-talents li{margin-bottom:8px;overflow-wrap:anywhere}

/* R213: prevent intrinsic table width from expanding mobile grid tracks. */
.vocation-details{grid-template-columns:minmax(0,1fr)}
.vocation-details>article{min-width:0;overflow-wrap:anywhere}